Having a hard time activating debug functionalities

[Ethorsen]

Working with NPM version of quagga2, I'm trying to activate debugging but nothing works

My configs

 Quagga.init({
      numOfWorkers: 0,
      frequency: 15,
      debug: true,
      locate: true,

      inputStream: {
        name: 'Live',
        type: 'LiveStream',
        target: '#liveStream',
        constraints: {
          width: 640,
          height: 480,
          facingMode: 'environment' // or user
        },
      },

      locator: {
        patchSize: 'x-large',
        halfSample: false,
        debug: {
          showCanvas: true,
          showPatches: true,
          showFoundPatches: true,
          showSkeleton: true,
          showLabels: true,
          showPatchLabels: true,
          showRemainingPatchLabels: true,
          boxFromPatches: {
            showTransformed: true,
            showTransformedBox: true,
            showBB: true
          }
        }
      },

      decoder: {
        readers: [
          "code_128_reader",
          "code_39_reader",
          "code_39_vin_reader",
          "code_qr_reader",
        ],
        debug: {
          drawBoundingBox: true,
          showFrequency: true,
          drawScanline: true,
          showPattern: true
        },
        multiple: false,
      },

I'm not sure what I'm doing wrong. Is debugging only available when working directly with sources? I do see a lot of if (ENV.development) in quagga code.

[ericblade]

I haven't tried the debug functionality since I've been here, but I do use some extra CSS that might help -- my suspicion is that the debug canvas is probably not visible

Given that my div that contains the scanner area has class "scannerContainer", I use

.scannerContainer {
    background: black;
}

.scannerContainer canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 99%;
    width: 99%;
    border: 3px solid green;
}

which seems to position canvases on top of the container, instead of under it.

the associated React snippet that I use to display that is

            <div className={css.scannerContainer} ref={scannerRef}>
                <video style={{width: window.innerWidth, height: 480}} />
                <canvas className="drawingBuffer" width="640" height="480" />
                <Scanner cameraId={scannerCameraId} scannerRef={scannerOpen && scannerRef} onScannerReady={onScannerReady} onDetected={onScanDetected} />
            </div>

also noted to #33 which is at least related.

If you're able to find an answer as to where the debugging output goes, before I do, please follow up :-)

[ericblade]

Also, it does look like your suspicion about requiring a dev build is probably correct -- initCanvas() in barcode_decoder is a No-Op in production build. So, I'll make a note to self also to investigate how to actually make use of a development build -- npm run build:dev looks to create one, but i'm not sure exactly how one would use that in a project, right at this time.

[Ethorsen]

Yes, even after applying the CSS to make the canvas above, there's still nothing being displayed.

[ericblade]

It looks like the way to use debug is to clone the repo, use npm run build:dev then include the dist/quagga.js into your project. If you're using a module loader, that might also require adjusting the package.json, but if you're just loading it via the script tag then it should be just a matter of loading the correct script.

It looks to me like that's some things geared towards debugging the internals, if you're just trying to get a visualization of what it's thinking, you can use something like

https://github.com/ericblade/quagga2/blob/master/example/live_w_locator.js#L263

[ericblade]

please close this if that is a sufficient answer, or let me know if there is some further request here.

[Ethorsen]

Yeah thats pretty much what I wanted to see. Thx

[ericblade]

Great :-) I also just updated quagga2-react-example to include some canvas drawing if you'd like to check that out too