HTML如何调用摄像头拍摄_媒体捕获API应用【进阶】

需用浏览器媒体捕获API实现摄像头调用：一、用getUserMedia获取视频流并绑定video；二、用canvas截帧转图片；三、用MediaRecorder录制视频；四、处理权限与设备异常；五、适配移动端横竖屏及镜像。

如果您希望在网页中直接调用用户设备的摄像头进行实时拍摄或视频流捕获，则需借助浏览器原生支持的媒体捕获API。以下是实现该功能的具体操作路径：

一、使用navigator.mediaDevices.getUserMedia()获取视频流

该方法是媒体捕获的核心接口，用于请求用户授权并获取摄像头（或麦克风）的媒体流。它返回一个Promise对象，在用户允许后提供MediaStream实例，可绑定至<video></video>元素进行预览。

1、在HTML中添加一个<video></video>标签，并设置autoplay和muted属性以确保自动播放（尤其在移动端）。

2、在JavaScript中调用navigator.mediaDevices.getUserMedia({ video: true })，传入约束对象指定仅启用视频轨道。

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

3、将返回的MediaStream赋值给<video></video>元素的srcObject属性，而非旧式src属性。

4、监听video元素的loadeddata事件，确认流已加载完成，此时可安全执行截图或录制操作。

二、通过Canvas截取当前帧生成图片

当视频流已在<video></video>中播放时，可利用<canvas></canvas>的drawImage()方法捕获某一时刻的画面，并导出为图像数据。

1、创建一个<canvas></canvas>元素，其宽高应与<video></video>显示区域一致，避免拉伸失真。

2、获取<canvas></canvas>的2D绘图上下文，调用context.drawImage(videoElement, 0, 0, canvas.width, canvas.height)绘制当前视频帧。

3、调用canvas.toDataURL('image/jpeg', 0.9)生成JPEG格式的Base64编码字符串，质量设为0.9以平衡清晰度与体积。

4、将生成的Data URL赋值给<img alt="HTML如何调用摄像头拍摄_媒体捕获API应用【进阶】" >元素的src属性，即可在页面中显示所拍照片。

三、使用MediaRecorder API录制视频片段

MediaRecorder接口允许将MediaStream实时编码为指定格式的视频文件，适用于短视频录制场景，无需依赖第三方库。

1、在获取MediaStream后，检查浏览器是否支持MediaRecorder构造函数，若不支持则降级提示用户。

标签： css javascript java html 编码 浏览器 safari ai ios 短视频 win stream