バーコード検出 API
===========

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


**注:** この機能は Web Worker 内で利用可能です

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

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

概念と使用方法
-------

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

検出は `detect()` メソッドで行われ、これに画像オブジェクトを渡します。これは 要素、`Blob`、`ImageData`、`CanvasImageSource` (en-US) の何れかです。オプションの引数を `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);
  });
```

仕様書
---

| 仕様書 |
| --- |
| Accelerated Shape Detection in Images # barcode-detection-api |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 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