javascript - 如何使用react-native-vision-camera代替expo-camera？

Question

如何使用react-native-vision-camera而不是世博相机？早些时候我在世博会上开发我的项目，但目前我正在使用react native cli开发它，任何人都可以告诉我如何使用这个名为react-native-vision-camera的包，并使其与我的世博代码相同，但有任何错误尝试使用自己，我的它给了我一个黑屏在我的情况下android

展会代码:

import { Camera } from 'expo-camera';
import { TouchableOpacity, Text, View, ActivityIndicator } from 'react-native';
import { useState, useEffect, useRef } from "react";
import * as FaceDetector from 'expo-face-detector';

export default function CameraPage({ navigation }) {
  
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef(null);
  const [faceData, setFaceData] = useState([]);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <View />;
  }

  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  const handleTakePicture = async () => {
    if (faceData.length === 0) {
      alert('No Face')
    }
    else if
      (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      console.log(photo.uri)
      if (!photo.cancelled) {
        navigation.navigate('addphoto', { Image: photo.uri });
      }
    }
  }

  const handleFacesDetected = ({ faces }) => {
    setFaceData(faces);
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'black' }}>
      <Camera
        onFacesDetected={handleFacesDetected}
        faceDetectorSettings={{
          mode: FaceDetector.FaceDetectorMode.fast,
          detectLandmarks: FaceDetector.FaceDetectorLandmarks.none,
          runClassifications: FaceDetector.FaceDetectorClassifications.none,
          minDetectionInterval: 100,
          tracking: true,
        }}
        style={{
          borderTopLeftRadius: 30,
          borderTopRightRadius: 30,
          borderBottomLeftRadius: 30,
          borderBottomRightRadius: 30,
          overflow: 'hidden',
          width: '130%',
          aspectRatio: 1,
        }}
        type={Camera.Constants.Type.front}
        ref={cameraRef}
      >

        <View style={{ flex: 1, backgroundColor: 'transparent', flexDirection: 'row' }}>

        </View>
      </Camera>
      <TouchableOpacity
        style={{
          alignSelf: 'center',
          alignItems: 'center',
          width: 90,
          height: 90,
          borderRadius: 500,
          marginTop: '30%',
          marginLeft: '5%',
          borderColor: '#5A5A5A',
          borderWidth: 6,
        }}
        onPress={handleTakePicture}
      >
        <View style={{ opacity: 0.5 }} />
      </TouchableOpacity>
    </View>
  );
}

Answer 1

我是react-native-vision-camera的作者。

因此，要运行相机预览，您首先必须获得相机权限:

const cameraPermission = await Camera.requestCameraPermission()

如果这是“已授予”，那么您可以渲染相机预览:

function App() {
  const devices = useCameraDevices()
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

根据您需要相机的用途，您可以启用这些功能:

<Camera
  style={StyleSheet.absoluteFill}
  device={device}
  isActive={true}
  video={true} // <-- optional
  audio={true} // <-- optional (requires audio permission
  photo={true} // <-- optional
 />

如果你想检测Frame中的人脸，可以使用 Frame Processors .

如文档中所述，您需要安装 Reanimated v2 才能使用它们。

然后您可以简单地使用社区框架处理器插件之一，例如 rodgomesc/vision-camera-face-detector插件:

import { scanFaces } from 'vision-camera-face-detector';

function App() {
  const devices = useCameraDevices()
  const device = devices.back

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    const faces = scanFaces(frame)
    console.log("Faces:", faces)
  }, [])

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
    />
  )
}

或者，如果您想完全控制扫描，您也可以构建自己的插件。

如果某些内容对您不起作用，请浏览问题，并确保您了解工作集是什么，因为框架处理器是一个工作集。 (参见these docs by Reanimated)