分享 | 刘博(又拍云多媒体开发工程师)
又小拍:
如何实现HTML5直播技术是直播创业团队一直想要攻克的难题。12月1日20:00,深度参与“又拍直播云”开发的工程师刘博就如何利用WebSocket+MSE实现HTML5直播在微信群里进行了分享。小拍马不停蹄将刘博的分享内容整理成了文字,并插入一些PPT便于大家了解。全文整理如下:
下面就是分享内容啦~
当前为了满足比较火热的移动Web端直播需求,一系列的HTML5直播技术迅速的发展起来。
常见的可用于HTML5的直播技术有HLS、WebSocket与WebRTC。今天我向大家介绍WebSocket与MSE相关的技术要点,并在最后通过一个实例来展示具体用法。
通常的Web应用都是围绕着HTTP的请求/响应模型构建的。所有的HTTP通信都通过客户端来控制,由客户端向服务器发出一个请求,服务器接收和处理完毕后再返回结果给客户端,客户端将数据展现出来。由于这种模式不能满足实时应用需求,于是出现了SSE、Comet等 "服务器推" 的长连接技术。
WebSocket是基于TCP连接之上的通信协议,可以在单个TCP连接上进行全双工的通信。WebSocket在2011年被IETF定为标准RFC 6455,并被RFC 7936补充规范,WebSocket API被W3C定为标准。
WebSocket是独立地创建在TCP上的协议,HTTP协议中的那些概念都和WebSocket没有关联,唯一关联的是使用HTTP协议的101状态码进行协议切换时,使用的TCP端口是80,可以绕过大多数防火墙的限制。
为了更方便地部署新协议,HTTP/1.1引入了Upgrade机制,使得客户端和服务端之间可以借助已有的HTTP语法升级到其它协议。这个机制在RFC7230的6.7 Upgrade一节中有详细描述。
要发起HTTP/1.1协议升级,客户端必须在请求头部中指定这两个字段 ▽
Connection: Upgrade
Upgrade: protocol-name[/protocol-version]
如果服务端同意升级,那么需要这样响应 ▽
HTTP/1.1 101 Switching Protocols
Connection: upgrade
Upgrade: protocol-name[/protocol-version]
[... data defined by new protocol ...]
可以看到,HTTP Upgrade响应的状态码是101,并且响应正文可以使用新协议定义的数据格式。
WebSocket握手就利用了这种HTTP Upgrade机制。一旦握手完成,后续数据传输直接在TCP上完成。
目前主流的浏览器提供了WebSocket的API接口,可以发送消息(文本或者二进制)给服务器,并且接收事件驱动的响应数据。
Step1. 检查浏览器是否支持WebSocket
if(window.WebSocket) {
// WebSocket代码
}
Step2. 建立连接
var ws = new WebSocket('ws://localhost:8327');
Step3. 注册回调函数以及收发数据
分别注册WebSocket对象的onopen、onclose、onerror以及onmessage回调函数。
通过ws.send()来进行发送数据,这里不仅可以发送字符串,也可以发送Blob或ArrayBuffer类型的数据。
如果接收的是二进制数据,需要将连接对象的格式设为blob或arraybuffer。
ws.binaryType = 'arraybuffer';
服务器端WebSocket库我推荐使用Google自己的golang.org/x/net/websocket,可以非常方便的与net/http一起使用。也可以将WebSocket的handler function通过websocket.Handler转换成http.Handler,这样就可以跟net/http库一起使用了。
然后通过websocket.Message.Receive来接收数据,通过websocket.Message.Send来发送数据。
具体代码可以看下面的Demo部分。
在介绍MSE之前,我们先看看HTML5
MSE是解决HTML5的流问题。
Media Source Extensions(MSE)是Chrome、Safari、Edge等主流浏览器支持的一个新的Web API。MSE是一个W3C标准,允许JavaScript动态构建
通过caniuse来检查是否浏览器支持情况。
通过MediaSource.isTypeSupported()可以进一步地检查codec MIME类型是否支持。
比较常用的视频封装格式有WebM和fMP4。
WebM和WebP是两个姊妹项目,都是由Google赞助的。由于WebM是基于Matroska的容器格式,天生是流式的,很适合用在流媒体领域里。
下面着重介绍一下fMP4格式。
我们都知道MP4是由一系列的Boxes组成的。普通的MP4的是嵌套结构的,客户端必须要从头加载一个MP4文件,才能够完整播放,不能从中间一段开始播放。
而fMP4由一系列的片段组成,如果服务器支持byte-range请求,那么,这些片段可以独立的进行请求到客户端进行播放,而不需要加载整个文件。
为了更加形象的说明这一点,下面我介绍几个常用的分析MP4文件的工具。
gpac,原名mp4box,是一个媒体开发框架,在其源码下有大量的媒体分析工具,可以使用testapps;
下面是一个fragment mp4文件通过 mp4parser(http://mp4parser.com )分析后的截图 ▽
下面是一个non-fragment mp4文件通过mp4parser分析后的截图 ▽
我们可以看到non-fragment mp4的最顶层box类型非常少,而fragment mp4是由一段一段的moof+mdat组成的,它们已经包含了足够的metadata信息与数据, 可以直接seek到这个位置开始播放。也就是说fMP4是一个流式的封装格式,这样更适合在网络中进行流式传输,而不需要依赖文件头的metadata。
Apple在WWDC 2016大会上宣布会在iOS 10、tvOS、macOS的HLS中支持fMP4,可见fMP4的前景非常的好。
值得一提的是,fMP4、CMAF、ISOBMFF其实都是类似的东西。
MSE JavaScript API
从高层次上看,MSE提供了
一套 JavaScript API 来构建 media streams
一个拼接和缓存模型
识别一些 byte 流类型:
WebM
ISO Base Media File Format
MPEG-2 Transport Streams
MSE本身的设计是不依赖任务特定的编解码和容器格式的,但是不同的浏览器支持程度是不一样的。
可以通过传递一个MIME类型的字符串到静态方法:
MediaSource.isTypeSupported来检查。比如 ▽
MediaSource.isTypeSupported('audio/mp3'); // false
MediaSource.isTypeSupported('video/mp4'); // true
MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true
获取Codec MIME string的方法可以通过在线的 mp4info,或者使用命令行mp4info test.mp4 | grep Codecs,可以得到类似如下结果 ▽
mp4info fmp4.mp4| grep Codec
Codecs String: mp4a.40.2
Codecs String: avc1.42E01E
当前,H.264 + AAC的MP4容器在所有的浏览器都支持。
普通的MP4文件是不能和MSE一起使用的, 需要将MP4进行fragment化。
检查一个MP4是否已经fragment的方法 ▽
mp4dump test.mp4 | grep "[m"
如果是non-fragment会显示如下信息 ▽
mp4dump nfmp4.mp4 | grep "[m"
[mdat] size=8+50873
[moov] size=8+7804
[mvhd] size=12+96
[mdia] size=8+3335
[mdhd] size=12+20
[minf] size=8+3250
[mdia] size=8+3975
[mdhd] size=12+20
[minf] size=8+3890
[mp4a] size=8+82
[meta] size=12+78
如果已经fragment,会显示如下的类似信息 ▽
mp4dump fmp4.mp4 | grep "[m" | head -n 30
[moov] size=8+1871
[mvhd] size=12+96
[mdia] size=8+312
[mdhd] size=12+20
[minf] size=8+219
[mp4a] size=8+67
[mdia] size=8+371
[mdhd] size=12+20
[minf] size=8+278
[mdia] size=8+248
[mdhd] size=12+20
[minf] size=8+156
[mdia] size=8+248
[mdhd] size=12+20
[minf] size=8+156
[mvex] size=8+144
[mehd] size=12+4
[moof] size=8+600
[mfhd] size=12+4
[mdat] size=8+138679
[moof] size=8+536
[mfhd] size=12+4
[mdat] size=8+24490
[moof] size=8+592
[mfhd] size=12+4
[mdat] size=8+14444
[moof] size=8+312
[mfhd] size=12+4
[mdat] size=8+1840
[moof] size=8+600
把一个non-fragment MP4转换成fragment MP4。
可以使用FFmpeg的 -movflags来转换。
对于原始文件为非MP4文件 ▽
ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4
对于原始文件已经是MP4文件 ▽
ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4
或者使用mp4fragment ▽
mp4fragment input.mp4 output.mp4
刘博在分享的最后阶段,展示了两个demo,分别是MSE Vod Demo、MSE Live Demo
MSE Vod Demo
展示利用MSE和WebSocket实现一个点播服务
后端读取一个fMP4文件,通过WebSocket发送给MSE,进行播放
展示利用MSE和WebSocket实现一个直播服务
后端代理一条HTTP-FLV直播流,通过WebSocket发送给MSE,进行播放
前端MSE部分做了很多工作, 包括将flv实时转封装成了fMP4,这里引用了videojs-flow的实现
Q1:对于没有公网iIP的客户如何通过RTMP协议推流?
A1:用户客户端进行RTMP推流,不需要公网IP,推到直播系统分配给你的地址就可以了。
Q2:MSE客户端做很多东西,可以转码、解码, 这个会有性能问题吗? 还有这个技术,目前有公司在大批量用吗?
A2:目前该技术在实验阶段,转封装的话,对性能要求不高,我们在各自型号的手机上测试都没有问题。目前除了微信内置浏览器对MSE支持不好,大部分浏览器对MSE支持都比较好。
Q3:没做过相关内容,能简单介绍一下HTTP-FLV么?
A3:HTTP-FLV就是将FLV流以HTTP长连接的形式分发出去,目前在各大直播平台都用的比较多。大家可以关注下又拍云微信公众账号,之前专门有一篇文章介绍HTTP-FLV。
Q4:不大了解HTTP-FLV,既然是长时间的状态性连接,为什么不用tcp/socket呢?
A5: FLV不能在
Q5:哔哩哔哩H5播放器是基于WebSocket与MSE技术实现的嘛?
A5:B站开源的flv.js是一个非常好的项目,是基于 MSE 实现的,实时性做的也比较好,B 站自己已经在网站播放器上使用了。
Q6:VLC器播放和网页播放,哪个快啊?
A6:播放器端延时,一个重要指标是播放器的缓存区大小。VLC的默认缓存区比较大,所以,VLC通常延时会大一些。
Q7:可以介绍下秒开技术么,以及秒开的原理?
A7:秒开可以在服务器端多缓存一个GoP来实现,这样播放器请求的第一帧能保证是I帧,可以立即播放,以此达到秒开的效果.
WebSocket
MSE
作者:又拍云
链接:https://www.jianshu.com/p/5b4cff42bdc0
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。