FaceDetector API 尚未标准化且主流浏览器均不支持，无法用于实时人脸检测与挂件叠加；推荐使用 face-api.js 或 @tensorflow-models/blazeface 等纯前端方案，如 blazeface 可通过三步实现：引入模型、获取视频流并逐帧检测、基于关键点精准叠加墨镜等挂件。
FaceDetector API 目前尚未成为稳定标准，且在主流浏览器中基本不可用。Chrome 曾在 2020 年短暂实验性支持（需开启 flag），但已于 Chrome 95 彻底移除；Firefox、Safari 均未实现。因此，无法直接用原生 HTML5 FaceDetector API 实现前端实时人脸检测与挂件叠加。
替代方案：使用成熟的人脸检测库
实际项目中，推荐使用以下轻量、纯前端、无需服务器的人脸检测方案：
- face-api.js：基于 TensorFlow.js，支持人脸检测、关键点定位、表情识别，兼容 Chrome/Firefox/Edge，移动端表现良好；
- @tensorflow-models/blazeface：Google 官方轻量模型，专为移动端优化，检测速度快（>30fps），仅需 ~150KB JS；
- tracking.js（已归档，不推荐新项目）或 ml5.js（封装更友好，适合初学者）。
以 blazeface 为例：三步实现实时挂件叠加
以下为最小可行代码（无需后端，纯 HTML + JS）：
① 引入模型（CDN）：<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.18.0/dist/tf.min.js"></script><br><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface@1.2.0/dist/blazeface.min.js"></script>
立即学习“前端免费学习笔记（深入）”；
② 获取视频流并启动检测：用 navigator.mediaDevices.getUserMedia 拉取摄像头，将 <video></video> 绘制到 <canvas></canvas>，每帧调用 model.estimateFaces()。
blazeface 返回人脸框（x, y, width, height）和关键点（如左右眼坐标）。墨镜可按如下逻辑叠加：
- 取左右眼中心点，计算旋转角度（用于适配歪头）；
- 墨镜宽度 = 两眼距离 × 1.8，高度按比例缩放；
- 用
ctx.save() → ctx.translate() → ctx.rotate() → ctx.drawImage() → ctx.restore()精准贴合。
注意事项与优化建议
-
性能优先：设置
maxFaces: 1、scoreThreshold: 0.75，跳帧处理（如每 3 帧检测一次）； - 首帧延迟：模型加载需 1–2 秒，应显示“加载中”提示，避免白屏；
-
移动端适配：iOS Safari 需手动设置
video.play().catch(...)触发播放，且 canvas 尺寸需匹配 video 的videoWidth/videoHeight； - 挂件资源：使用透明 PNG，预加载避免闪烁；复杂挂件（如动态美颜）建议用 WebGL（如 three.js）或 WebGPU（未来方向）。
不推荐强行使用 FaceDetector API 的原因
该 API 从未进入 W3C 候选推荐标准，所有实现均为实验性质。即使通过旧版 Chrome flag 启用，也会面临：
- 无关键点输出（只能得矩形框，无法精准贴合眼睛/嘴巴）；
- 不支持多脸、低光照、侧脸场景；
- API 接口随时可能变更或废弃，项目无法长期维护。
