前端直播视频流RTSP,RTMP,HLS,FLV方案初探
注：本文主要为网上可见方案测试结果。并非实现过程详细说明。内容测试时间： 2021-05-07
本文实践测试概览
| 格式/协议 | 简要说明 | 插件、JS库 | 浏览器 | |
| RTSP | 可以直接从摄像头获取的流，延迟低。但浏览器无法直接播放 | VLC, VXG | IE11, Chrome与Firefox低版本 | |
| RTMP | Adobe私有协议，所以要Flash支持。延迟低，需媒体服务器处理转发 | Video.js Flash | IE11 | |
| HLS | Apple提出的协议，需媒体服务器处理转发，浏览器支持好，延迟高 | Video.js , Tcplayer lite | IE11, Chrome, Firefox | |
| HTTP-FLV | 变是FlashPlayer的专有格式，但因B站大神开发了Flvjs,使其可在更多浏览器被支持。需媒体服务器处理转发，浏览器支持好。延迟一般 | Flv.js | IE11, Chrome, Firefox | |
| OTHER | webRTC，WS， MSE等 | - | - |
RTSP
RTSP（Real Time Streaming Protocol）是由Real Network和Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议。RTSP对流媒体提供了诸如暂停，快进等控制，而它本身并不传输数据，RTSP的作用相当于流媒体服务器的远程控制。服务器端可以自行选择使用TCP或UDP来传送串流内容，它的语法和运作跟HTTP 1.1类似，但并不特别强调时间同步，所以比较能容忍网络延迟。
目前还没有前端浏览器可直接播放rtsp协议流的方法。只能借助插件。
播放插件： VLC-player (js / ActiveX)
安装VLC-Player并勾选ActiveX插件，浏览器IE11测试时，只有声音没有图像，原因不明。
播放插件： VXG-player (js / npapi)
安装 VXG-player的Chrome扩展 ，并且不能在最新的Chrome(此时最新90)上被支持。在Chrome 72版本测试成功
RTMP
RTMP是Real Time Messaging Protocol（实时消息传输协议）的首字母缩写。该协议基于TCP，是一个协议族，包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种设计用来进行实时数据通信的网络协议，主要用来在Flash/AIR平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。支持该协议的软件包括Adobe Media Server/Ultrant Media Server/red5等。RTMP与HTTP一样，都属于TCP/IP四层模型的应用层。
播放插件: Video.js (js / Flash player)
看介绍已经明了了，是Adobe-Flash的东西，所以要Flash-player。在2020年Chrome已经完全不支持Flash了。只在IE测试。在IE11上测试成功。
HLS
HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。
播放插件: Tcplayer Lite / Video.js (js)
这个大部分播放器均能播放，手机更是支持良好。现在网上影视资源的主流，延迟稍高，可能更适合点播。。我试用了腾讯云的tcplayer lite和VideoJS均可播放成功。
HTTP-FLV
FLV 是FLASH VIDEO的简称，FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。
播放插件: Flv.js (js)
Flv.js是BiliBili的开发工程师用纯JS实现的播放FLV利器，截止今天gitHub 19.6K的星星.
在Chrome上测试成功，在IE11上测试本地FLV文件成功，测试HTTP-FLV流未成功
OTHER
百度翻烂，还看了其它一些方案，比较不好入手不好测试，目测性价比也不高。没有尝试。
最后，
前端直播RTSP可以节省服务器资源(性能/流量),但目前仅靠前端方案并不理想，不仅要依赖浏览器插件，且高版本的浏览器已经慢慢放弃插件这条路了。反复的尝试了各种方案许久，终是觉得媒体服务器+HTTP-FLV相对好一些。
不知道有没有一天，RTSP会被ES/HTML纳进标准，至少目前没有。。
参与讨论