I was looking for a tool that can help me to implement barcode scanning for my Home Inventory app.

After considering several options, I decided to proceed with the JavaScript library QuaggaJS. In the repository they have examples, including the example of live barcode detection. I slightly modified it and added it to my project. It worked beautifully, except that the barcode locator (rectangle around the detected barcode) was in a completely different place!

Here’s how the problem looks like:

Barcode locator in the wrong place

The green rectangle is not displayed around the barcode, but in some white space below the video stream!

Long story short: I missed the CSS declaration in the example file and the correlated CSS file.

But the good news is, this problem can be fixed in much less CSS!

First, this part has to be present in the HTML file:

<div id="interactive" class="viewport">
    <video class="videoCamera" autoplay preload="auto" src="" muted playsinline></video>
    <canvas class="drawingBuffer"></canvas>
</div>

And then, add this to your CSS file:

.viewport {
    position: relative;
}

.drawingBuffer {
  position: absolute;
  top: 0;
  left: 0;
}

Explanation

The elements will overlay if the parent element has position: relative and its child element has position: absolute attribute.

The result

Barcode locator in the correct place The locator is displayed on the actual video stream (it’s in the process of locating, so not covering the whole barcode here).