0

As part of a react web app, we use the Zxing library to perform barcode and qr code scans. However, we encounter a problem with the iphone 13 which sets the zoom to x1 by default, which results in a blurred image when we get closer to the elements to be scanned. We would like to configure the zoom to x0.5 (as is possible in the native iphone app), but I can't find a solution compatible with ios. If you have any ideas, I'm all ears. Thanks in advance.

`

if(!navigator?.mediaDevices?.getUserMedia){
                  onError && onError('Cannot stream camera')
                  return
            }
            let userMediaStream: MediaStream
            navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment'}})
                  .then(stream => {
                        userMediaStream = stream
                        if(!videoRef?.current){
                              onError && onError('video ref missing')
                              return
                        }
                        videoRef.current.srcObject = stream
                  })
 
            return () => {
                  if(userMediaStream) {
                        userMediaStream.getTracks().forEach(t => t.stop())
                  }
            }

`

I've already tried listing the supportedConstraints:

`

const constraintList = new Array();
            const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();          
            
            for (const constraint of Object.keys(supportedConstraints)) {                 
                  
                  constraintList.push(constraint);
            }
            console.log(constraintList);

`

But I get no element allowing me to modify the zoom or the focus: ['aspectRatio', 'deviceId', 'echoCancellation', 'facingMode', 'frameRate', 'groupId', 'height', 'sampleRate', ' sampleSize', 'volume', 'width']

Damos
  • 1

1 Answers1

0

You can use react-media-devices to get an enumerated list of devices:

import { useMediaDevices } from "react-media-devices";

const videoDevices =
    devices?.filter((device) => device.kind === "videoinput") ?? [];

This will return a list of devices, each with a label ("Front Camera, Wide Angle Camera, etc) and a deviceId property, which you can then pass to react-zxing (or any other qr reader library):

const { ref } = useZxing({
    deviceId,
    onResult(result) {
    // ...
    },
    onError: (err: Error) => {
      console.error(err);
    },
  });
tombombadil
  • 1