无需登录 数据私有 本地保存

形状检测 API 综合演示 - 人脸/条形码/文本检测

多媒体 开发工具 API 人脸 形状检测 条形码
11
0
0
0

上传图片或开启摄像头开始检测

也支持拖拽图片到此处
实时扫描中
最大人脸数 5
按住Ctrl多选，不选则检测所有格式
检测结果
0
暂无检测结果
常见问题与知识点

Shape Detection API 是一组浏览器原生API，允许在客户端直接进行图像识别检测，包括人脸检测（FaceDetector）、条形码/二维码检测（BarcodeDetector）和文本检测（TextDetector）。所有检测均在本地完成，无需上传图像到服务器，保障隐私安全。

BarcodeDetector：Chrome 83+、Edge 83+、Opera 69+ 已稳定支持，Android Chrome 也全面支持。
FaceDetector：需要在 Chrome 中开启 chrome://flags/#enable-experimental-web-platform-features 实验性标志。
TextDetector：目前几乎没有浏览器原生支持，属于实验阶段。
Firefox 和 Safari 目前均不支持这些API。

在 Chrome 地址栏输入 chrome://flags/#enable-experimental-web-platform-features，将该选项设为 Enabled，然后重启浏览器。重启后 FaceDetector API 即可使用。注意这是实验性功能，可能不够稳定。

支持 13种 格式：QR Code、Aztec、Code 128、Code 39、Code 93、Codabar、Data Matrix、EAN-13、EAN-8、ITF、PDF417、UPC-A、UPC-E。其中 QR Code 和 Data Matrix 是最常用的二维码格式，EAN-13/UPC-A 是商品条形码常用格式。

完全本地处理！所有检测均在您的浏览器中完成，图像数据不会上传到任何服务器。摄像头视频流和上传的图片仅在您的设备上处理。这也是 Shape Detection API 相比云端API的最大优势——零隐私泄露风险。

常见原因：①光线不足，尝试在明亮环境下使用；②条形码/二维码太小或模糊，尝试靠近或调整角度；③摄像头对焦问题，保持稳定等待自动对焦；④选择了错误的摄像头（扫描条形码建议使用后置摄像头）；⑤格式过滤设置过于严格，尝试选择"全部格式"。

快速模式（fastMode=true）：检测速度更快，适合实时视频流处理，但可能漏检较小或侧脸。
精确模式（fastMode=false）：检测精度更高，能检测到更多人脸和侧脸，但处理时间稍长。对于静态图片建议关闭快速模式以获得更好的检测效果。

①Android Chrome 对 BarcodeDetector 支持良好，适合扫码场景；②iOS Safari 不支持这些API，建议使用Chrome；③扫描条形码时使用后置摄像头效果更佳；④移动端摄像头权限需要HTTPS连接或localhost；⑤在移动端扫描QR码时保持手机稳定，避免抖动。

rawValue是条形码/二维码解码后的原始文本内容。如果是URL可以直接打开，如果是商品条码（EAN/UPC）可以查询商品信息，如果是文本信息可以复制使用。本工具提供了一键复制功能，方便您使用检测结果。

①零依赖：无需引入额外JS库（如zxing-js、face-api.js等），浏览器原生支持；②性能优越：底层使用硬件加速和系统级优化；③隐私安全：数据不出浏览器；④体积小：不增加打包体积。缺点是浏览器兼容性有限，目前主要在Chrome系浏览器中可用。
🔧 相关工具