HTML无法直接实现人脸认证，需通过JavaScript调用摄像头采集视频流，再上传至服务端或使用WebAssembly/JS模型完成人脸检测、活体验证与比对。
HTML 里不能直接做人脸认证
浏览器原生 HTML 不具备调用摄像头进行人脸识别的能力，navigator.mediaDevices.getUserMedia 只能拿到视频流，后续的活儿——人脸检测、特征提取、比对验证——必须靠 JS 库或后端服务完成。所谓“HTML 人脸认证页”，本质是：前端采集画面 + 上传图像/帧到服务端（或调用 WebAssembly/JS 模型）+ 接收比对结果。
用 getUserMedia 安全地获取摄像头画面
现代浏览器要求 HTTPS 或 localhost 才允许启用摄像头，HTTP 站点会静默失败或抛出 NotAllowedError。调用前需检查权限状态，并处理常见拒绝场景：
- 用户点击“拒绝”后，下次再调用
getUserMedia会直接 reject，不会再次弹窗；需引导用户手动在地址栏点击锁形图标修改权限 - 移动端部分安卓浏览器（如旧版 UC）不支持
video: { facingMode: "user" }，可 fallback 到{ video: true } - 避免在页面加载时自动请求权限——应由用户显式操作（如点击“开始认证”按钮）触发
最小可用示例：
document.getElementById("startBtn").onclick = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.getElementById("video");
video.srcObject = stream;
} catch (err) {
console.error("摄像头访问失败:", err.name); // 常见：NotAllowedError、NotFoundError
}
};
前端截帧上传 ≠ 人脸识别，只是第一步
用 canvas.getContext('2d').drawImage(video, 0, 0) 截一帧并转成 blob 或 base64 发给后端，这是最稳妥的做法。别信“纯前端 JS 人脸识别库能商用”的说法：
立即学习“前端免费学习笔记（深入）”；
-
@tensorflow-models/blazeface可检测人脸框，但无活体检测、无 1:1 比对能力，精度和鲁棒性远低于服务端模型 - 所有纯前端方案都无法防止截图、视频回放、翻拍攻击，金融/政务类场景必须服务端活体+比对
- 若后端返回
422 Unprocessable Entity，大概率是上传的图片尺寸超限、格式非 JPEG/PNG、或未按约定加Content-Type: multipart/form-data
上传代码关键点：
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
canvas.toBlob((blob) => {
const fd = new FormData();
fd.append("image", blob, "frame.jpg");
fetch("/api/verify", { method: "POST", body: fd });
}, "image/jpeg", 0.8);
后端返回结果后，前端要区分三类响应
真实业务中，后端不会只返回“成功/失败”。你得根据 HTTP 状态码和 JSON 字段做不同 UI 反馈：
-
200+{"status":"live","match":true,"score":0.92}：活体通过且比对分达标，可进入下一步 -
200+{"status":"spoof","reason":"motion_lack"}：活体检测失败，提示“请自然眨眼或转头” -
400或500：前端应显示通用错误（如“网络异常，请重试”），而非透出后端错误信息（如"face_not_detected"）
特别注意：fetch 默认不会因 4xx/5xx 抛错，必须手动检查 response.ok 或 response.status。
活体检测逻辑、证件照与实时帧比对、防截屏/录屏机制——这些都不在前端控制范围内。页面做得再像认证页，没对接合规的生物识别服务，就只是个表单壳子。
