html5媒体捕获与流api是im音视频能力的底层基础，负责设备采集（getusermedia/getdisplaymedia）和流管理（预览、轨道控制、多路复用），需协同webrtc完成端到端传输，并支持语音录制、实时特效、弱网适配等增强功能。
HTML5 媒体捕获与流 API 是即时通讯（IM）中实现音视频能力的底层基础，它本身不提供“聊天”逻辑，但为实时音视频通话、屏幕共享、语音消息等核心功能提供了必要支撑。关键在于：媒体捕获负责“拿进来”，流 API 负责“传出去”和“送出来”，二者必须与信令、网络传输层（如 WebRTC）协同工作，才能构成完整的即时音视频链路。
媒体捕获：从设备获取原始流
即时通讯应用启动音视频功能的第一步，是调用 navigator.mediaDevices.getUserMedia() 请求用户授权访问摄像头和麦克风：
- 成功后返回一个
MediaStream对象，内含video和/或audio轨道，这是所有后续处理的源头； - 必须处理常见异常：用户拒绝权限（
NotAllowedError）、无可用设备（NotFoundError）、系统繁忙（OverconstrainedError）； - 可通过
MediaDevices.enumerateDevices()预先枚举摄像头/麦克风列表，支持设备切换（如前置/后置摄像头），提升用户体验； - 约束参数（如
{ width: 1280, height: 720, facingMode: "user" }）可控制分辨率、帧率、镜像等，影响带宽与画质平衡。
流管理：控制、处理与分发
拿到 MediaStream 后，即时通讯需灵活调度其生命周期和内容：
- 本地预览：直接赋值给
<video></video>元素的srcObject，实现毫秒级回显； - 轨道控制：调用
track.enabled = false可静音或关闭摄像头，比隐藏 video 元素更节省资源； - 多路复用：同一 stream 可同时用于本地预览、WebRTC 发送、Canvas 实时处理（如美颜、文字标注）；
- 屏幕共享：使用
getDisplayMedia()替代getUserMedia()，捕获整个窗口或标签页，常用于会议共享场景。
与 WebRTC 协同完成端到端传输
HTML5 流 API 不负责网络传输，它与 WebRTC 构成分工明确的协作关系：
-
getUserMedia()提供流 →RTCPeerConnection.addTrack()将轨道加入连接 → 远端通过ontrack事件接收新流； - 远端流到达后，同样通过
video.srcObject = event.streams[0]渲染，无需解码库； - 结合
captureStream()，可将已播放的视频（如录播回放、转码后画面）重新封装为 MediaStream，再推入 WebRTC 或录制，实现内容复用； - 流中断时，监听
track.onended或stream.oninactive，及时更新 UI（如显示“对方已关闭摄像头”）。
扩展能力：增强交互与兼容性
在基础捕获与传输之上，流 API 还支撑多种增强型 IM 功能：
-
语音消息录制：用
MediaRecorderAPI 将音频流编码为 Blob，再上传至服务器，替代传统文件上传； -
实时滤镜与特效：用
<canvas></canvas>+requestAnimationFrame逐帧读取 video 元素画面，叠加图形、模糊背景或人脸追踪； -
弱网适应：监听
RTCPeerConnection的iceConnectionState和connectionState，动态调整本地流的分辨率或禁用视频，保障音频通路； - HTTPS 强制要求：所有媒体捕获 API 仅在安全上下文（HTTPS 或 localhost）中可用，部署时必须确保协议合规。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
