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

Question

如何使用 react-native-vision-camera 代替 expo-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()

如果是

'granted'

，那么您可以渲染相机预览：

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
 />

如果您想检测框架中的面部，您可以使用框架处理器。

如文档中所述，您需要安装 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}
    />
  )
}

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

如果某些内容对您不起作用，请浏览问题，并确保您了解工作集是什么，因为框架处理器是一个工作集。 （请参阅 Reanimated 的这些文档）

Answer 2

就我而言，我使用的是expo相机人脸检测器，但在升级我的sdk 51和expo相机库后，此功能已被弃用，如果我使用react-native-vision-camera-face- detector/react-native-vision-camera-v3 -人脸检测我的博览会构建失败了。如果有人成功实现了视觉相机人脸检测器，请与我们所有人分享，谢谢 我在构建项目时遇到此错误： 失败：构建失败并出现异常。

• 出了什么问题： 任务 ':react-native-vision-camera-v3-face-detection:compileDebugKotlin' 执行失败。

执行 org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction 时发生故障 编译错误。查看日志了解更多详情

• 尝试：

使用 --stacktrace 选项运行以获取堆栈跟踪。 使用 --info 或 --debug 选项运行以获得更多日志输出。 使用 --scan 运行以获得完整的见解。 在 https://help.gradle.org 获取更多帮助。 6m 16s 内构建失败