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

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

Thomas Steiner

什么是 Shape Detection API？

借助 navigator.mediaDevices.getUserMedia 和 Chrome（Android 版）照片选择器等 API，从设备相机捕获图片或实时视频数据，或者上传本地图片变得非常简单。到目前为止，即使图片实际上可能包含许多有趣的特征（例如人脸、条形码和文本），这些动态图片数据（以及网页上的静态图片）仍无法通过代码访问。

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

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

建议的用例

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

人脸检测

  • 在线社交网络或照片分享网站通常允许用户在图片中添加注释。通过突出显示检测到的人脸的边界，可以辅助完成此任务。
  • 内容网站可以根据可能检测到的人脸（而不是依赖于其他启发法）动态剪裁图片，或者以类似故事的格式通过类似于 Ken Burns 的平移和缩放效果突出显示检测到的人脸。
  • 彩信网站可以允许用户在检测到的人脸特征点上叠加有趣的对象，如太阳镜或胡须。

条形码检测

  • 读取二维码的 Web 应用可以解锁在线付款或网页导航等有趣的用例，或者使用条形码在通讯应用中建立社交关系。
  • 购物应用可以允许用户扫描实体店中商品的 EAN 或 UPC 条形码，以在线比较价格。
  • 机场可以提供自助服务终端，乘客可以在其中扫描登机牌的 Aztec 码，以显示与其航班相关的个性化信息。

文本检测

  • 在线社交网站可以在未提供其他说明的情况下，将检测到的文本添加为 <img> 标记的 alt 属性，以改进用户生成的图片内容的可访问性。
  • 内容网站可以使用文本检测功能，以免将标题置于包含文本的主打图片上方。
  • Web 应用可以使用文本检测来翻译餐厅菜单等文本。

当前状态

步骤 状态
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() 从 worker 传递给主应用。演示展示了此操作的实际操作。

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

反馈

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

向我们介绍 API 设计

是否存在 API 行为不符合您预期的情况？或者，是否缺少某些方法或属性来实现您的想法？对安全模型有疑问或意见？

实施方面有问题？

您是否发现了 Chrome 实现方面的错误？或者实现方式是否不同于规范？

  • 在 https://new.crbug.com 上提交 bug。请务必提供尽可能多的详细信息、简单的重现说明，并将组件设为 Blink>ImageCapture。Glitch 非常适合快速轻松地分享重现的视频。

打算使用该 API？

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

实用链接