バーコード検出 API
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
メモ: この機能はウェブワーカー内で利用可能です。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
バーコード検出 API (Barcode Detection API) は、線形および二次元のバーコードを画像から検出します。
概念と使用方法
ウェブアプリケーションでバーコード認識に対応することで、対応しているバーコード形式を通じてさまざまな用途に利用できるようになります。 QR コードはオンライン決済、ウェブナビゲーション、ソーシャルメディア接続の確立に、アステカコードは搭乗券のスキャンに、ショッピングアプリは JAN、EAN、UPC バーコードを使用して物理的なアイテムの価格を比較するために使用することが可能です。
検出は detect() メソッドで行われ、これに画像オブジェクトを渡します。これは HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、VideoFrame、Blob、ImageData のいずれかです。オプションの引数を BarcodeDetector コンストラクターに渡すことで、検出するバーコード形式のヒントを与えることができます。
対応しているバーコード形式
バーコード検出 API は、以下のバーコード形式に対応しています。
ユーザーエージェントが対応している形式は、 BarcodeDetector
- :
BarcodeDetectorインターフェイスはバーコード検出 API のインターフェイスで、画像内の線形および二次元バーコードを検出できるようにします。
例
>検出器の作成
この例では、ブラウザーの互換性をチェックし、指定されたサポート形式で、新しいバーコード検出器オブジェクトを作成します。
// 互換性をチェック
if (!("BarcodeDetector" in globalThis)) {
console.log("Barcode Detector はこのブラウザーでは対応していません。");
} else {
console.log("Barcode Detector に対応しています。");
// 新しい検出器を生成
const barcodeDetector = new BarcodeDetector({
formats: ["code_39", "codabar", "ean_13"],
});
}
対応している形式の取得
次の例では、 getSupportedFormats() メソッドを呼び出し、結果をコンソールに記録しています。
// 対応している型をチェック
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
supportedFormats.forEach((format) => console.log(format));
});
バーコードの検出
この例では、 detect() メソッドを使用して、与えられた画像内のバーコードを検出しています。これらは繰り返し処理され、バーコードのデータはコンソールに記録されます。
barcodeDetector
.detect(imageEl)
.then((barcodes) => {
barcodes.forEach((barcode) => console.log(barcode.rawValue));
})
.catch((err) => {
console.log(err);
});