Shape Detection API は、画像内の顔、バーコード、テキストを検出します。
Shape Detection API とは何ですか？
navigator.mediaDevices.getUserMedia などの API や Android 版 Chrome の写真選択ツールを使用すると、デバイスのカメラから画像やライブ動画データをキャプチャしたり、ローカル画像をアップロードしたりすることが非常に簡単になりました。これまで、この動的画像データ（およびページ上の静止画像）は、画像に顔、バーコード、テキストなどの興味深い特徴が実際に含まれているにもかかわらず、コードでアクセスできませんでした。
たとえば、以前は、クライアントでこのような機能を抽出して QR コード リーダーを構築する場合、外部の JavaScript ライブラリに依存する必要がありました。これはパフォーマンスの観点から費用が高く、ページの全体的な重量が増加する可能性があります。一方、Android、iOS、macOS などのオペレーティング システムや、カメラ モジュールに搭載されているハードウェア チップには、通常、Android の FaceDetector や iOS の汎用特徴検出機能 CIDetector など、高性能で高度に最適化された特徴検出機能がすでに用意されています。
Shape Detection API は、一連の JavaScript インターフェースを介してこれらの実装を公開します。現在、サポートされている機能は、FaceDetector インターフェースによる顔検出、BarcodeDetector インターフェースによるバーコード検出、TextDetector インターフェースによるテキスト検出（光学式文字認識（OCR））です。
推奨されるユースケース
前述のように、Shape Detection API は現在、顔、バーコード、テキストの検出をサポートしています。次の箇条書きに、3 つの機能のユースケースの例を示します。
顔検出
- オンライン ソーシャル ネットワークや写真共有サイトでは、ユーザーが画像内の人物にアノテーションを付けることが一般的です。検出された顔の境界をハイライト表示することで、このタスクを容易にできます。
- コンテンツ サイトでは、他のヒューリスティクスに頼るのではなく、検出された可能性のある顔に基づいて画像を動的に切り抜いたり、ケン バーンズのようなパンニングやズームのエフェクトで検出された顔をハイライト表示したりできます。
- マルチメディア メッセージ サイトでは、検出された顔の特徴点にサングラスや口ひげなどの面白いオブジェクトを重ねることができます。
バーコード検出
- 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（CanvasImageSource、Blob、ImageData）を入力として受け取る detect() という単一の非同期メソッドを提供します。
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 が想定どおりに動作しない点はありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足していますか？セキュリティ モデルに関するご質問やご意見がございましたら、
- Shape Detection API GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にコメントを追加してください。
実装に関する問題
Chrome の実装にバグが見つかりましたか？それとも実装が仕様と異なるのでしょうか？
- https://new.crbug.com でバグを報告します。できるだけ詳細な情報と、再現するための簡単な手順を記載し、[コンポーネント] を
Blink>ImageCaptureに設定します。Glitch は、簡単な再現手順をすばやく共有するのに適しています。
API を使用する予定ですか？
サイトに Shape Detection API を使用する予定ですか？一般ユーザーからのサポートは、Google が機能を優先するうえで役立ちます。また、他のブラウザ ベンダーに、これらの機能をサポートすることがいかに重要であるかを示します。
- WICG Discourse スレッドで、どのように使用する予定かをお知らせください。
- ハッシュタグ
#ShapeDetectionを使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。
関連情報
- 一般向けの説明
- API デモ | API デモのソース
- バグのトラッキング
- ChromeStatus.com のエントリ
- 点滅コンポーネント:
Blink>ImageCapture