Barcode Scanner Demo

Demonstration of building a barcode scanner application using the Sircl media library.

This example implements a barcode scanner application using the Sircl media library. The demo consists of a video element showing the camera to scan barcodes. Scanned barcodes are then rendered in a list.

The demo contains a VIDEO element programmed to render the "environment" camera. The VIDEO element has the barcode-scanner class which makes it scan for barcodes. The barcode-formats attribute defines the supported barcode formats.

When a barcode is detected, it's value and format are filled in in NewCode and NewFormat form fields.

And depending on the play/paused state, elements with id's restartbtn and pausebtn are hidden or shown:

<video id="bcvideo" class="barcode-scanner mb-3" onload-setvideosource="environment" autoplay muted width="100%"
       barcode-formats="ean_13 ean_8 upc_a upc_e itf"
       onbarcodedetected-setvalue="INPUT[name=NewCode]"
       onbarcodedetected-setformat="INPUT[name=NewFormat]"
       onpausemedia-show="#restartbtn" onplaymedia-show="#pausebtn" 
       onplaymedia-hide="#restartbtn" onpausemedia-hide="#pausebtn">
</video>

There is also a SELECT element to allow the user to use a different camera:

<div class="mb-3">
  <select class="onload-addvideodevices form-control" onchange-setvideosource="#bcvideo">
    <option value="">(Select a different camera)</option>
  </select>
</div>

The restart and pause buttons play or pause the media when clicked:

<div class="d-grid mb-3">
  <button type="button" id="restartbtn" class="btn btn-primary btn-lg" onclick-playmedia="#bcvideo">
    Restart scanning
  </button>
  <button type="button" id="pausebtn" class="btn-secondary btn-lg" onclick-pausemedia="#bcvideo" hidden>
    Stop scanning
  </button>
</div>

The NewCode and NewFormat form fields are defined as hidden fields, and when the NewCode field value is changed, the form is submitted. When submitted, the response is rendered in the #scanlist element:

<form action="/BarcodeScanned" method="post" target="#scanlist">
  <input type="hidden" name="NewCode" class="onchange-submit" />
  <input type="hidden" name="NewFormat" />
</form>

The #scanlist element is a simple DIV. But it has the target-method append so every scanned barcode is appended to this section:

<div id="scanlist" target-method="append">
</div>

When a barcode is scanned, the server responds with the following HTML code containing information about the scanned barcode:

<div class="alert alert-info">
  BarcodeFormat : BarcodeValue
</div>