expo-camera - OnBarCodeScanned not working on web

Hi I’m trying to do a QR code scanner on expo for a web app. It’s working perfectly on IOS and android, but when I’m trying on web, the camera show up but it’s does not detect any QR code.

Hey @louisneats, can you share your version information as well as a reproduction case that we can run on our end and also a publicly accessible QR code that you are using to test with?

Cheers,
Adam

Hi @adamjnav, thank you very much for your answer. I’m using expo-camera 9.1.0 and expo 40.0.0
and here is my code that I use to run the camera :

 React.useEffect(() => {
    (async () => {
      if (Platform.OS === 'web') {
        setHasPermission(status === 'granted');
      } else {
        const { status } = await Permissions.getAsync(Permissions.CAMERA);
        setHasPermission(status === 'granted');
      }
    })();
  }, []);

 <Camera
   ref={cameraRef}
   onBarCodeScanned={onScanned}
   onCameraReady={() => getRatio()}
   ratio={ratio}
   style={{
    position: 'absolute',
    width: deviceWidth,
    height: deviceHeight,
    zIndex: 1,
   }}
/>

I have tried to debug the onBarCodeScanned on the expo-camera package, and it’s seems that even though I’m showing a qr code to the screen, the decode function always return null, but it does work on IOS and android.

Update
I fixed the problem by forking expo-camera 11.0.2, and updated the dependancy @koale/useworker to 4.0.1 and by upgrading expo sdk to 41

2 Likes

Thank you for the workaround ! It works better on web iOS :slight_smile:.
I still have issue on android web with a white screen with the front camera.

1 Like

Sorry for bothering. Could you tell me how do you solve the problem?
I tried changing package.json under /expo-camera/, setting koale/useworker to 4.0.1, and then ran npm i under react native root dir. I checked the version of koale/useworker, and it’s 4.0.1.
However this did not work. I still got nothing from QR code. Did I take a wrong solution?

Hi chrysalis,
In my package.json, I apply a modification to force koala/useworker version 4.0.2 like this:

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    ...
  },
  "resolutions": {
    "@koale/useworker": "^4.0.2"
  },

I hope, it will work on your environment.
Regards

Sallah

1 Like

Hello Sallah,
Thank you for your kind advice!
Unfortunately it still does not work… Maybe there are some other problems.
Thank you all the same!

Best regards
chrysalis

I am facing the same issue. I am using expo-camera for scanning QR codes. It works as expected on mobile phones but on web it is not working.