facedetector api 尚未标准化，仅chrome 107+实验支持，生产环境推荐face-api.js等跨浏览器方案，需注意授权、性能、隐私与降级策略。
FaceDetector API 目前尚未成为 HTML5 标准的一部分，也未被主流浏览器广泛支持。它属于 Web Platform Incubator Community Group（WICG）提出的实验性提案，目前仅在部分 Chromium 内核浏览器（如 Chrome 107+）中以 experimental Web Platform features 标志启用，且默认禁用、无 polyfill、不兼容 Safari/Firefox。
当前实际可用的人脸检测方案
由于原生 FaceDetector 接口不可靠，生产环境应选择成熟、跨浏览器的替代方案：
-
TensorFlow.js + pre-trained models：如
@tensorflow-models/blazeface（轻量、实时、支持 Canvas/Webcam）、face-api.js（基于 tfjs，封装更友好，支持关键点、表情、年龄/性别估计） -
WebAssembly 加速库：如
WASM-based OpenCV.js（需自行构建人脸检测 pipeline，灵活性高但开发成本大） - 后端 API 调用：将视频帧上传至云服务（如 Azure Face API、AWS Rekognition），适合对精度要求极高、可接受延迟的场景
若仍想尝试实验性 FaceDetector（仅限 Chrome 107+）
需手动开启实验功能，并注意其严重限制：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 访问
chrome://flags/#enable-experimental-web-platform-features，启用该选项并重启浏览器 - 检测仅支持
ImageBitmap或HTMLImageElement，不支持实时视频流（video元素）直接传入；需逐帧captureStream().getVideoTracks()[0].requestFrame()+createImageBitmap()转换，性能极差 - 返回结果仅有基础矩形框（
boundingBox），无关键点、姿态、属性等信息 - 代码示例（仅作概念验证，不推荐用于项目）：
推荐落地实践：用 face-api.js 实现实时人脸检测
这是目前最平衡易用性、性能与功能的选择：
- 引入：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.15.0/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/face-api.js@1.9.0/dist/face-api.min.js"></script> - 加载模型（首次需下载，建议预加载）：
await faceapi.nets.tinyFaceDetector.loadFromUri('models') - 从
<video></video>获取帧，用faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())实时检测 - 用
faceapi.drawDetection(canvas, detections)可视化结果 - 支持 68 点关键点、人脸识别、表情分析等扩展能力
关键注意事项
无论选用哪种方案，都需重视：
-
用户授权：调用摄像头前必须显式请求
navigator.mediaDevices.getUserMedia({ video: true })并获用户允许 - 性能优化：降低视频分辨率（如 480p）、跳帧处理（每 2–3 帧检测一次）、关闭非必要模型（如不用关键点就别加载 landmark 模型）
- 隐私合规：本地处理优先，避免未经同意上传生物特征数据；符合 GDPR /《个人信息保护法》要求
- 降级策略：检测失败或不支持时提供清晰提示，而非白屏或报错中断流程
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
