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 应用可以解锁一些有趣的应用场景,例如: 在线付款或网络导航,或使用条形码来建立社交 即时通讯应用上的连接
  • 购物应用可允许用户 EANUPC 条形码 在实体店中销售商品,以便在线比较价格。
  • 机场可以提供网络自助服务终端,供乘客扫描登机牌 卡券要显示的 Aztec 代码 与航班相关的个性化信息

文本检测

  • 在线社交网站可以提高 通过将检测到的文本添加为 alt 属性,生成用户生成的内容 在未提供其他说明的情况下为 <img> 标记提供此属性。
  • 内容网站可以使用文本检测功能来避免在顶部放置标题 包含文字的主打图片。
  • Web 应用可以使用文本检测功能来翻译文本,例如: 例如餐厅菜单

当前状态

步骤 状态
1. 创建铺垫消息 完成
2. 创建规范的初始草稿 完成
3. 收集反馈和对设计进行迭代 进行中
4. 源试用 完成
5. 投放 条形码检测完成
正在进行人脸检测
正在进行文本检测

如何使用 Shape Detection API

如果您想在本地试用 Shape Detection API, 启用#enable-experimental-web-platform-features 标志(在 about://flags 中)。

所有三个检测器(FaceDetectorBarcodeDetectorTextDetector 是类似的。它们都提供单一异步方法 名为 detect(),该方法接受一个 ImageBitmapSource 作为输入(即 CanvasImageSourceBlobImageData)。

对于 FaceDetectorBarcodeDetector,可以传递可选参数 检测器的构造函数,该构造函数允许向检测器提供提示, 底层检测器。

请仔细查看 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() 方法 也提出了类似的接口, FaceDetectorTextDetector

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 是否有什么无法按预期运行?或 您是否缺少实现自己的 想法?对安全模型有疑问或意见?

实施时遇到问题?

您在 Chrome 的实现过程中是否发现了错误?还是 与规范不同?

  • 访问 https://new.crbug.com 提交 bug。请务必添加 并提供简单的重现说明, 组件设置为 Blink>ImageCapture故障 非常适合分享快速、简单的重现。

打算使用该 API?

打算在您的网站上使用 Shape Detection API?你的公开支持 可帮助我们确定各项功能的优先级,并向其他浏览器供应商展示 但为他们提供支持至关重要

实用链接