HTML5通过MediaStream API可直接调用摄像头：先用navigator.mediaDevices.getUserMedia({video:true})获取流并赋给video.srcObject，再用canvas逐帧绘制处理；需处理权限异常、复用流、设置约束参数，并注意HTTPS和移动端autoplay/muted要求。

在HTML5中，通过MediaStream API（尤其是navigator.mediaDevices.getUserMedia()）可以轻松实现摄像头画面的实时捕获，无需插件，兼容现代主流浏览器。

获取摄像头权限并启动视频流

需先请求用户授权访问媒体设备，成功后获得一个MediaStream对象，可直接赋给<video>元素播放：

• 调用navigator.mediaDevices.getUserMedia({ video: true })，返回Promise；
• 将返回的stream设为video.srcObject（注意：不是src属性）；
• 务必处理拒绝权限或设备不可用的异常（如NotAllowedError、NotFoundError）。

在Canvas中实时捕获帧图像

若需对画面做处理（如截图、人脸识别、滤镜），可用<canvas>逐帧绘制视频流：

• 获取video元素的当前画面尺寸，设置canvas.width/canvas.height；
• 使用ctx.drawImage(video, 0, 0, canvas.width, canvas.height)绘制；
• 配合requestAnimationFrame循环调用，实现约60fps的实时捕获；
• 如需保存某帧，调用canvas.toDataURL('image/png')或canvas.toBlob()。

控制与优化常见要点

实际使用中需关注稳定性与性能：

立即学习“前端免费学习笔记（深入）”；

• 避免重复调用getUserMedia，应复用已有stream，关闭时调用stream.getTracks().forEach(track => track.stop())；
• 可传入约束对象指定分辨率、帧率等，例如{ video: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { max: 30 } } }；
• 移动端注意添加autoplay和muted属性（尤其iOS Safari），否则可能无法自动播放；
• 部分浏览器要求页面运行在HTTPS或localhost下才能启用摄像头。

不复杂但容易忽略。