React native React Native，Expo 39：在Web中使用Expo摄像头扫描条形码

最近，Expo对版本39进行了很好的升级，他们声称您现在可以使用Expo摄像头扫描浏览器中的条形码：

它适用于Android和iOS，但我仍然无法在浏览器中使用它（我知道我可以使用其他用于Web的扫描库，但如果只使用一个库

expo camera

，那就太好了）

是否有其他配置

my

package.json

...
dependencies: {
  ...,
  "expo": "~39.0.2",
  "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
  "react-native-web": "~0.13.12",
  "expo-camera": "~9.0.0",
  ...
}

MyCamera.tsx

：

import React, { useEffect, useState } from 'react';
import { useIsFocused } from '@react-navigation/native';
import { Platform, StyleSheet, Text } from 'react-native';
import { BarCodeScanningResult, Camera } from 'expo-camera';

function PPCamera() {
  // properties
  const [hasPermission, setHasPermission] = useState(false);
  const [scanned, setScanned] = useState(false);
  const isFocused = useIsFocused();
  let camera: Camera | null;

  // methods
  useEffect(() => {
    (async () => {
      if (Platform.OS === 'web') {
        setHasPermission(true);
      } else {
        const { status } = await Camera.requestPermissionsAsync();
        console.log({ status });

        setHasPermission(status === 'granted');
      }
    })();
  }, []);

  const handleBarCodeScanned = (scanResult: BarCodeScanningResult) => {
    console.log({ scanResult });
    const { type, data } = scanResult;
    setScanned(true);
    alert(data);
    setTimeout(() => {
      setScanned(false);
    }, 1000);
  };

  // render
  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return (
    isFocused && (
      <Camera
        ref={(ref) => {
          camera = ref;
        }}
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
    )
  );
}

export default PPCamera;

const styles = StyleSheet.create({
  camera: {
    height: '80%',
    width: '100%',
    borderWidth: 2,
  },
});

import React，{useffect，useState}来自“React”；
从'@react-navigation/native'导入{useIsFocused}；
从“react native”导入{Platform，StyleSheet，Text}；
从“expo Camera”导入{BarCodeScanningResult，Camera}；
函数PPCamera（）{
//性质
const[hasPermission，setHasPermission]=useState（false）；
const[scanned，setScanned]=使用状态（false）；
const isFocused=useiscocused（）；
让摄像机：摄像机|空；
//方法
useffect（（）=>{
（异步（）=>{
如果（Platform.OS==='web'）{
setHasPermission（true）；
}否则{
const{status}=wait-Camera.requestPermissionsAsync（）；
console.log（{status}）；
setHasPermission（状态==‘已授予’）；
}
})();
}, []);
const handleBarCodeScanned=（扫描结果：条形码扫描结果）=>{
log（{scanResult}）；
const{type，data}=scanResult；
（真实的）；
警报（数据）；
设置超时（（）=>{
(假);；
}, 1000);
};
//渲染
if（hasPermission==null）{
返回请求相机许可；
}
if（hasPermission==false）{
不允许进入摄像机；
}
返回(
isFocused&(
{
摄像机=参考；
}}
onBarCodeScanned={已扫描？未定义：把手代码已扫描}
style={StyleSheet.absoluteFillObject}
/>
)
);
}
导出默认PPCamera；
const styles=StyleSheet.create({
摄像机：{
身高：80%，
宽度：“100%”，
边界宽度：2，
},
});

该组件在Web上工作，摄像头正在显示，但我没有收到任何

onBarCodeScanned

事件。我甚至尝试过拍照，它在所有平台上都能工作：

let photo=wait camera.takePictureAsync（{base64:true，quality:0.5}）

谢谢大家!
 在托管应用中，摄像头需要

照相机
在App.json文件中添加权限
链接-
在托管应用程序中，摄像头需要

照相机
在App.json文件中添加权限
链接-
感谢您的回答。所有这些都适用于Android或iOS，但仅适用于网络扫描停止工作（摄像头打开，但不扫描）。我在app.json中确实有摄像头权限
NSCameraUsageDescription
用于ios和
“权限”：[“摄像头]，
用于Android感谢您的回答。所有这些都适用于Android或iOS，但仅适用于网络扫描停止工作（摄像头打开，但不扫描）。我在app.json中确实有摄像头权限
NSCameraUsageDescription
适用于ios和
“权限”：[“摄像头]，
适用于android