Shape Detection API：一張圖片勝過千言萬語、臉孔和條碼

Shape Detection API 可偵測臉孔、條碼和圖片中的文字。

Thomas Steiner

什麼是 Shape Detection API？

使用 navigator.mediaDevices.getUserMedia 等 API 和 Android 版 Google Chrome 相片挑選工具， 從裝置擷取圖像或即時影片資料，已變得相當簡單 攝影機和上傳本機圖片目前為止，這些動態圖片資料 無法由程式碼存取 其實圖像可能包含許多有趣的特徵，例如臉孔、 條碼和文字

舉例來說，如果開發人員想 用戶端建構 QR code 讀取器， 不必仰賴外部 JavaScript 程式庫模型可能相當昂貴 另一部 包括 Android、iOS 和 macOS 等作業系統 相機模組中的方塊，通常已有優異效能 最佳化的功能偵測工具，例如 Android FaceDetector敬上 或 iOS 通用功能偵測工具中 CIDetector。

Shape Detection API 會透過 一組 JavaScript 介面。目前支援的功能為 透過 FaceDetector 介面偵測條碼偵測 BarcodeDetector 介面和文字偵測 (光學字元) 透過 TextDetector 介面辨識 (OCR)。

建議用途

如上所述，Shape Detection API 目前支援偵測 臉部、條碼和文字以下的項目符號清單包含範例 這三項功能的用途

臉部偵測

  • 線上社交或相片分享網站通常讓使用者 在圖片中加上註解標示出偵測到的臉孔界線 處理這項工作
  • 內容網站可根據偵測到的問題，以動態方式裁剪圖片 臉孔，而非仰賴其他經驗法則，或特別標出偵測到的臉孔 就像 Ken Burns 一樣 像故事一樣的平移和縮放效果。
  • 多媒體訊息網站可讓使用者疊加其他有趣的物件，例如 太陽眼鏡或鬍鬚 偵測到的臉孔地標。

條碼偵測

  • 讀取 QR code 的網頁應用程式可提供有趣的用途，例如 線上付款或網頁導覽，或使用條碼建立社交 具備訊息連線功能。
  • 購物應用程式可讓使用者 EAN 或 UPC 條碼 線上比較價格
  • 機場可以提供網路站台，方便乘客掃描登機證 票證要顯示的 Aztec 代碼 與航班相關的個人化資訊

文字偵測

  • 線上社群網路網站可讓 將偵測到的文字新增為 alt 屬性，以產生使用者產生的圖片內容 在未提供其他說明的情況下，<img> 標記。
  • 內容網站可以使用文字偵測功能，避免將標題放在 包含文字的主頁橫幅。
  • 網頁應用程式可以使用文字偵測功能來翻譯 例如餐廳菜單

目前狀態

步驟 狀態
1. 建立說明 完成
2. 建立規格的初始草稿 完成
3. 收集意見回饋與在設計上反覆改進 進行中
4. 來源試用 完成
5. 啟動 條碼偵測完成
臉部偵測進行中
文字偵測 進行中

如何使用 Shape Detection API

如果要在本機實驗 Shape Detection API， 啟用#enable-experimental-web-platform-features 標記在 about://flags 中。

FaceDetector、BarcodeDetector 和這三個偵測工具的介面 TextDetector 是類似的。這些函式都提供單一的非同步方法 名為 detect()，該元件會使用 ImageBitmapSource 做為輸入內容 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 code 掃描：

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 嗎？你的公開支援服務 能夠協助我們優先開發各項功能，並向其他瀏覽器廠商說明 對他們來說至關重要

實用連結