流媒体

所谓多媒体（Multimedia）是指多种内容形式 —— 文本、音频、视频、图片、动画等的组合。

所谓流媒体，就是指源源不断的由提供者产生，并持续的被终端用户接收、展示的多媒体，就像水流一样。现实世界中的媒体，有些天生就是流式的，例如电视、广播，另外一些则不是，例如书籍、CD。

流媒体技术关注的是如何传递媒体，而不是如何编码媒体，具体的实现就是各种流媒体协议。封装后的媒体比特流（容器格式）由流媒体服务器递送到流媒体客户端。流媒体协议可能对底层容器格式、编码格式有要求，也可能没有任何要求。

HTTP 实时流（HTTP Live Streaming），由苹果开发，基于 HTTP 协议

HLS 的工作原理是，把整个流划分成一个个较小的文件，客户端在建立流媒体会话后，基于HTTP 协议下载流片段并播放。客户端可以从多个服务器（源）下载流。

在建立会话时，客户端需要下载 Extended M3U (m3u8) 播放列表文件，其中包含了 MPEG-2 TS（Transport Stream）容器格式的视频的列表。在播放完列表中的文件后，需要再次下载m3u8，如此循环

在移动平台上支持较好，目前的 Android、iOS 版本都支持

重要缺点是高延迟（5s以上通常），要做到低延迟会导致频繁的缓冲（下载新片段）并对服务器造成压力，不适合视频监控

HLS 协议

实时消息协议

此协议实时性很好，需要 Flash 插件才能在客户端使用，但是Adobe已经打算在不久的将来放弃对Flash的支持了

支持 H.264 + AAC/MP3 编码的FLV容器格式的播放

分段（segmented）视频播放

基于 HTTP 的 FLV 低延迟实时流播放

兼容主流浏览器

资源占用低，可以使用客户端的硬件加速

开源项目 HTML5 FLV Player ，它支持在没有Flash插件的情况下，播放 Flash 的视频格式 FLV。此项目依赖于 MSE，支持以下特性：

RTMP 协议

RTSP是一个实时传输流协议，是一个应用层的协议

RTSP协议：负责服务器与客户端之间的请求与响应

RTP协议：负责传输媒体数据

RTCP协议：在RTP传输过程中提供传输信息

通常说的RTSP包括RTSP协议、RTP协议、RTCP协议

大部分浏览器没有对 RTSP 提供原生的支持

RTSP 协议

基于HTTP的动态自适应流，类似于 HLS，也是把流切分为很小的片段。DASH 为支持为每个片段提供多种码率的版本，以满足不同客户带宽

协议的客户端根据自己的可用带宽，选择尽可能高（避免卡顿、重新缓冲）的码率进行播放，并根据网络状况实时调整码率

类似于 HLS 的高延迟问题也存在。

MPEG-DASH

WebRTC 是一整套 API，为浏览器、移动应用提供实时通信（RealTime Communications）能力。它包含了流媒体协议的功能，但是不是以协议的方式暴露给开发者的

捕获客户端音视频，对应接口 MediaStream（也就是 getUserMedia）

音视频传输，对应接口 RTCPeerConnection

任意数据传输，对应接口 RTCDataChannel

WebRTC 主要有三个职责：

WebRTC 协议

流协议

流媒体

MSE扩展流 video/audio 元素的能力，允许你通过 JavaScript 来生成（例如从服务器抓取）媒体流供 video/audio 元素播放。

通过JavaScript 来构建媒体流，不管媒体是如何捕获的

处理自适应码流、广告插入、时间平移（time-shifting，回看）、视频编辑等应用场景

最小化 JavaScript 中处理媒体解析的代码

主要功能及作用：

MSE 定义支持的（你生成的）媒体格式，只有符合要求的容器格式、编码格式才能被 MSE 处理。通常容器格式是 ISO BMFF（MP4），也就是说你需要生成 MP4 的片断，然后 Feed 给MSE 进行播放。

MediaSource 对象作为 video/audio 元素的媒体来源，它可以具有多个 SourceBuffer 对象。应用程序把数据片段（segment）附加到 SourceBuffer 中，并可以根据系统性能对数据片段的质量进行适配。SourceBuffer 中包含多个 track buffer —— 分别对应音频、视频、文本等可播放数据。

Media Source Extensions（媒体源扩展）

HTML5 原生仅支持播放 mp4/webm 格式，是不支持 FLV格式的。

而flv.js就是利用html5的video标签将http-flv直播流实时播放的一个js版的播放器。

什么是flv.js

flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

兼容目前的直播方案：目前大多数直播方案的音视频服务都是采用FLV容器格式传输音视频数据。

flv格式简单，相比于MP4格式转封装简单、性能上也占优势，解析起来更快更方便。

flv.js 从服务器获取FLV再解封装后转给Video标签的原因如下：

flv.js原理

理论上只要是支持Media Source Extensions和ECMAScript 5的浏览器都是兼容flv.js的

兼容性

flv.js

流媒体（MSE，Flv.js）