Shape Detection API 可检测图片中的人脸、条形码和文本。
什么是 Shape Detection API?
使用 navigator.mediaDevices.getUserMedia
等 API
以及 Chrome(Android 版)
照片选择器
从设备捕获图片或实时视频数据已经变得相当容易
或上传本地图片到目前为止,这些动态图片数据以及
网页上的静态图片)都无法通过代码访问,
但图片实际上可能包含许多有趣的特征,例如人脸、
条形码和文本。
例如,过去,如果开发者想从 Google Cloud 上的
客户构建二维码读取器时,他们
依赖于外部 JavaScript 库。这个价位可能很贵
并增加页面的整体重量。另一个
包括 Android、iOS 和 macOS 在内的操作系统,
芯片在相机模块中通常已具备高性能和
经过优化的功能检测器,如 Android
FaceDetector
或 iOS 通用功能检测器,
CIDetector
。
Shape Detection API 通过
一组 JavaScript 接口。目前支持的功能包括人脸识别
通过 FaceDetector
界面检测条形码,
BarcodeDetector
接口,以及文本检测(光学字符)
识别 (OCR))。TextDetector
建议的用例
如上所述,Shape Detection API 目前支持 包括人脸、条形码和文本。以下项目符号列表包含示例 三个功能的使用案例。
人脸检测
- 在线社交网络或照片分享网站通常会让用户 为图像中的人物添加注释。通过突出显示检测到的人脸的边界, 可以协助完成这项任务。
- 内容网站可以根据可能检测到的图像,动态裁剪图片 而不是依赖于其他启发法,也可以突出显示检测到的人脸 和肯·伯恩斯这样的歌手 故事式格式的平移和缩放效果。
- 多媒体消息网站可以允许用户叠加有趣的对象,例如 太阳镜或胡须 特征点。
条形码检测
- 读取二维码的 Web 应用可以解锁一些有趣的应用场景,例如: 在线付款或网络导航,或使用条形码来建立社交 即时通讯应用上的连接
- 购物应用可允许用户 EAN 或 UPC 条形码 在实体店中销售商品,以便在线比较价格。
- 机场可以提供网络自助服务终端,供乘客扫描登机牌 卡券要显示的 Aztec 代码 与航班相关的个性化信息
文本检测
- 在线社交网站可以提高
通过将检测到的文本添加为
alt
属性,生成用户生成的内容 在未提供其他说明的情况下为<img>
标记提供此属性。 - 内容网站可以使用文本检测功能来避免在顶部放置标题 包含文字的主打图片。
- Web 应用可以使用文本检测功能来翻译文本,例如: 例如餐厅菜单
当前状态
步骤 | 状态 |
---|---|
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
,可以传递可选参数
检测器的构造函数,该构造函数允许向检测器提供提示,
底层检测器。
请仔细查看 explainer 简单介绍一下不同的平台
使用 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"
]
*/
这样,您就可以检测所需的特定功能,例如二维码扫描:
if (('BarcodeDetector' in window) &&
((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
console.log('QR code scanning is supported.');
}
这比隐藏接口要好,因为即使是各个平台,功能可能也会有所不同 因此应鼓励开发者精确地检查 (例如特定的条形码格式或面部特征点)。
操作系统支持
macOS、ChromeOS 和 Android 均提供条形码检测功能。Google Play 服务 都是必需的
最佳做法
所有检测器都是异步运行的,也就是说,它们不会阻止主 线程。因此,不要依赖实时检测,而应允许一些 检测器正常工作所用的时间。
如果你喜欢
Web Workers,
而且探测器也暴露在那里,你会感到很高兴。
检测结果可序列化,因此可以从 worker 传递
通过 postMessage()
发送到主应用。此演示展示了实际操作。
并非所有平台实现都支持所有功能,因此请务必检查 谨慎使用 API,并逐步 增强功能。例如,某些平台可能支持人脸检测 本身,但不能检测面部特征(眼睛、鼻子、嘴巴等);或 文本存在和文本位置,但无法识别文本内容。
反馈
Chrome 团队和网络标准社区希望了解 使用形状检测 API 的经验。
向我们介绍 API 设计
API 是否有什么无法按预期运行?或 您是否缺少实现自己的 想法?对安全模型有疑问或意见?
- 在 Shape Detection API GitHub 代码库上提交规范问题, 或添加您对现有问题的看法。
实施时遇到问题?
您在 Chrome 的实现过程中是否发现了错误?还是 与规范不同?
- 访问 https://new.crbug.com 提交 bug。请务必添加
并提供简单的重现说明,
组件设置为
Blink>ImageCapture
。故障 非常适合分享快速、简单的重现。
打算使用该 API?
打算在您的网站上使用 Shape Detection API?你的公开支持 可帮助我们确定各项功能的优先级,并向其他浏览器供应商展示 但为他们提供支持至关重要
- 请在 WICG Discourse 会话中说明您打算如何使用它。
- 使用 # 标签向 @ChromiumDev 发送推文
#ShapeDetection
并告诉我们您使用它的地点和方式。
实用链接
- 公开铺垫消息
- API 演示 |API 演示源代码
- 跟踪错误
- ChromeStatus.com 条目
- Blink 组件:
Blink>ImageCapture