Shape Detection API 可偵測臉孔、條碼和圖片中的文字。
什麼是 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>
標記。 - 內容網站可以使用文字偵測功能,避免將標題放在 包含文字的主頁橫幅。
- 網頁應用程式可以使用文字偵測功能來翻譯 例如餐廳菜單
目前狀態
如何使用 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 有什麼不如預期的運作方式?或 您需要將 好嗎?對安全性模型有任何疑問或意見嗎?
- 在 Shape Detection API GitHub 存放區上提交規格問題。 或為現有問題補充意見
無法導入嗎?
您發現 Chrome 實作錯誤嗎?另一種是實作 該怎麼辦?
- 前往 https://new.crbug.com 回報錯誤。請務必加入
盡可能提供詳細且簡單的重現操作說明
將「元件」設為
Blink>ImageCapture
。毛刺 很適合用來分享快速又簡單的建議。
想要使用這個 API 嗎?
想要在網站上使用 Shape Detection API 嗎?你的公開支援服務 能夠協助我們優先開發各項功能,並向其他瀏覽器廠商說明 對他們來說至關重要
- 歡迎前往 WICG Discourse 討論串,說明這項工具的運用方式。
- 使用主題標記將推文傳送至 @ChromiumDev
#ShapeDetection
敬上 ,並說明你使用這項服務的位置和方式。
實用連結
- 公開說明
- API 示範 |API 示範來源
- 追蹤錯誤
- ChromeStatus.com 項目
- 閃爍元件:
Blink>ImageCapture