Video missing after stop() and start() in iOS 15

[Leonick]

Have this issue in both quaggaJS and quagga2. Happening since iOS 15, fine in 14. When first starting everything works, but after doing Quagga.stop() and then doing init and Quagga.start() again the video feed is missing. It still scans and even draws the green boxes in the correct area but the view from the camera I missing. Tapping the area often makes it appear but not always.

[github-actions[bot]]

Thank you for filing an issue! Please be patient. :-)

[ericblade]

argh. I unfortunately don't have anything iOS to test on. I've seen instances where this was a problem before, and I added a Promise return from stop and start, to make sure that all of the code inside the lib has had a chance to run before returning, which seemed to fix some issues on that.

If you do await Quagga.stop() or Quagga.stop().then(() => Quagga.init(...)) something like that, does it help?

could be something in current Safari/WebKit that we may or may not be able to work around :|

[Leonick]

Adding to .then() to stop made no difference. Might as well add that init isn't down again straight away but when user taps a button. Adding .then() to my start() just made it never start. Doing Quagga.stop().then(() => Quagga.init(...)) makes it start maybe half a second after it stops but video is missing, until I tap it.

The libraries may operate completely differently so it might not say anything, but I've also been testing mebjas/html5-qrcode as a replacement as quaggaJS seemed dead, and no video issues there. But quagga does a better job at detecting barcodes.

If there is any way I can help you test, let me know.

[ericblade]

@TomasHubelbauer you still out here? seeing anything like this in iOS 15?

[TomasHubelbauer]

I'm still here 😌 I'll try to reproduce in the coming days.

[ericblade]

@Leonick if you can produce a code sample that repros it, that'd probably be really helpful. Maybe a codepen ? i've got the bare minimum library example here could base from https://codepen.io/ericblade/pen/yLaVoWy

[Leonick]

Well, after failing to move the code I had in to a codepen so I worked from yours and, made it stop onDetected and a pair of buttons to stop and start. No issue....

So I guess the issue is somewhere in my original implementation, which is mostly live_w_locator.js with tweaks.

Just gonna start from scratch. For what it's worth, project really could use some updated examples.

[ericblade]

I do try to keep quagga2-react-example reasonably up to date, but definitely the examples in /examples here are quite probably bit rotted, i wish that wasn't a thing, but sometimes that's the way it goes. :|

I do appreciate your help with helping us help you, and if you do come up with a hypothesis for what is broken in the example, i'd be happy to take a look at it (i supposed i could just try to standup the examples as codepens... but i still don't have my own iOS things to test it with) .. even if it is something that is in your own code, if you figure it out, would love to know to help if others come across the same thing

Have a great day!

[Leonick]

In the end I think I've narrowed it down to toggling display:none on #viewport. Class is removed on start and added back on stop. Given that it worked on the first start after page load I didn't imagine a styling issue... Hiding it by setting height to 0 works. So let's just call it a Safari issue ¯_(ツ)_/¯

[ericblade]

I wonder if it's some sort of automatic detection of something, like in how Chrome tries to not allow sound to play unless it's somehow in response to a user input ..

[myleftshoe]

Having same problem with mvp for svelte although I am not running Quagga.init() again when restarting, is this required, i.e. why can't i just run Quagga.start() again?

<script>
    import Quagga from '@ericblade/quagga2';
    import { onMount, onDestroy } from 'svelte';

    let quagga
    let started = false
    let code = '[scan result]'
    let detected = false

    onMount(init);
    onDestroy(destroy);

    function init() {
        Quagga.init({
            inputStream: {
                name: 'Live',
                type: 'LiveStream',
                target: quagga,
                constraints: {
                    facingMode: 'environment',
                },
            },
            decoder: { readers: ['code_128_reader'] },
        },
        function(error) {
            if (error) {
                console.warn(error);
                return;
            }
            Quagga.onProcessed((data) => {      
                console.log('onProcessed', data)
            });
            Quagga.onDetected((data) => {
                console.log('onDetected', data)
                code = data.codeResult?.code
                flash()
            });
            start();
        }
    )}

    function destroy() {
        Quagga.offProcessed();
        Quagga.offDetected();
    }

    async function start() {
        await Quagga.start();
        started = true;

    }

    async function stop() {
        await Quagga.stop();
        started = false;
    }

    function flash() {
        detected = true
        setTimeout(() => { detected = false }, 500)
    }
</script>
<header class:detected>{code}</header>    
<main>
    <quagga bind:this={quagga} />
</main>
<footer>
    {#if started}
        <button on:click={stop}>stop</button>
    {:else}
        <button on:click={start}>start</button>
    {/if}
</footer>
<style>
    header, footer {
        position: fixed;
        background-color: #3337;
        width: 100vw; 
        height: 80px;
        display: grid;
        place-content: center;
    }
    header { 
        top: 0;
        color: white;
        font-size: 3rem;
        font-family: monospace;
    }
    .detected {
        color: yellowgreen;
        font-weight: bold;
    }
    footer {
        bottom: 0;
    }
    main {
        display: grid;
    }
    quagga {
        width: 100vw;
        height: 100vh;
    }
</style>