javascript怎样操作媒体设备_如何实现拍照录音功能

JavaScript通过MediaDevices API获取摄像头和麦克风权限，结合video、canvas、audio和MediaRecorder实现拍照与录音：getUserMedia请求设备授权并返回MediaStream；canvas截取video帧导出图片；MediaRecorder录制音视频Blob。

JavaScript 通过 MediaDevices API（主要是 navigator.mediaDevices.getUserMedia()）获取摄像头和麦克风权限，并结合 、、 和 MediaRecorder 等接口实现拍照与录音功能。核心在于正确请求设备、实时渲染流、截取帧或录制媒体数据。

获取摄像头和麦克风权限

调用 getUserMedia() 请求用户授权，传入约束对象指定所需设备：

• 只开摄像头：{ video: true }
• 只开麦克风：{ audio: true }
• 音视频都开：{ video: true, audio: true }

注意必须在安全上下文（HTTPS 或 localhost）中运行，否则会拒绝访问。成功后返回一个 MediaStream 对象，可赋给 的 srcObject 播放预览：

示例：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const video = document.getElementById('video');
    video.srcObject = stream;
  })
  .catch(err => console.error("访问设备失败：", err));

用 Canvas 实现拍照功能

将正在播放的 帧绘制到 上，再导出为图片（如 JPEG）：

• 确保 已加载元数据（监听 loadedmetadata 事件）
• 设置 canvas 宽高与视频实际尺寸一致（用 video.videoWidth / video.videoHeight）
• 用 ctx.drawImage(video, 0, 0) 捕获当前画面
• 调用 canvas.toDataURL('image/jpeg') 获取 base64 图片，或用 canvas.toBlob() 获取二进制 Blob

可绑定按钮点击触发拍照，生成图片后显示或上传。

使用 MediaRecorder 实现录音/录像

MediaRecorder 是专用于录制 MediaStream 的接口，比手动处理音频数据更简洁可靠：

• 创建实例：const recorder = new MediaRecorder(stream);
• 监听 dataavailable 事件收集 Blob 片段
• 调用 start() 开始录制，stop() 结束（也可设时长自动停止）
• 合并所有 Blob 得到完整媒体文件（如 WebM 音频或视频）

录音时建议仅请求 { audio: true }；录像则用 { video: true, audio: true }。录制结果可下载、播放或上传至服务器。

注意事项与兼容性提示

部分旧浏览器（如 IE）不支持 MediaDevices，需检查是否存在：if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)。移动端需注意：

• iOS Safari 11+ 支持，但可能默认禁用麦克风自动播放，需用户交互后才允许录音
• 安卓 Chrome 一般支持良好，但某些定制系统可能限制后台录音
• 拍照时若设备旋转，canvas 绘制需适配 video.videoWidth/video.videoHeight 而非 CSS 尺寸

权限被拒绝后，再次调用 getUserMedia 不会弹窗，需引导用户手动开启设置。