BarcodeDetector
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
もっと多くのブラウザーがこの機能に対応してほしいですか？ 理由を教えてください。
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
BarcodeDetector は Barcode Detection API のインターフェイスで、画像内から線形および 2 次元バーコードを検出できるようにします。
コンストラクター
BarcodeDetector.BarcodeDetector()-
BarcodeDetectorオブジェクトを作成し、オプションのBarcodeDetectorOptionsとともに返します。
静的メソッド
getSupportedFormats()-
Promiseを返します。これは 対応しているバーコード形式の種類 の配列 (Array) で満たされています。
インスタンスメソッド
detect()-
Promiseで、以下のプロパティを持つdetectedBarcodeオブジェクトの配列で履行されます。boundingBox:DOMRectReadOnlyで、画像内にある検出されたバーコードの範囲を表す矩形の寸法を返します。cornerPoints: 検出されたバーコードの四隅の点の、画像に対する X および Y 座標で、左上から時計回りに算出されます。画像内の遠近感の歪みにより、正方形にならない場合があります。format: 検出されたバーコードの形式。（形式の完全な一覧については バーコード検出 API 概要ページ を参照してください。）rawValue: バーコードデータをデコードした文字列です。
例
検出器の生成
この例では、対応している形式を指定して新しいバーコード検出器オブジェクトを作成し、ブラウザーの互換性をテストしています。
js
// 互換性のチェック
if (!("BarcodeDetector" in globalThis)) {
console.log("Barcode Detector はこのブラウザーでは対応していません。");
} else {
console.log("Barcode Detector に対応しています。");
// 新しい検出器の生成
const barcodeDetector = new BarcodeDetector({
formats: ["code_39", "codabar", "ean_13"],
});
}
対応している形式の取得
以下の例では、静的メソッドの getSupportedFormats() を呼び出して、結果をコンソールへ出力します。
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.rawValue));
})
.catch((err) => {
console.log(err);
});
仕様書
| 仕様書 |
|---|
| Accelerated Shape Detection in Images # barcode-detection-api |