JavaScript通过MediaDevices.getUserMedia()获取本地摄像头视频流并绑定到video元素播放;Video API支持播放控制、元数据获取、状态监听、音视频轨道操作及Canvas/WebRTC协同处理。

JavaScript 通过 MediaDevices.getUserMedia() 获取视频流,再绑定到 元素播放;Video API 的核心功能包括控制播放、获取元数据、监听状态变化、处理音视频轨道和与 Canvas 互操作。
获取并显示本地摄像头视频流
调用 navigator.mediaDevices.getUserMedia({ video: true }) 请求用户授权,返回一个 Promise,解析后得到 MediaStream 对象。将其赋值给 元素的 srcObject 属性即可实时显示:
- 必须使用 HTTPS 或 localhost 环境,否则浏览器会拒绝访问摄像头
- 不要用
src+URL.createObjectURL()(已废弃),应直接设srcObject - 可加
autoplay和muted属性避免自动播放策略拦截
控制视频播放与状态监听
元素本身提供完整的播放控制接口:
-
play()/pause()启动或暂停播放 -
currentTime读写当前播放时间(秒) -
volume、muted控制音量与静音 - 监听
loadedmetadata(元数据就绪)、canplay(可播放)、timeupdate(时间变化)、ended(播放结束)等事件
操作音视频轨道与流控制
从 MediaStream 可获取音视频轨道(getVideoTracks()、getAudioTracks()),支持动态启停、切换设备或添加处理:
立即学习“Java免费学习笔记(深入)”;
-
track.enabled = false可静音或关闭摄像头(不中断流,仅停止传输) -
getSettings()查看轨道实际参数(如分辨率、帧率) - 用
MediaStreamTrack.applyConstraints()动态调整采集参数(如强制 720p) - 多个流可用
new MediaStream([track1, track2])合并
与 Canvas 和 WebRTC 协同处理
视频流可作为图像源进行实时处理:
- 用
canvas.getContext('2d').drawImage(video, 0, 0)每帧捕获画面,做滤镜、识别人脸等 - 结合
captureStream()方法将 Canvas 转为可传输的MediaStream(用于录屏或推流) - 在 WebRTC 场景中,该流可传给
RTCPeerConnection.addTrack()发送给远端
Video API 不只是“放视频”,它把视频变成可编程的媒体对象——能取、能控、能截、能传。










