Can't read QR Code with BarCodeScanner/Camera on web build.

Summary

When building the web project. It is not possible to read QR Codes in browsers.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Web

SDK Version (managed workflow only)

41.0.1

Environment

Expo CLI 4.4.6 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 15.11.0 - ~/.nvm/versions/node/v15.11.0/bin/node
      Yarn: 1.22.10 - ~/.nvm/versions/node/v15.11.0/bin/yarn
      npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.10.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.7042882
      Xcode: 12.5/12E5244e - /usr/bin/xcodebuild
    npmPackages:
      expo: ~41.0.1 => 41.0.1 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 4.4.6
    Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

import React, { useState, useEffect, useContext } from 'react';
import { useNavigation } from '@react-navigation/core';
import { TouchableOpacity, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import Toast from 'react-native-toast-message';

import { BarCodeScanningResult, Camera } from 'expo-camera';
import { BarCodeScanner } from 'expo-barcode-scanner';

import { Loading } from '@views/components/Loading';
import { Text } from '@views/components/Text';

import { QRCodeType } from '@domain/entities/scanner.entity';
import { QRCodeAdapter } from '@data/adapters/qrCode.adapter';
import { VinculateEstablishment } from '@data/usecases/vinculateEstablishment.usecase';

import { ThemeContext } from 'styled-components/native';
import { Container, CameraContent } from './styles';
import { Alert } from 'react-native';

export const Scanner = (): JSX.Element => {
    const navigation = useNavigation();
    const { colors } = useContext(ThemeContext);
    const [loading, setLoading] = useState(true);
    const [hasPermission, setHasPermission] = useState(false);

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

    const handleCodeScanned = async ({ data }: BarCodeScanningResult) => {
    
    // It doesn't arrive here in the browser
        setLoading(true);
        Toast.show({
            type: "error",
            text1: 'Ops!',
        });

        // const { type, url } = QRCodeAdapter(JSON.parse(data));

        // if (type === QRCodeType.VALIDATE) navigation.navigate('ConfirmPin', { url, type })
        // if (type === QRCodeType.VINCULATE) {
        //     await VinculateEstablishment(url);
        //     navigation.reset({ index: 0, routes: [{ name: 'Home' }] });
        // }
        // if (type === QRCodeType.WITHDRAW) navigation.navigate('ConfirmPin', { url, type })

    };

    if (loading) return <Loading />;
    if (!hasPermission) return <Text fontSize={16} color={colors.light} >Sem acesso a câmera</Text>;

    return (
        <Container>
            <Camera
                autoFocus={Camera.Constants.AutoFocus.on}
                style={{ flex: 1 }}
                type={Camera.Constants.Type.back}
                ratio="16:9"
                onBarCodeScanned={(scanningResult: BarCodeScanningResult) => handleCodeScanned(scanningResult)}
                barCodeScannerSettings={{ barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr] }}
            >
                <CameraContent>
                    <Text fontSize={24} color={colors.light} fontWeight="bold">Leia o QR Code</Text>
                    <Icon name="maximize" size={Dimensions.get('window').width / 1.1} color={colors.primary} />
                    <TouchableOpacity onPress={() => navigation.navigate('Home')} style={{ padding: 16 }} >
                        <Text fontSize={16} color={colors.light}> Cancelar </Text>
                    </TouchableOpacity>
                </CameraContent>
            </Camera>
        </Container>
    );
};

[uoyniXnaH]

Sorry for bothering. Similiar problem here. I do not know if it’s proper to create a new issue, so I reply on this one. I am running a react-native web app using react-native-web, and try using expo-camera to read qrcode. The camera works perfectly, but does not scan any qrcode. I have tried putting a qrcode or a barcode before the camera though, it seems that the onBarCodeScanned is not activated.

Packages versions: react: ^17.0.1 react-native: sdk-42.0.0 react-native-web: ^0.17.1 expo: ~42.0.1 expo-camera: ~11.2.2 expo-barcode-scanner: ~10.2.2 [at]koale/useworker: ^4.0.2

Any advice would be appreciated.

Update: Problem solved. For web build, barCodeScannerSettings is necessary (while for expo app it could be ignored).

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.