实时传输 Web 音频与视频
==============

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

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

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

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

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

自适应流
----

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

流式音频与视频的点播
----------

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

优点如下：

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

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

### HTTP

目前来说，HTTP 是媒体点播或直播最常使用的协议。

### RTMP

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

### RTSP

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

某些厂商实现了专有的传输协议，类似 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)
-----------

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

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

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

视频流文件格式
-------

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

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

### 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 框架或者使用一些类似 Flumotion (open source streaming software) 的东西。

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

### SHOUTcast

SHOUTcast 是一种跨平台的，针对流式媒体的专有技术。它由 Nullsoft 开发，可以播放 MP3 或 AAC 格式的数字音频内容。对于 Web 端使用，SHOUTcast 通过 HTTP 传输流。

**备注：** SHOUTcast 的 URL 可能需要加上分号.

### Icecast

Icecast 服务是一种针对流式媒体的开源技术。它由 Xiph.org Foundation 进行维护，通过 SHOUTcast 协议来传输 Ogg Vorbis/Theora 以及 MP3 和 AAC 格式。

**备注：** SHOUTcast 和 Icecast 是最流行的已确立的技术之一，但也有 更多流媒体系统可用.

### 流式服务

虽然你可以安装类似 GStreamer，SHOUTcast 和 lcecast 的软件，但也可以从 第三方流式服务 中找到大量的服务帮助你完成工作。

参见
--

* HTTP 实时流式传输
* HLS 浏览器支持
* 基于 HTTP Live Streaming 的 JavaScript 播放器
* HTTP Live Streaming 的基础知识
* 用于 HTML 5 视频的 DASH 自适应流
* HTTP 上的动态自适应流式传输 (MPEG-DASH)
* MPEG-DASH 媒体源演示
* DASH 参考客户端
* HTTP 上的动态流式传输
* MPEG-DASH 的部署状态
* 看，无需插件：使用媒体源扩展和 MPEG-DASH 实时流式传输到浏览器
* 媒体源扩展 (W3C)
* Icecast
* SHOUTcast
* GStreamer
* 通过 HTTP 流式传输 GStreamer 管道
* 在 web 上使用 GStreamer 传输媒体
* GStreamer 和树莓派
* 接受媒体源扩展 (MSE) 作为 W3C 候选推荐将加速 dash.js 的使用
* 流媒体系统对比
* Mozilla Hacks - 使用媒体源扩展 (MSE) 传输媒体