网页视频播放：协议篇

最近一两周折腾了监控视频的方案现在把过程中涉及到的知识总结一下希望对后来的你有帮助。前言起初是为了客户端可以跨平台使用但是我们又不想折腾不同平台的 UI 库Qt 之类的跨平台库虽然不错只是它的设计太丑无法入我法眼。这时候 Electron 方案走进了我们的视线可以用 Web UI而 Web UI 的设计又有非常多可供挑选于是我们就选了它然后问题来了如何在网页上播放视频。其实可供选择挺多只是其中很多的方案已经或将会不可用比如 vlc 插件不被支持以及 flash 播放器将会不可用。于是我们需要优先选择原生的方案即不需要插件并且基于 HTTP 的方案。于是为了在网页上看到摄像头的视频我们首先需要从摄像头获取数据源然后经过处理一般无法直接播放我们需要转码、转协议等最后提供一个链接给网页上的播放器使用。在这个过程里面我们大致需要知道如下几个协议RTSP/RTMPHLS/DASHHTTP-FLVWebRTC限于篇幅今天只是介绍几个协议之后再介绍具体的方案以及实现。几个协议的科普下面来简单说说这几个协议。之后的文章还会补上实战的一些内容。RTSP/RTMPRTSP 协议这是目前主流摄像头都支持的视频流协议能够支持获取实时的视频尤其是安防监控领域。RTMP 协议Macromedia 发明后被 Adobe 收购主要用在 flash 播放器上的私有协议得益于 flash 的普及因此在浏览器视频播放领域有先发优势支持范围广进而成为了目前大多数直播服务、CDN 服务都支持的一种视频流协议。他们两者都无法直接被浏览器使用RTMP 需要 flash 播放器而 RTSP 需要把底层协议转成 WebSocket。另外再提醒下Adobe 早就宣布在 2020 年底停止支持 flash 了。这里放几个拓展阅读链接Real Time Messaging ProtocolReal Time Streaming ProtocolHLS/DASHHLS 全称是 Http Live Streaming是苹果发明的协议用来取代 flash但是它一点也不 Live延迟通常高达 10s 以上DASH 也是一路货色因此这俩几乎只能用来点播视频。它们的大致原理是把视频流切成合适的大小比如 10s 一个片段(ts 文件)然后将路径写入一个专门的索引文件中客户端首先请求这个索引文件(.m3u8)来获取里面视频的路径拼凑成地址再请求片段地址下载后在本地播放。更新就很简单了服务器一直不停写索引文件而客户端一直不停请求索引文件即可。相信你了解了之后就会明白延迟来自于何处了至少两次请求才能开始播放一直不停请求索引文件以及 ts 文件所造成的服务器资源消耗以及最关键的ts 文件写完之后才能下发给客户端比如上面提到的 10s 一个片段那么至少是 10s 之后才能下发聪明的同学在这个时候应该已经想到可以通过 WebSocket和 HTTP/2来减少 HLS的延迟苹果当然也想到了苹果在 WWDC 2019 宣布了新的 Low-Latency HLS 协议能够大大降低延迟Protocol Extension for Low-Latency HLS实际上它就是利用 HTTP/2 的新特性来达到这个目的。只是小分片带来的大量小文件碎片是存储的灾难目前仍然不适合使用。什么你说 DASH哦差点忘了其实它是 MPEG 的同志们牵头发起的国际标准除了苹果公司之外各大公司支持的一种与 HLS 类似的协议。目前大部分线上视频点播的服务器都会用它来提供服务比如 B 站1。这里再放几个拓展阅读链接Dynamic Adaptive Streaming over HTTPHTTP Live StreamingMPEG-DASH - An OverviewHTTP-FLV得益于 flv.js 的横空出世有着充分利用了浏览器的硬件加速以及 FLV 格式视频的特点目前大部分网页直播都是选择这个协议了。它实际上与 RTMP 传输的内容几乎一致都属于 flv 文件的 Tag。但是它的好处在于 80 端口直接穿透防火墙以及更少的状态交互造成的延迟也就更低。2这个也是目前我们选择的协议毕竟它也是目前最成熟的方案。WebRTC目前是所有协议里面延迟最低的可以做到实时它原本就是用来实现视频聊天功能的并且因为它使用了 P2P 技术可以使客户端可以直接互相连接而不需要通过服务端转发音视频。我们将服务端作为一个 Peer 即可实现服务器转发直播的功能毕竟我们可能需要在服务器处理视频以及直播情况下是一个一对多的场景一个浏览器发送端带不起那么多的接收端。不过由于它仍处于发展阶段仍然不成熟目前市场的接受度不高。WOWZA 在它的 Low Latency Streaming 中对现有的各种视频播放协议进行了一些比较。RefBilibili - 我们为什么使用DASHH5直播系列四 RTMP HTTP-FLV HLS MPEG-DASH