バーコード検出 API

ウェブアプリケーションでバーコード認識に対応することで、対応しているバーコード形式を通じてさまざまな用途に利用できるようになります。 QR コードはオンライン決済、ウェブナビゲーション、ソーシャルメディア接続の確立に、アステカコードは搭乗券のスキャンに、ショッピングアプリは JAN、EAN、UPC バーコードを使用して物理的なアイテムの価格を比較するために使用することが可能です。

検出は detect() メソッドで行われ、これに画像オブジェクトを渡します。これは 要素、Blob、ImageData、CanvasImageSource (en-US) の何れかです。オプションの引数を BarcodeDetector コンストラクターに渡すことで、検出するバーコード形式のヒントを与えることができます。

バーコード検出 API は、以下のバーコード形式に対応しています。

形式	説明	画像
aztec	ISO24778 に準拠した正方形の二次元行列で、その中心には正方形の角灯パターンがあり、アステカのピラミッドに似ています。周囲に空白ゾーンを必要としません。
code_128	ISO15417 に準拠し、 ASCII の 128 文字すべてを符号化できる（この名称の由来）線形（一次元）、双方向復号可能、自己検査可能なバーコードです。
code_39	ISO16388 に準拠した線形（一次元）の自己検査バーコードです。離散的で可変長のバーコード型です。
code_93	bc5 に続く長さが可変の直線的な連続記号。 Code 128 よりも情報密度が高く、 Code 39 に似た外見です。 Code 93 は、主にカナダポストが配達の補足情報をエンコードするために使用しています。
codabar	線形のバーコードで、 0-9, A-D と記号 - . $ / + の文字を表します。
data_matrix	ISO16022 に準拠し、黒と白のモジュールを正方形または長方形に配列した、方向に依存しない二次元バーコードです。
ean_13	UPC-A 規格に基づき、 ISO15420 で定義された線形バーコードです。
ean_8	ISO15420 で定義され、 EAN-13 から派生した線形バーコードです。
itf	連続的、自己チェック、双方向にデコード可能なバーコードです。常に 14 桁の数字がエンコードされています。
pdf417	複数行、複数列の連続した二次元バーコードの記号化形式です。双方向にデコード可能で、 ISO15438 規格を使用しています。
qr_code	ISO18004 規格を使用した二次元バーコードです。エンコードされる情報は、テキスト、URL、その他のデータです。
upc_a	最も一般的な線形バーコードの一つで、米国では小売業に広く適用されています。 ISO15420 で定義されており、バーとスペースで数字を表現し、各桁は幅が可変のバー 2 本とスペース 2 本の一意なパターンと関連付けられています。 UPC-A は、各商品に一意に割り当てられる 12 桁の数字をエンコードでき、技術的には EAN-13 のサブセットです（UPC-A コードは、最初の文字を 0 に設定したEAN-13 で表現されます）。
upc_e	ISO15420 で定義されている UPC-A の変化形で、不要なゼロを圧縮してよりコンパクトなバーコードにしたものです。
unknown	この値は、プラットフォームが検出中のバーコードを解釈できない、または特定できない、または対応していないことを表すために使用されます。

ユーザーエージェントが対応している形式は、 getSupportedFormats() メソッドで確認することができます。

BarcodeDetector

BarcodeDetector インターフェイスはバーコード検出 API のインターフェイスで、画像内の線形および二次元バーコードを検出できるようにします。

この例では、ブラウザーの互換性をチェックし、指定されたサポート形式で、新しいバーコード検出器オブジェクトを作成します。

// 互換性をチェック
if (!("BarcodeDetector" in window)) {
  console.log("Barcode Detector はこのブラウザーでは対応していません。");
} else {
  console.log("Barcode Detector に対応しています。");

  // 新しい検出器を生成
  var barcodeDetector = new BarcodeDetector({
    formats: ["code_39", "codabar", "ean_13"],
  });
}

次の例では、 getSupportFormat() メソッドを呼び出し、結果をコンソールに記録しています。

// 対応している型をチェック
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});

この例では、 detect() メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。

barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawData));
  })
  .catch((err) => {
    console.log(err);
  });

• barcodefaq.com: A website with information about different barcodes and examples of the different types.
• The Shape Detection API: a picture is worth a thousand words, faces, and barcodes