实时传输 Web 音频与视频

实时流技术经常应用在一些现场输出的转播活动，类似体育活动、演唱会和更平常的电视播放及广播节目。这通常称为流媒体，实时流就是将媒体“实时”传输到计算机和设备的过程。这是一个包含多个元素的、非常复杂且较为新生的主题，所以我们会通过这篇文章，向你介绍它并让你知道如何开始。

将媒体传输到浏览器的关键考虑因素是，我们不是在播放一个大小明确的文件，而是在转播一个即时创建的文件，并且它没有预先确定的开始或结束位置。

流媒体与静态媒体的主要区别

在这里，无论是 mp3 还是 WebM 文件，我们都称之为静态媒体。这些文件存放在服务端，可以像其他文件那样传输到浏览器端。这通常被称为渐进式下载。

跟静态媒体文件比起来，实时流媒体没有有限的开始和结束时间，它通常是一种自适应的、从服务端向下传输到浏览器端的数据流（见下文）。通常我们需要不同格式和特定的服务端软件来实现这个。

自适应流

实时流最优先考虑的事项之一就是让播放器保持与流同步：自适应流是一种可以在低带宽下执行此操作的技术。这种方法就是通过监控数据传输速率，如果速率慢，跟不上，我们就降低到低带宽（因此质量较低）的数据流。为了拥有这种能力，我们需要使用能实现该功能的数据格式。实时流格式通常是把流分割成许多不同质量和比特率的小片段，以此来实现自适应流的特性。

流式音频与视频的点播

流式技术不只是用于直播。它也能用来替换传统的渐进式下载点播音频和视频：

优点如下：

延迟通常较低，所以媒体可以快速播放
自适应流可以在不同设备上获得更好的体验
媒体实时下载，提高带宽效率

流式协议

静态媒体通常是使用 HTTP 协议传输，但是自适应流媒体却有很多种协议，让我们看一下这些选择。

RTMP

实时消息协议 (RTMP) 是由 Macromedia（即现在的 Adobe）公司研发的专有协议，并且它支持 Adobe Flash 插件。RTMP 共有 RTMPE（加密的）、RTMPS（基于 SSL/TLS 的安全协议）和 RTMPT（封装成 HTTP 请求）这几种形式

RTSP

备注：实时流协议 (RTSP) 控制媒体在两端传输的会话，且同时使用实时传输协议 (RTP) 和实时控制协议 (RTCP) 来传输媒体流。将 RTP 与 RTCP 结合使用可以实现自适应流。目前大部分浏览器还无法原生支持。

某些厂商实现了专有的传输协议，类似 RealNetworks 以及他们的真实数据传输 (RDT)。

RTSP 2.0

RTSP 2.0 目前处于开发阶段，并且无法向后兼容 RTSP 1.0。

警告：虽然 <audio> 与 <video> 标签与协议无关，但是目前没有浏览器可以在无插件的情况下支持除了 HTTP 外的协议，尽管这种局面可能会有所转变，但除了 HTTP 以外的协议可能会被防火墙或代理服务器拦截。

使用流式协议

如果你习惯于通过 HTTP 传输媒体，那么使用其他的协议也会让你感到熟悉。

举个例子：

html

<video src="rtsp://myhost.com/mymedia.format">
  <!-- Fallback here -->
</video>

媒体源扩展（MSE）

媒体源扩展是一个 W3C 的工作草案，计划用来扩展 HTMLMediaElement 使其支持使用 JavaScript 来生成用于播放的媒体流。使用 JavaScript 来生成流对于自适应流和时移实时流来说非常好用。

比如，在卸载 MSE 解码器后，你可以通过 JavaScript 实现 MPEG-DASH.

备注：时移是在直播流发生后使用实时流的过程。

视频流文件格式

一些基于 HTTP 的实时流视频格式开始得到跨浏览器支持。

备注：你可以通过设置自适应流媒体源找到在 web 中使用的 HLS 和 MPEG-DASH 的编码指南。

DASH 意即基于 HTTP 的动态自适应流，最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE)，这些扩展被DASH.js之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块，并且将它“添加”到 <video>元素正在播放的流中。正因如此，如果我们检测到网络缓慢，我们可以从下一段开始请求低质量（较小）的数据块。这种技术也允许添加广告片段到流中。

备注：你也可以将 MPEG-DASH 自适应流式系统与 WebM 一起使用。

HLS

HLS(HTTP Live Streaming) 是由苹果公司研发的协议，支持在 IOS、Safari 及安卓上最新版本的浏览器/Chrome 浏览器。HLS 也是自适应的。

HLS 也能被 JavaScript 解码，这意味着我们能在最新版本的 Firefox，Chrome 和 IE10+ 浏览器上使用。看这个 HTTP Live Streaming JavaScript player.

在流式会话的开始阶段， extended M3U (m3u8) playlist 已经下载完成。它包含了所提供的各个子流的元数据。

流式文件格式支持

Browser	DASH	HLS	Opus (Audio)
Firefox 32	✓ [1]	✓ [2]	✓ 14+
Safari 6+		✓
Chrome 24+	✓ [1]	✓
Opera 20+	✓ [1]
Internet Explorer 10+	✓ 11	✓ [2]
Firefox Mobile	✓	✓	✓
Safari iOS6+		✓
Chrome Mobile	✓	✓ [2]
Opera Mobile	✓ [1]	✓
Internet Explorer Mobile	✓ 11	✓ [2]
Android	✓

[1] 使用 JavaScript 与 MSE

[2] 使用 JavaScript 与跨域代理

视频备选方案

DASH 与 HLS 可以在很大一部分主流浏览器上获得支持，但我们仍需要备选方案来支持其余的浏览器。

一个流行的方案是通过 Flash 播放器来支持 RTMP。当然，这就有个问题，我们需要编码三个不同的格式。

音频流文件格式

目前也有一些音频格式开始在不同浏览器上获得支持。

Opus

Opus 是一个无版权的开放格式，针对不同类型文件使用不同的比特率来优化音频质量。音乐或演讲会可以通过不同方式来优化，Opus 就借助了 SILK 和 CELT 来实现。

目前，Opus 被桌面端和移动端的 Firefox 以及桌面端的 Chrome 和 Opera 浏览器所支持。

备注：对于浏览器端实现 WebRTC 功能来说，Opus 是必须要用到的格式。

MP3, AAC, Ogg Vorbis

大部分通用的音频格式能够通过特殊的服务端技术进行传输。

备注：相对于视频来说，音频没有键帧，可能更容易通过非流式格式来传输。

服务端流式技术

为了实时传输音频和视频，你需要在你的服务器上运行特定的流式软件，或者使用第三方服务。

GStreamer

GStreamer 是一个开源的跨平台的多媒体框架，它可以让你创建各种媒体处理组件，包括流式组件。GStreamer 通过它的插件系统，支持了一百多种编码 (包括 MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV，和 FLV。)

GStreamer 的插件如 souphttpclientsink 和 shout2send 通过 HTTP 来传输媒体。你也可以集成 Python 的 Twisted 框架。

至于传输 RTMP，你可以使用 Nginx RTMP Module。