Recently, Expo got a nice upgrade to version 39 and they claim you can now scan barcodes in the Browser using expo-camera: https://dev.to/expo/expo-sdk-39-is-now-available-1lm8
It works fine for Android and iOS, but I still can't use it in the Browser (I know I can use other scanning libraries for Web, but it would be great to just use one library expo-camera)
Is there any extra configuration?
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,
},
});
The Component works on Web and the camera is showing, but I just don't get any onBarCodeScanned event. I have even tried taking pictures and it works in all platforms: let photo = await camera.takePictureAsync({ base64: true, quality: 0.5 });
Thank you!
