Barcode detection using Shape Detection API

もう1週間、ChromeのCanaryチャンネルにあるShape API経由の顔検出についてお話しました。現在、バーコードの検出はChrome Canaryでも行われています(Miguelは私のヒーローです);

バーコードは巨大です!彼らは我々が購入するほとんどすべての製品にあります。多くの悪意を持ったQRコードは、米国とヨーロッパ以外の国でも巨大である。バーコードとQRコードは、メディアとあなたとの間で少量のデータを転送することによって、物理世界とデジタル世界をつなぐ簡単な方法を提供します。これはデスクトップの時代には莫大な量の使用ではないかもしれませんが、モバイルの時代にはそれは重要です。このデータにアクセスするためだけにアプリをインストールする必要はありません。

シェイプ検出APIは、ユーザーのデバイスの下にあるハードウェア機能の上に標準インタフェースを作成し、主に顔検出とバーコード検出という新しい機能セットをWebプラットフォームに開くため、面白いです。

バーコード検出APIは、現在WICGにあるShape Detection APIに基づいています。 wicg /)は、インキュベーションおよび実験段階にあることを意味する。 Androidではさまざまな1Dおよび2Dのバーコードを検出できますバーコード:

1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar

2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC

さらに:

It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for the following supported formats:

  • URL
  • Contact information (VCARD, etc.)
  • Calendar event
  • Email
  • Phone
  • SMS
  • ISBN
  • WiFi
  • Geo-location (latitude and longitude)
  • AAMVA driver license/ID

Shape Detection APIは現在Chrome Canary(M57)にあり、 chrome:// flags /#enable-experimental-web-platform-featuresで有効にする必要があります

顔検出と同様に、APIは比較的簡単に使用できます。 BarcodeDetector APIで detectを使ってAPIを呼び出すと、デコードされたバーコードのリストに戻るという約束を得ることができます。

var barcodeDetector = new BarcodeDetector();
barcodeDetector.detect(image)
  .then(barcodes => {
    barcodes.forEach(barcode => console.log(barcodes.rawValue))
  })
  .catch((e) => {
    console.error("Boo, BarcodeDetection failed: " + e);
  });

イメージオブジェクト(CanvasImageSource、Blob、ImageDataまたは <img>Element)に渡し、それを基底のシステムAPIに渡します。そして DetectedObjectを実装する DetectedBarcodeオブジェクトの配列を返します。これは本質的に画像の各面の境界を与えます。

また、私のQRCode Scanner Applicationにも(https://github.com/PaulKinlan/qrcode/commit/21afa9ae4c316e4a8ced76d77f41eda2eb92852b)それを統合しましたが、私はそれを待っていますCanvasまたはImageDataで渡すことができます。 p / chromium / issues / detail?id = 670975)オブジェクトをAPIに追加します。

興味深いのは、私がLazarSoft jsqrcode APIを使用してプレーンJSでこのアプリケーションを構築しているため、ネイティブのバーコードスキャンの可用性を検出でき、私は純粋なJSの実装に失敗します。

実際のビデオは次のとおりです。

前回の記事では触れませんでしたが、これはワーカースレッド(および結果的にサービスワーカー)内でも機能するはずです。私のユースケースでは、これは私のロジックを別のスレッドに委譲し、すべてをUIスレッドから離しておくことができるので、素晴らしいです。

私はそれがウェブプラットフォームにとって非常に魅力的なものだと思うし、これが使われるのを見ることに興奮している。

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.