Media Streams API - 提供对流式音频和视频数据的支持

Media Capture and Streams API，通常称为 Media Streams API 或 MediaStream API，是与 WebRTC 相关的 API，它提供对流式音频和视频数据的支持。

它提供了用于处理流及其组成轨道的接口和方法、与数据格式相关的约束、异步使用数据时的成功和错误回调以及在此过程中触发的事件。

概念和用法

API 基于对 MediaStream 对象的操作，该对象表示音频或视频相关数据的流量。请参阅 获取视频 中的实例。

MediaStream 由零个或多个 MediaStreamTrack 对象组成，代表各种音频或视频轨道。每个 MediaStreamTrack 可能有一个或多个通道。通道表示媒体流的最小单位，例如与给定扬声器关联的音频信号，例如立体声音轨中的左声道或右声道。

MediaStream 对象有一个输入和一个输出。由 getUserMedia() 生成的 MediaStream 对象称为本地，并将用户的相机或麦克风其中一个作为其源输入。非本地 MediaStream 可能表示一个媒体元素，如 <video> 或 <audio>，它是一个来自网络并通过 WebRTC RTCPeerConnection API 获取的流 ，或使用 Web Audio API MediaStreamAudioSourceNode 创建的流。

MediaStream 对象的输出链接到 consumer。它可以是媒体元素，例如 <audio> 或 <video>、WebRTC RTCPeerConnection API 或 Web Audio API MediaStreamAudioSourceNode。

接口

在这些参考文章中，您将找到您需要了解的有关构成 Media Capture 和 Streams API 的每个接口的基本信息。

• BlobEvent
• CanvasCaptureMediaStreamTrack
• InputDeviceInfo
• MediaDeviceKind
• MediaDeviceInfo
• MediaDevices
• MediaStream
• MediaStreamConstraints
• MediaStreamEvent
• MediaStreamTrack
• MediaStreamTrackEvent
• MediaTrackCapabilities
• MediaTrackConstraints
• MediaTrackSettings
• MediaTrackSupportedConstraints
• NavigatorUserMedia
• NavigatorUserMediaError
• OverconstrainedError
• URL

Media Capture 和 Streams API 规范的早期版本包括单独的 AudioStreamTrack 和 VideoStreamTrack 接口 —— 两个接口都基于 MediaStreamTrack —— 它们表示这些类型的流。这些不再存在，您应该更新任何现有代码以直接使用 MediaStreamTrack。

事件

• addtrack
• ended
• muted
• overconstrained
• removetrack
• started
• unmuted

指南和教程

以下文章提供了额外的指导和操作方法信息，可帮助您学习使用 API，以及如何执行您可能希望处理的特定任务。

功能、约束和设置

本文讨论了约束和能力的双重概念，以及媒体设置，并包括一个我们称之为实例约束练习器的示例。约束练习器可让您试验不同约束集的结果，这些约束集应用于来自计算机 A/V 输入设备（如网络摄像头和麦克风）的音频和视频轨道。

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	55 21webkit	12 79webkit	15	不支持	42 15webkit	11
MediaStream() 构造函数	55 21webkit	12 79webkit	44	不支持	42 15webkit	11
active	42	12	52	不支持	29	11
active 事件	42	12	不支持	不支持	29	不支持
addTrack	26	12	44	不支持	不支持	11
addtrack 事件	26	12	50	不支持	不支持	11
clone	35	12	48	不支持	22	11
getAudioTracks	26	12	221	不支持	15	11
getTrackById	26	12	49	不支持	不支持	11
getTracks	38	12	34	不支持	25	11
getVideoTracks	26	12	222	不支持	15	11
id	26	12	41	不支持	15	11
inactive 事件	42	12	不支持	不支持	29	不支持
removeTrack	26	12	44	不支持	15	11
removetrack 事件	26	12	72 59 — 723	不支持	不支持	11
stop	29 — 47	13 — 79	不支持	不支持	不支持	不支持

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	55 4.4webkit	55 25webkit	未知	15	未知	42 14webkit	11
MediaStream() 构造函数	55 4.4webkit	55 25webkit	未知	42	未知	42 14webkit	11
active	42	42	未知	52	未知	29	11
active 事件	42	42	未知	不支持	未知	29	不支持
addTrack	37	26	未知	不支持	未知	不支持	11
addtrack 事件	4.4	26	未知	50	未知	不支持	11
clone	37	35	未知	48	未知	22	11
getAudioTracks	37	26	未知	221	未知	不支持	11
getTrackById	37	26	未知	49	未知	不支持	11
getTracks	38	38	未知	34	未知	25	11
getVideoTracks	37	26	未知	222	未知	不支持	11
id	4.4	26	未知	41	未知	14	11
inactive 事件	42	42	未知	不支持	未知	29	不支持
removeTrack	37	26	未知	44	未知	不支持	11
removetrack 事件	4.4	26	未知	79 59 — 793	未知	不支持	11
stop	4.4 — 47	29 — 47	未知	不支持	未知	不支持	不支持

1. Before Firefox 64, this method returned an array of AudioStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.

2. Before Firefox 64, this method returned an array of VideoStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.

3. Before Firefox 72, the event handler was exposed but had no effect.

相关链接

• WebRTC - API 介绍页面
• mediaDevices.getUserMedia()
• 使用 WebRTC 拍摄静态照片：关于使用 getUserMedia() 的演示和教程。