Detect QR Code via HTML5 file input in iOS

Viewed 411

Based on this issue, it appears that I cannot use one of the many QR Code scanner libraries to embed a web-based scanner on iOS and need to use HTML5 file input. The html5-qrcode library seems to be working well.

However, the iOS camera does not detect the QR Code automatically (at least on my personal device), and I need to 1) trigger the camera, and 2) Select "Use Photo" in order to load the file onto the input element and execute the onChange event.

The default behavior of the iOS camera detects QR Codes automatically.

Is there any configuration which would get the default iOS behavior for the camera to recognize the QR Code and thus skip the extra two steps?

Here's the React input element for reference

 <input
    type="file"
    ref={inputRef}
    style={{ visibility: 'hidden' }}
    accept="image/*"
    id="cameraScanner"
    capture />

and the handler

    const handler = async (e: ChangeEvent<HTMLInputElement>) => {
      const { target } = e;
      const { files = [] } = target;
      const fileList = files as FileList;
      if (fileList.length === 0) {
        return;
      }
      const scanner = new Html5Qrcode(READER_ELEMENT_ID);
      const [imageFile] = Array.from(fileList);
      // Scan QR Code
      try {
        const spaceId = await scanner.scanFile(imageFile, false);
        processScan(spaceId);
      } catch (err) {
        handleError(e);
      }
    };
0 Answers
Related