阶段 8 · 采集编码基础24 分钟
摄像头与麦克风：从权限到 MediaStream
getUserMedia、Constraints、Track 与生命周期
在明确点击后申请设备权限，查看 MediaStreamTrack 设置，并学习如何可靠停止采集。
LEARNING GOALS
先明确本课目标
1
用约束请求音视频 Track
2
读取 settings 与 capabilities
3
停止 Track 并释放摄像头和麦克风
MENTAL MODEL · 再建立心智模型
getUserMedia 不是拿到一段文件，而是取得一组持续产生数据的 Track；权限、设备和 Track 生命周期必须被产品明确管理。
MINIMAL EXAMPLE
为什么设备请求必须由界面明确触发？
摄像头和麦克风属于高敏感权限。getUserMedia 只能在安全上下文中使用，浏览器还会显示授权提示和设备占用指示，产品必须让请求意图可理解。
javascriptconst stream = await navigator.mediaDevices.getUserMedia({
video: { width: { ideal: 1280 } },
audio: false,
});
video.srcObject = stream;
// 使用结束后真正释放设备
stream.getTracks().forEach((track) => track.stop());- 声明媒体约束 ideal 是偏好，exact 会把条件变成必须满足。
- 绑定实时媒体流 srcObject 直接接收 MediaStream，不需要先生成 URL。
- 停止全部轨道 Track.stop 才会释放底层设备占用。
用户能主动开始和停止采集，界面也能展示当前真正活跃的 Track。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
音视频基础MediaStream由一条或多条实时音频/视频 Track 组成的流，可连接媒体元素、Web Audio、WebRTC 或 Recorder。音视频基础MediaStreamTrack实时媒体流中的单条音频或视频来源，具有约束、设置、mute/ended 状态和显式 stop 生命周期。音视频基础getUserMediaMediaDevices 请求摄像头或麦克风权限并按约束返回 MediaStream 的异步方法。音视频基础Constraints采集设备请求中的理想值、精确值和范围条件，例如分辨率、帧率、朝向或音频处理选项。音视频基础Permissions用户和浏览器授予网站访问摄像头、麦克风等敏感设备的许可状态；许可可被拒绝、撤销或限制到当前会话。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
做一个支持切换前后摄像头、显示设备状态并可一键释放资源的采集面板。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
约束是偏好与要求的组合
ideal 表示尽量满足，exact/min/max 可能让请求直接失败。先请求宽松能力，再依据 settings 调整体验通常更稳健。
停止元素不等于停止设备
清空 video.srcObject 只断开显示；要让系统真正释放摄像头指示灯，必须对每条 Track 调用 stop()。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
文件资源有确定边界，实时 Track 则持续产生数据并受外部设备影响。
WebGL
MediaStreamTrack 连接真实设备，受权限、拔插、静音与 stop 状态影响。
WebGPU
文件或 URL 可以重复加载、定位和缓存，生命周期主要由播放器控制。
把设备占用状态做成界面中的显式状态，不要把它隐藏在 video.srcObject 后面。