expo-camera - OnBarCodeScanned not working on web

Expo SDK
1

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.

2

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

3

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.

4

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
5

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
6

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?

7

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
8

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

9

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.

10

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