scanthng.js v3.1

With the release of scanthng.js v3.1.0 (formerly known as evrythng-scan.js), all pre-existing functionality is compatible with earlier versions. The new version adds a powerful new capability—scanning barcodes and products using a video stream instead of a single photo.

This functionality offers a user experience that is much closer to that offered by a fully-native barcode scanning app for Android or iOS. With this version, scanning 2D QR codes is done natively using the getUserMedia() web API.

Upgrading to Video Scanning

Your existing apps can continue to use the last published version of evrythng-scan.js if you prefer, but we recommended you update references to scanthng.js with no code changes required.

Optionally, existing apps can be updated to take advantage of the new functionality and show a video stream to the user instead of requesting a photo, but this isn't required to use the new SDK version.

We strongly recommend that all new product scanning web apps use the new video stream scanning method instead of the older single photo method to ensure the user has the most seamless scanning experience.

Implement Video Scanning

To add video stream scanning to your web app:

1. Use the app.scanStream() method instead of app.scan().
2. Provide the ID of an HTML element that can house the user's view of the video stream.

This allows the scanning component to be part of the web app's UI and can be styled for the brand's campaign or other design needs.

A simple example is shown below:

<div id="stream_container" class="stream_container">
  <!-- Video stream inserted by SDK here -->
</div>

<input type="button" id="my_button" value="Start Camera">

.stream_container {
  width: 320px;
  height: auto;
  border: 2px solid black;
  padding: 5px;
}

video {
  width: 320px;
  height: auto;
}

EVT.Use(EVT.Scan);

const app = new EVT.App(APPLICATION_API_KEY);

const startCamera = () => {
  app.scanStream({
    filter: { method: '2d', type: 'qr_code' },
    containerId: 'stream_container',
  })
    .then(console.log);
    .catch(console.log);
};

document.getElementById('my_button')
  .addEventListener('click', startCamera);