{"id":56320,"date":"2022-07-05T03:01:01","date_gmt":"2022-07-04T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56320"},"modified":"2022-07-06T15:51:49","modified_gmt":"2022-07-06T05:51:49","slug":"barcode-detection-api-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/barcode-detection-api-primer-tutorial\/","title":{"rendered":"Barcode Detection API Primer Tutorial"},"content":{"rendered":"
\"Barcode<\/a>

Barcode Detection API Primer Tutorial<\/p><\/div>\n

We’re visiting another experimental Javascript API again today. Today’s exploration takes us to the Barcode<\/a> Detection API<\/a> …<\/p>\n

\nSupport for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, Aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items.
\n
\nDetection is achieved through the detect() method, which takes an image object; it can be one of these objects: an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, an OffscreenCanvas, a VideoFrame, a Blob, or an ImageData. Optional parameters can be passed to the BarcodeDetector constructor to provide hints on which barcode formats to detect.\n<\/p><\/blockquote>\n

Point of sale<\/a> is a huge concept in retail, often powered by the automation barcodes can offer. That, alone, makes this API quite interesting, as far as practicalities go, making use of API code such as …<\/p>\n


\n\/\/ check supported types
\nBarcodeDetector.getSupportedFormats()
\n .then(supportedFormats => {
\n supportedFormats.forEach(format => prespa.push(format));
\n });
\n
\n if (prespa.length == 0) { prespa=spa; }
\n
\n \/\/ create new detector
\n barcodeDetector = new BarcodeDetector({formats: prespa});
\n console.log('Barcode Detector supported ... yes!');
\n}
\n
\n barcodeDetector.detect(imageEl)
\n .then(barcodes => {
\n barcodes.forEach(barcode => ouralert(barcode.rawData||barcode.rawValue));
\n })
\n .catch(err => {
\n console.log(err);
\n });
\n<\/code><\/p>\n

This leaves today’s barcode_check.html<\/a>‘s proof of concept web application<\/a>, as also usable below, more useful as a “child iframe” tool used by the changed<\/a> imagecapture.htm<\/a> example of a user of the Barcode Detection API tool<\/a> web application you can also try.<\/p>\n