HTML5 MediaStream API支持浏览器直接访问摄像头和麦克风，实现视频预览、截图、录像等功能；需在HTTPS或localhost下运行，正确请求权限、创建流、绑定video元素，并妥善释放资源。
HTML5 的 MediaStream API 让浏览器直接访问摄像头和麦克风成为可能，无需插件即可实现视频预览、截图、录像等实时媒体操作。核心在于正确请求设备权限、创建媒体流、绑定到 <video> 元素，并按需处理帧数据。
获取用户摄像头权限并显示实时预览
调用 navigator.mediaDevices.getUserMedia() 请求视频流，成功后将其赋值给 <video> 元素的 srcObject 属性即可播放：
- 必须在 HTTPS 或本地环境（
localhost）下运行，否则现代浏览器会拒绝访问媒体设备 - 推荐显式指定约束条件，例如
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }，避免默认分辨率过低或过高 - 记得捕获拒绝错误（如用户点击“拒绝”），并提供友好提示，而不是让页面静默失败
从视频流中截取单帧图像（拍照）
利用 <canvas> 绘制当前视频帧，再调用 toDataURL() 或 toBlob() 获取图像数据：
- 确保
<video>已开始播放（监听loadeddata或检查video.readyState >= 2），否则 canvas 可能为空白 - 使用
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)拉伸或裁剪适配画布尺寸，注意保持宽高比以防变形 -
toBlob()比toDataURL()更节省内存，适合频繁截图或大尺寸图像
录制视频并导出为文件
借助 MediaRecorder API 可将媒体流录制为 WebM 或 MP4（取决于浏览器支持）：
立即学习“前端免费学习笔记（深入）”；
- 创建实例时传入流对象和可选 mimeType（如
'video/webm;codecs=vp9'），部分浏览器对 MP4 支持有限，建议优先用 WebM - 监听
dataavailable事件收集Blob片段，结束录制后合并为完整文件 - 录制期间可动态暂停/恢复，但不支持精确剪辑；如需高级编辑，需结合 WebAssembly 或服务端处理
释放资源与异常处理
媒体流持续运行会占用摄像头、影响其他应用，务必在不需要时主动停止：
- 遍历流中的所有轨道（
stream.getTracks()），对每个调用track.stop() - 清除
<video>的srcObject（设为null），防止内存泄漏 - 监听
devicechange事件，在用户插拔摄像头时重新枚举设备，提升体验一致性
