バーコード検出 API

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はウェブワーカー内で利用可能です。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

バーコード検出 API (Barcode Detection API) は、線形および二次元のバーコードを画像内から検出します。

概念と使用方法

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

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

対応しているバーコード形式

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

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

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

インターフェイス

BarcodeDetector

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

検出器の作成

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

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

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

対応している形式の取得

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

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

バーコードの検出

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

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

仕様書

ブラウザーの互換性

BCD tables only load in the browser

関連情報