第 2 章 媒体采集

第 2 章 · 媒体采集

章节摘要：这是接通的第一道关。通话质量的上限在按下呼叫键之前就决定了：约束参数写错了，带宽再充裕也传不出清晰画面；权限被拒没有降级预案，用户直接流失；设备中途拔插没接住事件，通话就断在半路。本章把「从设备拿到一条可靠轨道」涉及的采集约束、屏幕共享、轨道生命周期三件事一次讲透，让你写出的采集代码经得起真实用户环境的折腾。

学习目标

读完本章，你应当能够：

1. 用 getUserMedia 的约束语法精确声明所需的分辨率、帧率与设备，并写出理想值与兜底值两级配置；
2. 区分 NotAllowedError、NotFoundError、NotReadableError 等采集错误，并针对每种给出对应的用户提示与降级动作；
3. 用 getDisplayMedia 实现屏幕共享，处理系统取消选择、音频采集、窗口切换等边界情况；
4. 从 canvas 或 media 元素生成媒体轨道，用于虚拟背景、水印、混流等进阶场景；
5. 实现麦克风静音与摄像头关闭的正确姿势，避免「静音后指示灯还亮着」这类信任事故；
6. 用 replaceTrack 完成设备热切换与码流无缝替换，通话全程不掉线；
7. 监听 track 的 ended 与设备变更事件，接住用户中途拔掉耳机的场景。

核心概念速览

采集层的核心对象是 MediaStreamTrack：摄像头产一条 video 轨，麦克风产一条 audio 轨，屏幕共享也各产一条。约束（constraints）是应用与浏览器之间的合同——你声明想要什么，浏览器尽力满足并回报实际给了什么。整章的知识都围绕「轨道从哪来、约束怎么谈、轨道怎么管」展开。

一句金句：采集代码的功力不在「能打开摄像头」，而在打开失败的那五种分支里，每一种都让用户知道下一步该干嘛。

子章节导航

2.1 getUserMedia 与约束参数——采集的主干道。约束对象的精确语法、ideal 与 max 的语义差异、能力检测与实际值回读，以及一套可复用的「理想配置加逐级降级」采集流程，附完整错误分支处理代码。

2.2 屏幕共享与特殊媒体源——采集的另一扇门。getDisplayMedia 的系统交互与权限模型、屏幕音频的采集条件、取消选择与动态换窗的处理；再用 canvas 与 media 元素造出自定义轨道，打通虚拟背景与特效叠加的路。

2.3 轨道管理与设备热切换——采集的售后服务。enabled 与停止轨道的本质区别、静音与关摄像头的正确姿势、replaceTrack 无缝换流、耳机拔插与设备枚举监听，把通话生命周期内的所有「意外」都接住。

子章节之间的逻辑关系

本章三节按「拿到轨道、拿到特殊轨道、管住轨道」递进，对应轨道生命周期的时间轴：

  2.1 约束采集            2.2 特殊媒体源           2.3 运行期管理
  ┌───────────────┐    ┌───────────────┐    ┌───────────────┐
  │ 约束语法与降级 │    │ 屏幕 画布 元素 │    │ 静音与停止     │
  │ 错误分支处理   │───▶│ 自定义轨道制造 │───▶│ 热切换与替换   │
  │ 能力回读       │    │ 权限边界       │    │ 设备变更监听   │
  └───────────────┘    └───────────────┘    └───────────────┘
     轨道从哪来            轨道的变体            轨道的后半生
​

2.1 是主干：任何采集最终都归约为「约束进入、轨道流出」。2.2 换了入口但复用同一条主干，屏幕轨道与摄像头轨道在后续链路里毫无区别。2.3 处理轨道拿到之后的事——它在时间上覆盖前两节，因为静音、替换、拔插可以发生在通话的任何时刻。

前置知识与后续延伸

前置：需要 1.2 节的轨道概念与 1.3 节的接力流程图，知道轨道是流经整条链路的通用货币。不需要任何音频处理背景，回声消除等浏览器内部机制只在涉及处点到为止。

后续：本章产出的轨道将在第 3 章被塞进 addTrack 进入协商，轨道的方向与数量直接塑造 SDP 的媒体行；2.3 的 replaceTrack 技巧在第 6 章的动态降级里会再登场——降码率最干脆的实现就是换一条低分辨率轨道。学完本章建议动手做一件事：给自己的页面写一个采集诊断面板，把设备列表、权限状态、实际生效的分辨率帧率全部展示出来，后续调试全程用得上。