JavaScript通过MediaDevices.getUserMedia()获取本地摄像头视频流并绑定到video元素播放；Video API支持播放控制、元数据获取、状态监听、音视频轨道操作及Canvas/WebRTC协同处理。
JavaScript 通过 MediaDevices.getUserMedia() 获取视频流，再绑定到 <video></video> 元素播放；Video API 的核心功能包括控制播放、获取元数据、监听状态变化、处理音视频轨道和与 Canvas 互操作。
获取并显示本地摄像头视频流
调用 navigator.mediaDevices.getUserMedia({ video: true }) 请求用户授权，返回一个 Promise，解析后得到 MediaStream 对象。将其赋值给 <video></video> 元素的 srcObject 属性即可实时显示：
- 必须使用 HTTPS 或 localhost 环境，否则浏览器会拒绝访问摄像头
- 不要用
src+URL.createObjectURL()（已废弃），应直接设srcObject - 可加
autoplay和muted属性避免自动播放策略拦截
控制视频播放与状态监听
<video></video> 元素本身提供完整的播放控制接口：
-
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 不只是“放视频”，它把视频变成可编程的媒体对象——能取、能控、能截、能传。
