Scan Line

[RichardMarkus]

I have my setup working, but I wanted to add some "user entertainment" to keep my users from giving up while trying to scan a bar code. I see in the configuration where I can set drawScanline to true. I set that to true and set debug: true as well - but still get no scan line. Is this built in to QuaggaJs, or do I need to interpret some of the return data when onProcessed is fired? Sample code would be greatly appreciated!

[Kappyh]

I have the hame problem, my config:

Quagga.init({
      inputStream: {
        name: "Live",
        type: "LiveStream",
        target: document.querySelector('#barcode-scanner'),
        constraints: {
          width: 640,
          height: 480,
          aspectRatio: 1 / 1
        },
        area: {
          top: "0%",
          right: "0%",
          left: "0%",
          bottom: "0%"
        },
        singleChannel: false
      },
      debug: true,
      numOfWorkers: navigator.hardwareConcurrency,
      locate: true,
      decoder: {
        readers: ['i2of5_reader'],
        debug: {
          drawBoundingBox: true,
          drawScanline: true,
        },
        multiple: false
      },
      frequency: 5,
      locator: {
        halfSample: true,
        patchSize: 'medium'
      },
    })

[radar1975]

Same issue here .. does anyone from the contributors or watchers have a solution for that since there are no answer from @serratus

[HadrienPierart]

Hey there !

Got the same issue this morning, and indeed, the docs seem to be misleading on this point. I got it working after some digging in the example :

Quagga.onProcessed(this._onProcessed);

 // ...
  _onProcessed (result) {
    var drawingCtx = Quagga.canvas.ctx.overlay, drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(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});
      }
    }
  }

For the maintainer(s) : You built an amazing lib, Im completely baffled by the quality of the project, the docs and examples, which contain a ton of info to build some great features ! Thanks a lot !

[radar1975]

@HadrienPierart Thanks ... will try this out soon

[federicoprimomo]

I tried everthing, css, this is my code

        Quagga.init({
            frequency: 5,
			locator: {
					halfSample: true,
					patchSize: 'medium'
			},			
            inputStream: {
                name: "Live",
                type: "LiveStream",
                constraints: {
                    width: 640,
                    height: 480,
                    facingMode: "environment" // or user
                }
            },
			locate:true,
			debug: true,
            decoder: {
                readers: ["ean_reader"],
				debug: {
				  drawBoundingBox: true,
				  drawScanline: true,
				}
            },
        }, function (err) {
            if (err) {
                return console.log(err);
            }
            Quagga.start();
            var track = Quagga.CameraAccess.getActiveTrack();
            var capabilities = {};
            if (typeof track.getCapabilities === 'function') {
                capabilities = track.getCapabilities();
            }
            if (typeof capability === 'boolean') {
                //linterna
            }
            var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
            Quagga.CameraAccess.enumerateVideoDevices().then(function (devices) {
                devices.forEach(function (device) {
                    var device = device.deviceId || device.id;
                });
            });
        });
		
 Quagga.onProcessed(function (result) {            
    var drawingCtx = Quagga.canvas.ctx.overlay, drawingCanvas = Quagga.canvas.dom.overlay;
    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(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});
      }
    }
});	

> ```

[ericblade]

The debug options only work if you've built a debug version of the library from the source repository.

For implementing your own in onProcessed, you probably need to make sure that you are providing CSS that sets your drawing canvas to absolute positioning, and make sure that it's positioned over the top of your video element.