CAMERA NOT DICONNECTING AFTER QUAGGA.STOP() CALLED

[BISWAJITABISWAL]

import React, { useEffect } from "react";
import config from "./config.json";
import Quagga from "quagga";

const Scanner = (props) => {
const { onDetected } = props;

useEffect(() => {
Quagga.init(config, (err) => {
if (err) {
console.log(err, "error msg");
}

  Quagga.start();
});

//detecting boxes on stream
Quagga.onProcessed(onProcessed);

Quagga.onDetected(detected);

return () => {
    Quagga.offDetected(detected);
  };
}, [onDetected]);

const onProcessed = (result) => {
    var drawingCtx = Quagga.canvas.ctx.overlay,
        drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
        if (result.boxes) {
            drawingCtx.clearRect(
                0,
                0,
                Number(drawingCanvas.getAttribute("width")),
                Number(drawingCanvas.getAttribute("height"))
            );
            result.boxes
                .filter(function (box) {
                    return box !== result.box;
                })
                .forEach(function (box) {
                    Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
                        color: "green",
                        lineWidth: 2
                    });
                });
        }

        if (result.box) {
            Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
                color: "#00F",
                lineWidth: 2
            });
        }

        if (result.codeResult && result.codeResult.code) {
            Quagga.ImageDebug.drawPath(
                result.line,
                { x: "x", y: "y" },
                drawingCtx,
                { color: "red", lineWidth: 3 }
            );
        }
    }
}
const detected = (result) => {
if (result.codeResult.code.toLowerCase().includes("assetid")) {
Quagga.offDetected(detected);
onDetected(result.codeResult.code);
}
};

useEffect(() => {
return () => {
Quagga.offProcessed(onProcessed);
Quagga.offDetected(detected);
Quagga.stop();
}
}, []);

return (
// If you do not specify a target,
// QuaggaJS would look for an element that matches
// the CSS selector #interactive.viewport

);
};
export default Scanner;

My issue is when the component is destroyed the camera is not turing off, even if i do stop(). I tried all possible ways but still none of them work

[github-actions]

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

[ericblade]

I made a bit of an attempt to try to figure out what's going on here, but the formatting of this code is just completely illegible... so I pasted it into a browser, and this code just doesn't parse/run. Could you please reformat it and fix the errors and try again? (i edited your post to use the correct 3 backticks to start a code run, not single backticks)

[usamahassankhan]

Getting same error ,did you find solution?

[ericblade]

@usamahassankhan if you're using the same code as @BISWAJITABISWAL it's because their code doesn't even parse, so it's never running the stop.

[ericblade]

Closing due to no further input

[gbrocha]

Getting the same issue here. The camera does not disconnect when calling Quagga.stop() or even calling Quagga.CameraAccess.release().
Chrome still presenting the message "This tab is using your camera"
Is there someone having the same issue?

[ericblade]

I would say the best way to diagnose it is to put a breakpoint on your call to stop, but also put a breakpoint on your call to start -- what I found was that I had to do some slight reorganization to how some things were handled in my app, because first it wasn't hitting the stop call, and then after that was fixed, the app was hitting the start call again, and then the component would be unmounted without calling stop again. I think it was some sort of weird thing happening because of the way that I animated the opening and closing part, because my camera div slides open and closed .. so it was spamming the start call.

If you are certain that stop is being hit, and you're not doing another start right after, then we have a problem to look into here, or perhaps in the browser itself.

[gbrocha]

After some hours of debugging, I realized this bug was happening only on local environment

[ericblade]

If you figure out the cause, drop in and post it, so we have more suggestions for when it inevitably happens to someone else :)

I'm reasonably certain that it's not a problem with the library itself, but I might be able to mitigate it in the library, as I did when I added async to the stop/start, so we could know when the operation had completed by awaiting it.

[gbrocha]

I am not sure about the root cause, but I think it was because I was using a reverse proxy to be possible to access the local environment with https (I needed it to access some authentication cookies).
Since the browser was not recognizing the fake certificate, the app was being opened as an insecure site. Maybe this insecure mode was presenting some strange behavior, I guess.

[Will-at-FreedomDev]

I also have this issue, however every environment. I'm not sure what the difference is on my end, but I have to explicitly call

Quagga.cameraAccess.getActiveTrack().stop(); // <----- Should not be necessary, but it fixes the issue.
Quagga.stop();

[ericblade]

@Will-at-FreedomDev anything showing up in console?

stop() calls CameraAccess.release() which does

        const tracks = streamRef && streamRef.getVideoTracks();
        if (QuaggaJSCameraAccess.requestedVideoElement !== null) {
            QuaggaJSCameraAccess.requestedVideoElement.pause();
        }
        return new Promise<void>((resolve) => {
            setTimeout(() => {
                if (tracks && tracks.length) {
                    tracks.forEach((track) => track.stop());
                }
                streamRef = null;
                QuaggaJSCameraAccess.requestedVideoElement = null;
                resolve();
            }, 0);
        });

which seems like it would be more extensive, and cover pretty much any possible thing running on it... but... maybe your solution is all that's necessary, and we're just doing way more than needed in there.

[Will-at-FreedomDev]

Hey @ericblade , sorry nothing in the console. Just silently keeps ahold of the camera.

Since you shared some code, I took a look at the library. It seems pretty straightforward to me and it seems like calling Quagga.stop() should really release the camera and my workaround logically doesn't seem to be necessary (but it is).

If I end up working on that project again, I'll see if I can uncover anything else by digging a little deeper.

My hunch is maybe this if statement in the stop() isn't resolving as true maybe.... I'll comment back here if I end up looking at it again.

[ericblade]

hmm. interesting thought, but if that were true at start() time it wouldn't do the right thing... i suppose it could later be not true, though.

[Will-at-FreedomDev]

It appears that this issue is still present for iPhone 15 v17.3 Safari users. I'm going to look into this some more and can report back if I find out anything worthwhile.

[Will-at-FreedomDev]

@ericblade Looks like this one is an ID10T error :)

I called Quagga.init more than one time. The only issue with doing this is that the camera "in use" status doesn't disappear on it's own. I'm not sure why this was only an issue with Safari (after my workaround) but simply calling Quagga.stop() before re-initializing resolves everything.