Expo-camera: onBarcodeScanned not work on web, even though koale/useworker is 4.0.1

Expo SDK
1

Similiar cases here:

I changed /node_modules/expo-camera/package.json, set @koale/useworker to 4.0.1. Then I ran npm i under react native project root dir. After that I checked @koale/useworker in node_modules, and it was 4.0.1.
However, it still did not detect QR code on web.
I use Expo 42 and expo-camera 11.2.2

My package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "deploy": "gh-pages -d web-build",
    "predeploy": "expo build:web --no-pwa"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-camera": "11.2.2",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12",
    "@koale/useworker": "4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "gh-pages": "^3.2.3",
    "typescript": "~4.0.0"
  },
  "private": true,
  "homepage": "https://uoynixnah.github.io/react-native-test/"
}

My App.tsx:

import { StatusBar } from 'expo-status-bar';
import React, {useState, useEffect} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(false);
  const [type, setType] = useState(Camera.Constants.Type.back);
  const [scanned, setScanned] = useState(false);

  const handleScanned = ({type, data}) => {
    setScanned(true);
    alert(`Get: ${data}`);
  }

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

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

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

  return (
    <View style={styles.container}>
      <Camera
        style={styles.camera}
        type={type}
        onBarCodeScanned={scanned ? undefined : handleScanned}
      >
        <Text>0.0.7</Text>
      </Camera>
      {scanned && <Button title={'Try again'} onPress={()=>{setScanned(false)}} />}
      {!scanned && <Button title={'waiting...'} onPress={()=>alert("waiting...")} />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  camera: {
    flex: 1
  }
});

Any advice would be appreciated.

2

I have solved the problem. For scanning QR code, barCodeScannerSetting shoule be set.

barCodeScannerSettings={{
  barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
}}

Sorry for such a beginner’s question.

1 Like
3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.