Skip to content

Instantly share code, notes, and snippets.

Last active January 31, 2021 00:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Barcode Detection using the Shape Detection API
<!DOCTYPE html>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Baracode Detection using the Shape Detection API</title>
body {
margin: 0 4px;
font-family: sans-serif;
button {
display: block;
padding: 15px;
cursor: pointer;
margin-top: 10px;
#message {
margin-top: 10px;
.attribution {
font-weight: 300;
font-size: 10px;
text-align: center;
width: 380px;
<img id="image" src="barcode.png" />
<div class="attribution">Image source -</div>
<button id="button">Detect barcode</button>
<div id="message"></div>
const barcode = document.getElementById('image');
const button = document.getElementById('button');
const message = document.getElementById('message');
const detectBarcode = () => {
if (!window.BarcodeDetector) {
message.innerText =
'Barcode Detection is not supported in your browser';
const barcodeDetector = new BarcodeDetector({
formats: ['ean_13'],
.then((data) => {
const { rawValue } = data[0];
message.innerText = `Barcode value: ${rawValue}`;
.catch((e) => {
console.error(`Barcode Detection failed: ${e}`);
button.addEventListener('click', detectBarcode);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment