BarcodeDetector

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

Invalid slug for templ/sidebar: Barcode Detector API

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

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

コンストラクター

BarcodeDetector.BarcodeDetector()

BarcodeDetector オブジェクトを作成して返します。オプションで barcodeDetectorOptions を指定します。

メソッド

detect()

Promise で、以下のプロパティを持つ detectedBarcode オブジェクトの配列で履行されます。

  • boundingBox: DOMRectReadOnly で、画像内にある検出されたバーコードの範囲を表す矩形の寸法を返します。
  • cornerPoints: 検出されたバーコードの四隅の点の、画像に対する X および Y 座標で、左上から時計回りに算出されます。画像内の遠近感の歪みにより、正方形にならない場合があります。
  • format: 検出されたバーコードの形式。（形式の完全な一覧についてはバーコード検出 API 概要ページを参照してください。）
  • rawValue: バーコードデータをデコードした文字列です。
getSupportedFormats()

Promise を返します。これは対応しているバーコード形式の種類の配列 (Array) で履行されます。

例

検出器の生成

この例では、対応している形式を指定して新しいバーコード検出器オブジェクトを作成し、ブラウザーの互換性をテストしています。

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

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

対応している形式の取得

以下の例では、静的メソッドの getSupportFormat() を呼び出して、結果をコンソールへ出力します。

js
// check supported types
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);
  });

仕様書

Specification
Accelerated Shape Detection in Images
# barcode-detection-api

ブラウザーの互換性

BCD tables only load in the browser

関連情報