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

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

navigator.mediaDevices.getUserMedia などの API を使用する場合 Chrome for Android は 写真選択ツール デバイスから画像やライブ動画データを取得することがかなり簡単になりました。 ローカル画像のアップロードもできます。これまでのところ、この動的画像データだけでなく、 静的画像です。コードではアクセスできませんが、 顔やテキスト、画像、音声など、 テキストが含まれます。

たとえばこれまで、デベロッパーがこのような機能を QR コードリーダーを構築しました。 外部の JavaScript ライブラリを使用します。これには ページ全体の重みを増やします反対側 Android、iOS、macOS などのオペレーティング システムだけでなく、 カメラ モジュールに搭載されているチップは、通常、すでにパフォーマンスと 最適化された特徴検出機能(Android や FaceDetector または iOS の汎用機能検出ツールの CIDetector

Shape Detection API は、これらの実装を インターフェースのセットです。現在サポートされている機能は、 FaceDetector インターフェースによるバーコード検出、 BarcodeDetector インターフェース、テキスト検出(光学式文字) 認識(OCR))TextDetector)を使用します。

推奨されるユースケース

すでに説明したように、現在 Shape Detection API は、 テキストが含まれています。以下に例を示します。 ユースケースが多岐にわたります

顔検出

  • オンラインのソーシャル ネットワークや写真共有サイトでは、ユーザーは一般的に 画像に写っている人物にアノテーションを付けることができます。検出された顔の境界線がハイライト表示され このタスクを円滑に進めることができます。
  • コンテンツ サイトでは、検出された問題に基づいて画像を動的に切り抜くことができます。 顔を検出したり、検出された顔をハイライト表示したりすることもできます。 Ken Burns など ストーリーのような形式でのパンやズームの効果
  • マルチメディア メッセージ サイトでは、ユーザーが サングラス 口ひげ 特徴ベクトルが表示されます。

バーコード検出

  • QR コードを読み取るウェブ アプリケーションで、 オンライン決済やウェブ ナビゲーションを利用したり、ソーシャル メディア用の 接続する方法を確認しました。
  • ショッピングアプリではユーザーが EAN または の UPC バーコード オンラインで価格を比較すること
  • 空港は、乗客が搭乗券をスキャンできるウェブキオスクを提供 パス表示する Aztec コード フライトに関連するパーソナライズされた情報を取得します。

テキスト検出

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

現在のステータス

ステップ ステータス
1. 説明を作成 完了
2. 仕様の初期ドラフトを作成する 完了
3. フィードバックの収集と設計を反復する 作成中
4. オリジン トライアル 完了
5. 導入 バーコード検出 完了
顔検出が進行中
テキスト検出が進行中

Shape Detection API の使用方法

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

3 つの検出機能すべてのインターフェース(FaceDetectorBarcodeDetector、および TextDetector は同様です。これらはすべて、単一の非同期メソッドとして detect() という名前の ImageBitmapSource (つまり、入力として CanvasImageSourceBlob、または ImageData)。

FaceDetectorBarcodeDetector の場合、省略可能なパラメータを渡すことができます。 にヒントを提供します。これにより、 基になる検出機能が含まれます。

お手数をおかけしますが、 説明 各プラットフォームの概要を説明します

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 でご利用いただけます。Google Play 開発者サービス Android では必須です

ベスト プラクティス

すべての検出機能は非同期で動作します。つまり、メインの検出機能をブロックしません。 使用します。リアルタイム検出に依存せず、 時間がかかります。

ファン向けの動画 ウェブワーカー、 ここにも検出機能が公開されているので安心です。 検出結果はシリアル化できるため、ワーカーから渡すことができます。 postMessage() 経由でメインアプリに送信します。実際の動作をデモで示しています。

すべてのプラットフォームの実装ですべての機能がサポートされているわけではないため、必ず サポート状況を慎重に検討し、API を漸進型の 強化する必要があります。たとえば、顔検出をサポートするプラットフォームもあれば、 顔のランドマーク検出(目、鼻、口など)は対象外です。または テキストの存在と場所は認識されますが、テキスト コンテンツは認識されません。

フィードバック

Chrome チームとウェブ標準コミュニティは、 Shape Detection API の使用例を見てみましょう。

API 設計について教えてください

API で想定どおりに機能していないものはありますか?または 実装する必要のあるメソッドやプロパティが アイデア?セキュリティ モデルについて質問や意見がある場合は、

実装に問題がある場合

Chrome の実装にバグは見つかりましたか?それとも どうなるでしょうか

  • https://new.crbug.com でバグを報告します。必ず 再現するための簡単な手順を提供し、 コンポーネントBlink>ImageCapture にマッピング。グリッチ すばやく簡単に再現を共有するのに最適です。

API の使用をご計画の場合は、

ウェブサイトで Shape Detection API の使用を計画している場合、公開サポート 他のブラウザベンダーに サポートすることが重要です。

  • どのように使用する予定なのかを WICG の談話スレッドで共有してください。
  • ハッシュタグを使用して @ChromiumDev にツイートしてください #ShapeDetection どこで、どのように使用されているかをお知らせください。

関連情報