Shape Detection API: 1 つの画像には 1,000 の単語、顔、バーコードの価値がある

Shape Detection API は、画像内の顔、バーコード、テキストを検出します。

Thomas Steiner 氏

Shape Detection API とは

navigator.mediaDevices.getUserMedia や Chrome for Android の写真選択ツールなどの API を使用すると、デバイスのカメラから画像やライブ動画データをキャプチャしたり、ローカル画像をアップロードしたりすることが非常に簡単になりました。これまでは、この動的画像データとページ上の静止画像には、顔、バーコード、テキストなどの興味深い特徴が多数含まれている画像であっても、コードではアクセスできませんでした。

たとえば、これまで、デベロッパーがクライアントでこのような機能を抽出して QR コードリーダーを構築する場合、外部の JavaScript ライブラリを利用する必要がありました。これはパフォーマンスの観点からコストがかかり、ページ全体の重みが増加する可能性があります。一方、Android、iOS、macOS などのオペレーティング システムだけでなく、カメラ モジュールに搭載されているハードウェア チップにも、通常は Android FaceDetector や iOS の汎用検出機能 CIDetector などの高性能で高度に最適化された機能検出機能が搭載されています。

Shape Detection API は、一連の JavaScript インターフェースを介してこれらの実装を公開します。現在サポートされている機能は、FaceDetector インターフェースによる顔検出、BarcodeDetector インターフェースによるバーコード検出、TextDetector インターフェースによるテキスト検出（光学式文字認識（OCR））です。

推奨されるユースケース

前述のように、Shape Detection API は現在、顔、バーコード、テキストの検出をサポートしています。次の箇条書きリストには、3 つの機能すべてのユースケースの例を示します。

顔検出

  • オンライン ソーシャル ネットワークや写真共有サイトでは、画像内の人物に注釈を付けることができるのが一般的です。検出された顔の境界をハイライト表示することで、このタスクが容易になります。
  • コンテンツ サイトでは、他のヒューリスティックに頼ることなく、検出された顔に基づいて画像を動的に切り抜いたり、Ken Burns のようなパンやズーム効果でストーリーのような形式で検出された顔をハイライト表示したりできます。
  • マルチメディア メッセージング サイトでは、検出された顔のランドマークにサングラスや口ひげなどの面白いオブジェクトをオーバーレイできます。

バーコード検出

  • QR コードを読み取るウェブ アプリケーションは、オンライン決済やウェブ ナビゲーションなどの興味深いユースケースに利用できます。また、バーコードを使用してメッセンジャー アプリケーションでソーシャル接続を確立することもできます。
  • ショッピング アプリでは、ユーザーが実店舗の商品の EAN または UPC バーコードをスキャンして、オンラインで価格を比較できます。
  • 空港では、乗客が搭乗券の Aztec コードをスキャンして、フライトに関連するパーソナライズされた情報を表示できるウェブ キオスクを提供できます。

テキスト検出

  • オンライン ソーシャル ネットワーク サイトでは、他の説明が記載されていない場合に、検出されたテキストを <img> タグの alt 属性として追加することで、ユーザー作成コンテンツのアクセシビリティを改善できます。
  • コンテンツ サイトではテキスト検出を使用して、テキストが含まれるヒーロー画像の上に見出しが配置されないようにできます。
  • ウェブ アプリケーションでテキスト検出を使用して、レストランのメニューなどのテキストを翻訳できます。

現在のステータス

ステップ ステータス
1. 説明を作成 完了
2. 仕様の最初のドラフトを作成する 完了
3. フィードバックを収集し、設計を繰り返す 作成中
4. オリジン トライアル 完了
5. リリース バーコード検出完了
顔検出は進行中です
テキスト検出は進行中です

Shape Detection API の使用方法

Shape Detection API をローカルでテストする場合は、about://flags で #enable-experimental-web-platform-features フラグを有効にします。

3 つの検出機能（FaceDetector、BarcodeDetector、TextDetector）のインターフェースは類似しています。これらはすべて、ImageBitmapSource を入力として受け取る detect()（CanvasImageSource、Blob、ImageData のいずれか）という単一の非同期メソッドを備えています。

FaceDetector と BarcodeDetector の場合、オプションのパラメータを検出のコンストラクタに渡すことで、基盤となる検出項目にヒントを提供できます。

さまざまなプラットフォームの概要については、説明のサポート マトリックスをよく確認してください。

BarcodeDetector の使用

BarcodeDetector は、ImageBitmapSource と境界ボックスで見つかったバーコードの未加工の値と、検出されたバーコードの形式などの情報を返します。

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

FaceDetector の使用

FaceDetector は常に ImageBitmapSource で検出された顔の境界ボックスを返します。プラットフォームによっては、目、鼻、口などの顔のランドマークに関するより多くの情報を利用できる場合があります。この API は顔のみを検出することに注意してください。顔が誰のものであるかを識別するものではありません。

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

TextDetector の使用

TextDetector は常に検出されたテキストの境界ボックスを返します。一部のプラットフォームでは、認識された文字を返します。

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

機能検出

Shape Detection API を機能検出するためのコンストラクタの存在を単純に確認するだけでは不十分です。インターフェースが存在しても、基盤となるプラットフォームがその機能をサポートしているとは限りません。これは想定どおりの動作です。そのため、次のような特徴検出を行う防御的プログラミング アプローチをおすすめします。

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

BarcodeDetector インターフェースが更新され、getSupportedFormats() メソッドが含まれるようになりました。同様のインターフェースが FaceDetector 用と TextDetector 用に提案されています。

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

これにより、必要な特定の機能（QR コードのスキャンなど）を検出できます。

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

これは、プラットフォームによって機能が異なる可能性があるため、インターフェースを非表示にするよりも適切です。そのため、デベロッパーは必要な機能（特定のバーコード形式や顔のランドマークなど）を正確に確認することが推奨されます。

オペレーティング システムのサポート

バーコード検出は macOS、ChromeOS、Android でご利用いただけます。Android には Google Play 開発者サービスが必要です。

ベスト プラクティス

すべての検出機能は非同期で動作します。つまり、メインスレッドをブロックしません。そのため、リアルタイム検出に依存せずに、検出機能が動作する時間を設けてください。

ウェブワーカーを使いこなしている方にとっては、ウェブワーカーにも検出機能が用意されています。検出結果はシリアル化可能であるため、postMessage() を介してワーカーからメインアプリに渡すことができます。デモでは、これを実際に確認できます。

すべてのプラットフォーム実装がすべての機能をサポートしているわけではないため、サポート状況を慎重に確認し、API を段階的な拡張として使用してください。たとえば、プラットフォームによっては、顔検出自体はサポートしているものの、顔ランドマーク検出（目、鼻、口など）はサポートしていない場合があります。また、テキストの存在と場所は認識されても、テキスト コンテンツは認識されないことがあります。

フィードバック

Chrome チームとウェブ標準コミュニティでは、Shape Detection API の使用体験についてご意見をお待ちしています。

API の設計についてお聞かせください

API に想定したとおりに動作しない点はありますか。あるいは、アイデアを実装する必要があるメソッドやプロパティが欠落していないか。セキュリティ モデルについてご質問やご意見がある場合は、

実装に問題がある場合

Chrome の実装にバグが見つかりましたか？それとも 実装が仕様と異なっているか？

  • https://new.crbug.com でバグを報告します。可能な限り詳細な再現手順を記載し、[Components] を Blink>ImageCapture に設定します。Glitch は、再現をすばやく簡単に共有するのに適しています。

API を使用する予定がある場合は、

サイトで Shape Detection API を使用する予定がある場合は、公開サポートは Google が機能に優先順位を付ける際に役立つだけでなく、他のブラウザ ベンダーをサポートすることの重要性も示しています。

関連情報