此文所有内容都是针对前端对流媒体协议的认识,服务端部分有待深入了解。
为什么使用流媒体
如果用户想要观看网站(服务器)上的一个视频,如果采用下载视频文件才能观看视频的方法,一旦视频文件过大就是导致下载时间过长,用户体验极差。所以现在在网络上观看视频一般都会采用视频流的方式。通过网络不停的向用户传输视频数据,用户也可以直接开始播放视频。
另外一方面,现在的直播行业,安全监控行业都需要实时的看到当前设备录制的视频,这种情况基本也只能使用流媒体的方式。
推流:把采集内容传输到服务器的过程
拉流:从客户端获取服务器资源的过程
流媒体协议
当前使用的比较多的主要是RTMP、HTTP-FLV、HLS这三种协议,还有其他几种协议主要分别是:RTSP、DASH、webRTC、websocket。下面对各个协议在前端使用方面做一个了解:
RTMP
RTMP协议是Adobe公司依赖flash提供的一个实时消息通信协议,该协议是通过tcp链接的,其主要优势就是低延迟,而且就目前了解到大部分的设备推流都是使用的RTMP的协议。但是因为使用RTMP拉流在前端浏览器播放的话必须使用flash插件,而当前浏览器厂商都在推动禁用flash,所以使用RTMP拉流在前端播放不是很优雅,而且由于移动端几乎没有flash,所以此协议在移动端浏览器几乎不能使用。
HTTP-FLV
HTTP-FLV协议也是Adobe公司推出的,是基于上面RTMP协议的HTTP版本,这个协议是通过http链接的。该协议也具有RTPM的优点,延时很低,但是也有同样的问题就是依赖flash插件进行播放。现在经过前端的处理已经可以使用video标签进行播放了。据了解很多直播网站都是使用的此协议。
HLS
HLS协议是Apple公司推出的视频流协议,与RTMP协议不同的是该协议采用视频切片然后发送给客户端的方式。也就是说客户端其实是接收到一个一个的视频小片段。这种方式目前在移动端有很好的兼容性,但是在pc端,目前只有Safari浏览器可以直接使用,其他的浏览器都需要经过转码处理。其优点就是可以自动码率,而且移动端的兼容性比较好,但是缺点很明显就是延迟比较高。
RTSP
RTSP协议比较大的优势就是低延迟,所以很多市面上的监控摄像头等对实时性要求较高的场景都会使用RTSP,但是对于前端来说我们无法在浏览器直接使用RTSP协议的流,目前了解到的解决方案都是通过服务器端处理,要么转码,要么转为websocket来发送。
DASH
dash协议是由谷歌推出的流媒体协议,该协议工作方式与HLS协议类似,都是通过视频切片的方式传输,延时比较高。因为有谷歌等几个大公司的推动,所以该协议在国外网站上使用比较多。由于该协议传输的视频切片是MP4、webm等格式,所以该协议在兼容性上非常好,理论上只要支持MP4格式的浏览器都可以使用。具体情况待测试。
其他协议因暂时没有使用到,还没有进行深入了解,后续学习后更新
视频格式
这里视频格式主要是指上面这些流媒体协议传输的视频格式,不是指所有的视频格式。
flv
这种视频格式也是Adobe公司推出的,所以在前端来说基本上也就只有flash可以直接播放,如果想用video标签播放,需要经过转码处理。
RTMP和HTTP-FLV协议传输的都是这种格式的视频,前端可以使用(flv.js)对HTTP-FLV的流做处理然后在video上播放,但是RTMP的流暂时没有解决方案只能使用flash。
我们公司前端要求FLV的流指的是通过HTTP-FLV协议传输的流,不是指flv格式。
ts
HLS协议传输的就是ts格式的视频切片,经过测试基本上在ps端浏览器只有Safari可以直接使用,在移动端基本上所有浏览器都可以使用。而pc端可以通过(video.js)等库来处理,基本上pc端的兼容性也不错。
MP4
这个格式就不用多说了,video标签原生支持的,所以兼容性非常好。DASH协议也是传输的这种流。很多库处理ts格式或者flv格式的视频流都是通过转码成MP4格式然后再给video标签播放。
总结
协议 | 传输格式 | 优势 | 劣势 |
---|---|---|---|
RTMP | flv | 延时低(3秒左右) | 依赖flash |
HTTP-FLV | flv | 延时低(3秒左右) | 需要转码 |
HLS | ts | 兼容性比较好,自适应码率 | 延时高(8秒左右) |
RTSP | ts,mp4 | 延时低 | 依赖flash |
DASH | mp4,3gp,webm | 兼容非常好,自适应码率 | 延时高 |
因为前端在播放流的时候往往不是单纯的播放,还有截图,暂停等需要JavaScript控制的交互,所以我们更愿意使用video播放,也就导致了目前延时最低、可以转码后使用video标签播放的HTTP-FLV协议是前端播放视频流比较好的解决方案。
各个协议url格式:
RTMP:rtmp://live.hkstv.hk.lxdns.com/live/hks
HTTP-FLV: http://www.xxxxxx.com:18080/11/22.flv