Chrome 的 ShapeDetectionAPI 已于2023年10月彻底移除，所有相关接口（如 FaceDetector）返回 undefined；替代方案包括 TensorFlow.js、MediaPipe、jsQR 等标准技术栈，并需注意权限、坐标转换和内存释放。
Chrome 的 ShapeDetectionAPI 已在 2023 年底被完全移除，当前（2026 年）任何基于 navigator.gpu 或 createFaceDetector 等调用都会失败，不是兼容性问题，而是 API 彻底下线。
为什么 ShapeDetectionAPI 调用直接报错 undefined
这个 API 从未进入标准，仅作为 Chrome 实验性接口短暂存在（Chromium 67–93），且从没在 Safari、Firefox 或 Edge 中实现。2023 年 10 月起，Chromium 官方彻底删除了相关代码，self.FaceDetector、self.BarcodeDetector、self.TextDetector 全部变为 undefined。
- 检查方式：在 Chrome DevTools Console 中执行
typeof FaceDetector，返回"undefined"即确认已失效 - 常见误判：把旧教程里“启用 chrome://flags/#enable-shape-detection”当作解决方案——该 flag 已消失，启用无效
- 替代方案不是“降级 Chrome”，而是换技术栈；哪怕用 Chrome 92，现在也无法启用（二进制已剥离）
现在还能检测人脸/条码/文本？用什么替代
浏览器端仍可做视觉识别，但必须转向标准、可维护的方案：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
TensorFlow.js+ 预训练模型：如@tensorflow-models/blazeface（人脸）、@tensorflow-models/coco-ssd（通用物体，含手机/条码近似检测） -
WebAssembly+OpenCV.js：适合条码/二维码（用cv.barcodeDetector模块），但需自行编译或引入 CDN 版本 - 纯 Web API 替代：文本检测可用
document.elementFromPoint()+ OCR 服务（如 Tesseract.js），但非实时；条码推荐jsQR（专注 QR/Code128，轻量、无依赖） - 注意：
MediaPipe的face_mesh或handpose是当前最接近原ShapeDetectionAPI体验的方案，但需通过@mediapipe/tasks-vision加载 WASM 模型，首次加载有延迟
迁移时最容易忽略的三个细节
从旧 ShapeDetectionAPI 迁移时，开发者常卡在以下环节：
- 权限模型变化：旧 API 自动访问摄像头流；新方案（如 MediaPipe）需显式调用
navigator.mediaDevices.getUserMedia({video: true})，且必须在用户手势（如 click）后触发，否则被拒绝 - 坐标系不一致：旧 API 返回的
boundingBox坐标是相对于视频帧原始尺寸；tfjs模型默认输出归一化坐标（0–1），需乘以video.videoWidth才能叠加到画布上 - 内存泄漏风险：
FaceDetector实例无需手动销毁；但tf.loadGraphModel()或vision.FaceLandmarker.createFromOptions()创建的对象必须在页面卸载前调用.dispose()，否则持续占用 GPU 内存
真正要落地，别纠结“怎么复活 ShapeDetectionAPI”，重点是选对替代路径并处理好权限、坐标、资源释放这三个硬茬。浏览器视觉识别仍在演进，只是不再走封闭实验接口的老路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
