Javascript前端直播视频流RTSP,RTMP,HLS,FLV方案初探

1

前端直播视频流RTSP,RTMP,HLS,FLV方案初探

阅读:1228 时间:2021年05月07日

注:本文主要为网上可见方案测试结果。并非实现过程详细说明。内容测试时间: 2021-05-07本文实践测试概览格式/协议简要说明插件、JS库浏览器RTSP可以直接从摄像头获取的流,延迟低。但浏览器无法直接播放VLC, VXGIE11, Chrome与Firefox低版本...

注:本文主要为网上可见方案测试结果。并非实现过程详细说明。内容测试时间: 2021-05-07

本文实践测试概览



格式/协议简要说明插件、JS库浏览器

RTSP可以直接从摄像头获取的流,延迟低。但浏览器无法直接播放VLC, VXGIE11, Chrome与Firefox低版本
RTMPAdobe私有协议,所以要Flash支持。延迟低,需媒体服务器处理转发Video.js  FlashIE11
HLSApple提出的协议,需媒体服务器处理转发,浏览器支持好,延迟高Video.js , Tcplayer liteIE11, Chrome, Firefox
HTTP-FLV变是FlashPlayer的专有格式,但因B站大神开发了Flvjs,使其可在更多浏览器被支持。需媒体服务器处理转发,浏览器支持好。延迟一般
Flv.jsIE11, Chrome, Firefox
OTHERwebRTC,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纳进标准,至少目前没有。。

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^