Quagga.stop not working

[usamahassankhan]

Hi Eric could you please help why quagga.stop() not stopping the camera ,it starts fine but after start we can't stop it ,need your prompt support

[github-actions]

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

[ericblade]

When I've encountered this it's always been some code outside of Quagga that is doing something that prevents the browser from detaching the camera. What is your code doing when you stop?

[usamahassankhan]

I think you resolved this issue in quagga 2 ,I am using quagga 1 what do you think If I move to quagga 2 ,will it resolved Plz reply I am fully dependent on your views

…

On Fri, Dec 22, 2023, 9:52 PM Eric Blade ***@***.***> wrote: When I've encountered this it's always been some code outside of Quagga that is doing something that prevents the browser from detaching the camera. What is your code doing when you stop? — Reply to this email directly, view it on GitHub <#529 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMACQUTR4RQDEHYDO76A24DYKW3DHAVCNFSM6AAAAABA7P3Q26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRXHA4TCMRYG4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ericblade]

I don't know, you could try it, it's a drop-in replacement. If you show your code, that might help figure out what you're doing.

In Q2, I did add a promise return to the stop function, so that there's something to await on to know that the browser has completed the stop.

[ericblade]

When I personally had this issue, it was calling stop in React unmount, but then the component was being immediately remounted again then unmounted, due to some weird animation interaction. Difficult to say what yours is doing without seeing code. The other example you commented on, the stop call is never even being hit, because their code just errors and doesn't run.

[usamahassankhan]

Ok, thanks for the reply. ```javascript import React, { useEffect } from "react"; import Quagga from "quagga"; it in import config from "./../../config.json"; const Scanner = (props) => { const { onDetected } = props; useEffect(() => { Quagga.init(config, (err) => { if (err) { console.log(err, "error msg"); } Quagga.start(); return () => { Quagga.stop(); }; }); //detecting boxes on stream Quagga.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 } ); } } }); Quagga.onDetected(detected); }, []); const detected = (result) => { onDetected(result.codeResult.code); }; return ( // If you do not specify a target, // QuaggaJS would look for an element that matches // the CSS selector #interactive.viewport <div id="interactive" className="viewport" /> ); }; export default Scanner; ``` This is scanner component Calling like that {IsScannerVIsible && <Scanner onDetected={onDetected} />}

…

On Fri, Dec 22, 2023, 10:08 PM Eric Blade ***@***.***> wrote: When I personally had this issue, it was calling stop in React unmount, but then the component was being immediately remounted again then unmounted, due to some weird animation interaction. Difficult to say what yours is doing without seeing code. The other example you commented on, the stop call is never even being hit, because their code just errors. — Reply to this email directly, view it on GitHub <#529 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMACQUWYQTA4I2KKCNM6NA3YKW5BVAVCNFSM6AAAAABA7P3Q26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRXHEYDKNRUGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ericblade]

If you re-format your code so it's indented properly

import React, { useEffect } from "react";

import Quagga from "quagga";

import config from "./../../config.json";

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

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

      Quagga.start();

      return () => {
        Quagga.stop();
      };
    });

    //detecting boxes on stream

    Quagga.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 },
          );
        }
      }
    });

    Quagga.onDetected(detected);
  }, []);

  const detected = (result) => {
    onDetected(result.codeResult.code);
  };

  return (
    // If you do not specify a target,

    // QuaggaJS would look for an element that matches

    // the CSS selector #interactive.viewport

    <div id="interactive" className="viewport" />
  );
};

export default Scanner;

You can see on line 18, you are returning the closure that calls Quagga.stop() from Quagga.init() but you need to be returning it from useEffect(). Probably that whole remainder of that block is in the wrong scope, too.

Your Quagga.stop is never being hit.

You should work to improve your code formatting, so errors like that are more visible when looking at it. Also, if you used a debugger breakpointed at the stop() call, you would see that it was never being hit .. or just using a console.log() before it.

[usamahassankhan]

Thank you so much bro I made my mistake your code is working fine ,strict mode was on ,It hits twice in local that was the reason, Thank you so much for you reply ,I really appreciate it

…

On Sat, Dec 23, 2023, 9:51 PM Eric Blade ***@***.***> wrote: If you re-format your code so it's indented properly import React, { useEffect } from "react"; import Quagga from "quagga"; import config from "./../../config.json"; const Scanner = (props) => { const { onDetected } = props; useEffect(() => { Quagga.init(config, (err) => { if (err) { console.log(err, "error msg"); } Quagga.start(); return () => { Quagga.stop(); }; }); //detecting boxes on stream Quagga.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 }, ); } } }); Quagga.onDetected(detected); }, []); const detected = (result) => { onDetected(result.codeResult.code); }; return ( // If you do not specify a target, // QuaggaJS would look for an element that matches // the CSS selector #interactive.viewport <div id="interactive" className="viewport" /> ); }; export default Scanner; You can see on line 18, you are returning the closure that calls Quagga.stop() from Quagga.init() but you need to be returning it from useEffect(). Probably that whole remainder of that block is in the wrong scope, too. Your Quagga.stop is never being hit. You should work to improve your code formatting, so errors like that are more visible when looking at it. Also, if you used a debugger breakpointed at the stop() call, you would see that it was never being hit .. or just using a console.log() before it. — Reply to this email directly, view it on GitHub <#529 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMACQUXOI6JQUCC2QXA2QSDYK4DYFAVCNFSM6AAAAABA7P3Q26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGMZDSOJZGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>