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

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

Thomas Steiner

什么是 Shape Detection API？

借助 navigator.mediaDevices.getUserMedia 等 API 和适用于 Android 的 Chrome 照片选择器，您可以非常轻松地从设备相机拍摄图片或实时视频数据，或上传本地图片。到目前为止，代码无法访问此类动态图片数据以及网页上的静态图片，即使图片实际上可能包含许多有趣的特征（例如人脸、条形码和文本）也是如此。

例如，过去，如果开发者想要在客户端上提取此类功能来构建二维码读取器，就必须依赖外部 JavaScript 库。从性能角度来看，这可能会很昂贵，并且会增加总页面大小。另一方面，包括 Android、iOS 和 macOS 在内的操作系统，以及摄像头模块中的硬件芯片，通常已经具有高性能且经过高度优化的特征检测器，例如 Android FaceDetector 或 iOS 通用特征检测器 CIDetector。

Shape Detection API 通过一组 JavaScript 接口公开这些实现。目前，支持的功能包括通过 FaceDetector 接口进行人脸检测、通过 BarcodeDetector 接口进行条形码检测，以及通过 TextDetector 接口进行文本检测（光学字符识别 [OCR]）。

建议的用例

如上所述，Shape Detection API 目前支持检测面孔、条形码和文本。以下项目符号列表包含这三项功能的用例示例。

人脸检测

  • 在线社交网络或照片分享网站通常允许用户在图片中添加人物注释。通过突出显示检测到的人脸的边界，可以简化此任务。
  • 内容网站可以根据可能检测到的面部（而非依赖其他启发词语）动态剪裁图片，或者以故事形式使用类似 Ken Burns 的平移和缩放效果来突出显示检测到的面部。
  • 多媒体即时通讯网站可以允许用户在检测到的面部地标上叠加太阳镜或胡子等有趣的对象。

条形码检测

  • 可读取二维码的 Web 应用可以实现一些有趣的用例，例如在线付款或 Web 导航，或者使用条形码在即时通讯应用中建立社交联系。
  • 购物应用可以允许用户扫描实体店内商品的 EAN 或 UPC 条形码，以便在线比价。
  • 机场可以提供网络信息亭，供乘客扫描登机牌的 Aztec 代码，以显示与其航班相关的个性化信息。

文本检测

  • 在没有提供其他说明的情况下，在线社交网络网站可以将检测到的文本添加为 <img> 标记的 alt 属性，从而提高用户生成的图片内容的可访问性。
  • 内容网站可以使用文本检测功能，避免在包含文本的主打图片上方放置标题。
  • 网络应用可以使用文本检测功能翻译文本，例如餐厅菜单。

当前状态

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

如何使用 Shape Detection API

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

这三个检测器（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"
  ]
*/

这样，您就可以检测所需的具体功能，例如二维码扫描：

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

这比隐藏接口要好，因为即使在不同平台上，功能也可能有所不同，因此我们应鼓励开发者准确检查他们所需的功能（例如特定的条形码格式或人脸地标）。

操作系统支持

条形码检测功能适用于 macOS、ChromeOS 和 Android 设备。Android 设备必须安装 Google Play 服务。

最佳做法

所有检测器都是异步工作的，也就是说，它们不会阻塞主线程。因此，请勿依赖实时检测，而是要给检测器留出一些时间来执行其工作。

如果您是 Web Worker 的粉丝，那么您会很高兴地知道，检测器也在此处公开。检测结果可序列化，因此可以通过 postMessage() 从工作器传递到主应用。演示会演示此过程。

并非所有平台实现都支持所有功能，因此请务必仔细检查支持情况，并将该 API 用作渐进式增强功能。例如，某些平台本身可能支持人脸检测，但不支持人脸地标检测（眼睛、鼻子、嘴巴等）；或者可能能够识别文字的存在和位置，但无法识别文字内容。

反馈

Chrome 团队和 Web 标准社区希望了解您使用 Shape Detection API 的体验。

请向我们说明 API 设计

API 是否存在某些方面未按预期运行？或者，您是否缺少实现想法所需的方法或属性？对安全模型有疑问或意见？

实现方面存在问题？

您是否发现了 Chrome 实现中的 bug？还是实现与规范不同？

  • 请访问 https://new.crbug.com 提交 bug。请务必提供尽可能详细的信息、简单的重现说明，并将组件设置为 Blink>ImageCapture。Glitch 非常适合分享快速简便的重现步骤。

打算使用该 API？

计划在您的网站上使用 Shape Detection API？您的公开支持有助于我们确定功能的优先级，并向其他浏览器供应商表明支持这些功能的重要性。

实用链接