QrcodeStream is not working on iPadOS/iOS15

[ykjp]

In iPadOS/iOS15 QrcodeStream does not work. It will not show anything on video canvas directly. Demo Page also has the same problem. If I change the iPhone/iPad direction or scroll the page to re-render the page, video canvas will be appeared.

↓Video https://user-images.githubusercontent.com/91316243/134649049-1985fc8c-d4bf-45f4-8509-8a42e6a42d7d.MP4

Just iPadOS15/iOS15 has this problem.

[ykjp]

When I update MacOS to BigSur11.6, MacOS Safari(Version 15) has the same problem as iPhone/iPadOS15. It will show video canvas when detected QRCode.

MacOS Chrome will show video canvas directly.

[m1llipede]

Also having this issue on iPad running IOS15. The camera feed will, at times, not render footage from the camera. If I click the home button then reopen safari the camera feed is usually restored.

Any solution for this?

[uaru]

Another workaround is to change the orientation of the device, eg. from vertical to horizontal, and back - this is probably the quickest way to force the browser to repaint the camera area without reloading.

[gruhn]

Ok, I have a theory. Can you guys confirm that this demo reproduces the problem?

[uaru]

@gruhn It works on my iPad with iOS 15 - when I click on either links on demo page, the camera just works.

[gruhn]

@uaru so the demo does not reproduce the problem for you?

[gruhn]

Also, does the issue still occur here (pick any demo): https://gruhn.github.io/select-camera-demo/dist/

Otherwise I have a fix.

[uaru]

@gruhn With those links everything works now.

[gruhn]

Fix is out: https://github.com/gruhn/vue-qrcode-reader/releases/tag/v3.0.4

I'll close this. Make a noise if the issue still occurs.

[rrrrando]

This is still not working with vue3. I managed to get a workaround by adding an empty div above the component and then toggling it after i turn on the camera. Like this:

<div v-if="active"></div>
<qrcode-stream :camera="camera" @decode="onDecode" @init="onInit" />

And then in the script:

const active = ref(false);
const activate = async () => {
    active.value = true;
    setTimeout(() => {
        active.value = false;
    }, 50);
};

const onDecode = async (code) => {
    camera.value = `off`;
    //Validate code
    camera.value = `auto`;
    activate();
}

[matiasleybadixtra]

@rrrrando works for me! 👍🏻