facedetector api截至2024年尚未被任何主流浏览器实现，window.facedetector为undefined，无法用于实时美颜；替代方案包括tensorflow.js+face-api.js实现关键点定位与局部美颜，或webgl+自研shader进行gpu加速美颜。
FaceDetector API 目前（截至2024年）尚未在任何主流浏览器中实现或启用，属于规范草案阶段，不可用于生产环境。
它不是一个可用的、能直接调用 new FaceDetector() 并实时美颜的现成接口。目前 Chrome、Firefox、Safari 均未支持该 API，window.FaceDetector 为 undefined，尝试使用会报错。
所以，你无法用 HTML5 原生 FaceDetector 接口实现实时自拍美颜——它根本不存在于当前浏览器中。
不过，你可以用成熟可行的替代方案达成同样目标：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
✅ 替代方案一：使用 TensorFlow.js + face-api.js（推荐）
这是目前最主流、文档完善、支持实时人脸检测与关键点定位的前端方案，可基于五官位置做局部美颜（如磨皮、大眼、瘦脸）。
- 引入库：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.21.0"></script>和<script src="https://cdn.jsdelivr.net/npm/face-api.js@1.9.1/dist/face-api.min.js"></script> - 加载模型（需联网或托管模型文件）：
await faceapi.nets.tinyFaceDetector.loadFromUri('models') - 从视频流中逐帧检测：
const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()) - 结合
faceapi.detectFaceLandmarks()获取68个关键点，定位眼睛、脸颊、下巴等区域 - 用 Canvas 绘制原始帧 → 在关键区域叠加高斯模糊（磨皮）、仿射变换（大眼）、坐标偏移（瘦脸）等滤镜效果
✅ 替代方案二：WebGL + 自研/开源美颜 Shader
对性能要求高、追求低延迟时，可用 WebGL 将摄像头画面传入 GPU，用 GLSL 编写美颜着色器（如双边滤波去噪、肤色增强、局部锐化）。
- 用
navigator.mediaDevices.getUserMedia({video: true})获取视频流 - 将
<video></video>作为纹理传入 WebGL 程序 - 编写 fragment shader 实现：皮肤区域识别（HSV 阈值）、自适应模糊、亮度对比度微调
- 参考开源项目：webgl-face-beautify
❌ 不要踩的坑
- 别查 MDN 或 CanIUse 上 FaceDetector 的兼容性表就贸然开发——它显示“Experimental”且所有列为空白，代表无实现
- 别混淆 Face Detection（检测）和 Face Recognition（识别）：前者定位人脸框，后者识别人物身份；美颜只需前者+关键点
- 纯 CSS 滤镜（如 filter: blur()）是全局的，无法只美颜脸部——必须结合人脸定位做局部处理
真正落地的前端实时美颜，依赖的是「媒体流 + JS 人脸分析 + Canvas/WebGL 渲染」这一组合，而非某个未实现的 HTML5 接口。工具链成熟，效果可控，已广泛用于直播、视频会议、社交拍照类应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
