JavaScript通过MediaDevices API获取摄像头和麦克风权限，结合video、canvas、audio和MediaRecorder实现拍照与录音：getUserMedia请求设备授权并返回MediaStream；canvas截取video帧导出图片；MediaRecorder录制音视频Blob。
JavaScript 通过 MediaDevices API（主要是 navigator.mediaDevices.getUserMedia()）获取摄像头和麦克风权限，并结合 <video>、<canvas>、<audio> 和 MediaRecorder 等接口实现拍照与录音功能。核心在于正确请求设备、实时渲染流、截取帧或录制媒体数据。
获取摄像头和麦克风权限
调用 getUserMedia() 请求用户授权，传入约束对象指定所需设备：
- 只开摄像头：
{ video: true } - 只开麦克风：
{ audio: true } - 音视频都开：
{ video: true, audio: true }
注意必须在安全上下文（HTTPS 或 localhost）中运行，否则会拒绝访问。成功后返回一个 MediaStream 对象，可赋给 <video> 的 srcObject 播放预览：
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
const video = document.getElementById('video');
video.srcObject = stream;
})
.catch(err => console.error("访问设备失败：", err));
用 Canvas 实现拍照功能
将正在播放的 <video> 帧绘制到 <canvas> 上，再导出为图片（如 JPEG）：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 确保
<video>已加载元数据（监听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 不会弹窗，需引导用户手动开启设置。
