This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>The other week I talked about <a href="https://paul.kinlan.me/face-detection/">Face Detection via the Shape
API</a> that is in the Canary channel in Chrome. Now barcode
detection is in Chrome Canary too (<a href="https://twitter.com/yellowdoge">Miguel</a> is
my hero ;)</p>
<p>Barcodes are huge! they are on nearly every product we buy. Even the much
maligned <a href="https://www.clickz.com/why-have-qr-codes-taken-off-in-china/23662/">QRCode is huge outside of the US and
Europe</a>. The
barcode and the QRcode provide a simple way for you to bridge the physical world
and the digital world by transferring small amounts of data between the medium
and you. This might not have been a huge amount of use in the era of the
desktop, in the era of mobile it is critical. You should never have to install
an app just to get access to this data.</p>
<p>The Shape Detection API is interesting because it creates a standard interface
on top of some underlaying hardware features on the user's device and opens up a
new set of capabilities to the web platform, primarily Face Detection and
barcode detection.</p>
<p>The barcode detection API is built upon the <a href="https://wicg.github.io/shape-detection-api/#introduction">Shape Detection
API</a> that is currently
in the <a href="https://github.com/wicg/">WICG</a> which means it is in an incubation and
experimentation phase. On <a href="https://developers.google.com/vision/barcodes-overview">Android you can detect a number of different 1D and
2D</a> barcodes:</p>
<blockquote>
<p>1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF,
Codabar</p>
<p>2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC</p>
</blockquote>
<p>Furthermore:</p>
<blockquote>
<p>It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for
the following supported formats:</p>
<ul>
<li>URL</li>
<li>Contact information (VCARD, etc.)</li>
<li>Calendar event</li>
<li>Email</li>
<li>Phone</li>
<li>SMS</li>
<li>ISBN</li>
<li>WiFi</li>
<li>Geo-location (latitude and longitude)</li>
<li>AAMVA driver license/ID</li>
</ul>
</blockquote>
<p>The Shape Detection API is currently in Chrome Canary (M57) and you need to
enable it via <code>chrome://flags/#enable-experimental-web-platform-features</code></p>
<p>Like with face detection, the API is relatively simple to use. You invoke the
API via <code>detect</code> on the <code>BarcodeDetector</code> API and you get back a promise that
resolves to a list of decoded barcodes.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">barcodeDetector</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">BarcodeDetector</span>();
<span style="color:#a6e22e">barcodeDetector</span>.<span style="color:#a6e22e">detect</span>(<span style="color:#a6e22e">image</span>)
.<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">barcodes</span> => {
<span style="color:#a6e22e">barcodes</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">barcode</span> => <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">barcodes</span>.<span style="color:#a6e22e">rawValue</span>))
})
.<span style="color:#66d9ef">catch</span>((<span style="color:#a6e22e">e</span>) => {
<span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#e6db74">"Boo, BarcodeDetection failed: "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">e</span>);
});
</code></pre></div><p>It takes an image object (either a CanvasImageSource, Blob, ImageData or an
<code><img></code> element) and then passes that to the underlying system API and it will
return an array of <code>DetectedBarcode</code> objects that implement <code>DetectedObject</code>
which essentially gives you the bounds of each face in the image.</p>
<p>I've also
<a href="https://github.com/PaulKinlan/qrcode/commit/21afa9ae4c316e4a8ced76d77f41eda2eb92852b">integrated</a>
it in to my <a href="https://qrsnapper.appspot.com">QRCode Scanner Application</a> but I am
waiting for a fix to land that lets me pass in a
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=670977">Canvas</a> or
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=670975">ImageData</a> object
into the API.</p>
<p>The interesting thing is that because I have already built this app in
plain JS using the <a href="https://github.com/LazarSoft/jsqrcode">LazarSoft jsqrcode API</a>
I can detect the availability of native Barcode scanning and if it is not there
then I fail back to the pure JS implementation.</p>
<p>Here are some videos of it in action:</p>
<div class="yt-embed" style="position:relative;padding-bottom: 56.25%; padding-top: 25px; height: 0;">
<iframe
data-src="//www.youtube-nocookie.com/embed/LGB0n-dW_HM?autoplay=1"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:0;"
allowfullscreen
title="YouTube Video"></iframe>
</div>
<div class="yt-embed" style="position:relative;padding-bottom: 56.25%; padding-top: 25px; height: 0;">
<iframe
data-src="//www.youtube-nocookie.com/embed/Anq_N_SY17o?autoplay=1"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:0;"
allowfullscreen
title="YouTube Video"></iframe>
</div>
<p>I didn't mention it in the previous article, but this should also work on a
worker thread (and consequentially inside a Service Worker). For my use-case this
is brilliant because it allows me to delegate my logic in to another thread and
keep everything away from the UI thread.</p>
<p>I think it is a very compelling addition to the web platform and I am excited to
see this get used.</p>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
