react-native-vision-camera相机

最新推荐文章于 2024-08-10 08:12:39 发布

y199710

最新推荐文章于 2024-08-10 08:12:39 发布

阅读量945

点赞数 14

文章标签： react native

本文链接：https://blog.csdn.net/y199710/article/details/136150802

版权

一、下载

npm i react-native-vision-camera

二、设置权限

在android/app/main/AndroidManifest.xml 添加

<!-- 相机权限 -->
    <uses-permission android:name="android.permission.CAMERA" />

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

三、使用

import {
  Camera,
  useCameraDevices,
  useCameraDevice,
  useCameraPermission,
} from 'react-native-vision-camera';

  // 摄像头方向
  const [cameraDevice, setCameraDevice] = useState('back');
  // 摄像头
  const device = useCameraDevice(cameraDevice);
  const camera = useRef(null);
  // 权限
  const [hasPermission, setHasPermission] = useState(false);

  // 改变摄像头方向
  const changeCameraDevice = () => {
    if (cameraDevice == 'back') {
      setCameraDevice('front');
    } else {
      setCameraDevice('back');
    }
  };
  // 拍照
  const takePicture = async () => {
    const path = await camera.current.takePhoto(); //相机照片

    console.log(path, '拍照');
  };

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




      {device != null && hasPermission ? (
              <Camera
                style={styles.camera}
                ref={camera} // 用于获取拍照录像函数
                photo={true} //拍照功能是否打开
                device={device}
                isActive={true} //是否打开相机， 可以缓存相机，加快打开速度
                orientation="portrait" //方向  根据手机拍摄方向
              />
            ) : null}