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);
}
};