scanthng.js v3.1

With the release of scanthng.js v3.1.0 (formerly known as evrythng-scan.js), all pre-existing functionality is backwards compatible. The new version focuses on adding a powerful new capability - scanning all the same kinds of barcodes and products using a video stream instead of simply submitting a single photo.

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


 Upgrading to Video Scanning

Existing apps may continue to use the last published version of evrythng-scan.js if they prefer, but are recommended to simply 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 is not required in order 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 end user has the best and most seamless scanning experience.


Implement Video Scanning

Adding video stream scanning to your web app is as simple as using the app.scanStream() method instead of app.scan(), and providing the ID of an HTML element that can be used to house the user's view of the video stream itself.

This allows the scanning component to be part of the web app's UI, and therefore 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);

Updated about a year ago

scanthng.js v3.1


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.