ericblade / quagga2

An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
MIT License
766 stars 85 forks source link

Console Warnings and willReadFrequently #487

Closed scarrick68 closed 1 year ago

scarrick68 commented 1 year ago

Hey, I have bunch of console warnings and I'm wondering if I can get rid of them and maybe get some better performance based on what the console is telling me.

Warnings: "InputStreamBrowser createLiveStream" "InputStreamBrowser createVideoStream" "initCanvas getCanvasAndContext" "frame_grabber_browser: willReadFrequently= undefined canvas= " "Invalid asm.js: Unexpected token" "initCanvas willReadFrequently false" "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true."

Seems like I need to set willReadFrequently but I don't know and it's not in the docs.

Here's the snippet I'm working with:

  <h1>Quagga2 Barcode Scanner Example</h1>
  <div>
    <video id="video" style="width: 100%;"></video>
    <canvas id="canvas" style="display: none;"></canvas>
  </div>
  <div id="result"></div>
  <script>
    // Get the video and canvas elements
    var video = document.getElementById("video");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // Set the willReadFrequently attribute to true
    ctx.canvas.willReadFrequently = true;

    // Initialize the Quagga2 library with your configuration
    Quagga.init({
      inputStream: {
        name: "Live",
        type: "LiveStream",
        constraints: {
          width: { min: 640 },
          height: { min: 480 },
          aspectRatio: { min: 1, max: 100 },
          facingMode: "environment"
        },
        target: video
      },
      decoder: {
        readers: ["ean_reader"]
      }
    }, function(err) {
      if (err) {
        console.log(err);
        return;
      }
      console.log("Quagga2 initialization finished. Ready to start");
      Quagga.start();
    });

    // Add a listener for the "processed" event
    Quagga.onProcessed(function(result) {
      var drawingCtx = Quagga.canvas.ctx.overlay;
      var drawingCanvas = Quagga.canvas.dom.overlay;

      // Clear the previous result
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (result) {
        if (result.boxes) {
          drawingCtx.clearRect(0, 0, drawingCanvas.width, drawingCanvas.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) {
          // Display the result
          document.getElementById("result").innerHTML = "Found barcode: " + result.codeResult.code;

          // Stop scanning for barcodes
          Quagga.stop();
        }
      }
    });
  </script>
github-actions[bot] commented 1 year ago

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

ericblade commented 1 year ago

oooh i guess i left in some debug messages in the last release, and forgot to mention it in README, thanks for pointing that out.

You can try adding willReadFrequently: true to the inputStream and locator objects in Quagga.init(). Please let me know if that makes any sort of improvement, measureable or just by feel. In my tests, I wasn't able to measure any change, but that was using automated testing on my rather powerful desktop, which zips through tests incredibly fast. I also don't notice any obvious change on my Motorola G Stylus, which is a reasonably fast phone made in the last couple of years.

It would be nice to know if someone who's experiencing an issue with speed that they notice to begin with can comment on it. As far as I can tell it's just a warning from the browser that doesn't mean a lot.

ericblade commented 1 year ago

closing as willReadFrequently should be working fine