首先调用摄像头获取视频流，再通过face-api.js进行人脸识别。使用navigator.mediadevices.getusermedia()请求摄像头权限并绑定到video元素，然后加载face-api.js的预训练模型，实时检测人脸关键点与特征描述符，最后通过facematcher比对实现身份识别，需注意模型加载路径、检测频率与用户隐私授权。
使用JavaScript控制浏览器摄像头并实现人脸识别，主要依赖于WebRTC和现有的人脸识别库。整个过程分为两步：调用摄像头获取视频流，再通过AI模型进行人脸检测与识别。下面详细介绍实现方法。
调用摄像头获取视频流
通过 navigator.mediaDevices.getUserMedia() 可以请求用户授权访问摄像头，并将视频流绑定到页面的 video 元素上。
示例代码：
const video = document.getElementById('video'); async function startCamera() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); video.srcObject = stream; } catch (err) { console.error("无法访问摄像头:", err); } } startCamera();确保HTML中有一个 video 标签用于显示画面：
立即学习“Java免费学习笔记（深入）”；
使用face-api.js实现人脸识别
face-api.js 是基于 TensorFlow.js 的人脸检测与识别库，支持在浏览器端完成人脸定位、表情识别、特征比对等功能。
步骤如下：
- 引入 face-api.js 库（可通过CDN）
- 加载预训练模型
- 从视频帧中检测人脸
引入库：
<script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://www.php.cn/zt/19618.html" target="_blank">cdn.jsdelivr.net/npm/face-api.js/dist/face-api.min.js"></script>加载模型并开始检测：
async function loadModels() { await faceapi.nets.tinyFaceDetector.loadFromUri('/models'); await faceapi.nets.faceLandmark68Net.loadFromUri('/models'); await faceapi.nets.faceRecognitionNet.loadFromUri('/models'); } async function detectFaces() { const detections = await faceapi.detectAllFaces( video, new faceapi.TinyFaceDetectorOptions() ).withFaceLandmarks().withFaceDescriptors(); console.log(detections); } // 每500毫秒检测一次 setInterval(detectFaces, 500);注意：模型文件可从 face-api.js GitHub 仓库下载，放在项目的 /models 目录下。
实现人脸比对（识别身份）
若要识别具体人物，需提前录入人脸特征（描述符），然后与实时检测的人脸进行比对。
示例流程：
// 假设已有一张注册人脸图像 const labeledFaceDescriptors = await Promise.all( ["Alice", "Bob"].map(async name => { const img = await faceapi.fetchImage(`/faces/${name}.jpg`); const detection = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor(); return new faceapi.LabeledFaceDescriptors(name, [detection.descriptor]); }) ); const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6); // 实时比对 const detections = await faceapi.detectAllFaces(video).withFaceLandmarks().withFaceDescriptor(); detections.forEach(detection => { const bestMatch = faceMatcher.findBestMatch(detection.descriptor); console.log(bestMatch.toString()); });基本上就这些。只要权限允许，结合 getUserMedia 和 face-api.js，就能在网页中完成摄像头控制与人脸识别。关键是处理好模型加载、性能优化和用户隐私提示。不复杂但容易忽略细节。
