Shape Detection API：一张照片胜过千言万语、人脸和条形码

Shape Detection API 可检测图片中的人脸、条形码和文本。

Thomas Steiner

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

实施时遇到问题？

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

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

打算使用该 API？

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

实用链接