Chrome浏览器直播 rtsp格式 （Media Source Extensions + H5Stream）

Question

当前，想在Chrome浏览器直播 rtsp 视频

 方案一：VLC插件是可以支持浏览器观看的，但是chrome40以上版本不支持了 Pass！ 
 方案二：看到了Media Source Extensions + H5Stream的方案，觉得是可行的路

问题

1. 有大神具体实现过方案，讲讲思路的么
2. 有什么更合理的方案么

Answer 1

敢问楼主，支持进度条吗？

Answer 2

报这个错是什么原因呐，有人知道么

Answer 3

转码播放延迟低，卡顿，支持多路同时播效果更差了，如果要利用本机硬件加速渲染播放，效果更佳，方法看这里：http://zorrosoft.com/files/Vl... 演示视频：https://www.bilibili.com/vide...

Answer 4

楼主提到的方案一的VLC是确实一个不错的Chrome播放rtsp视频流方案，延迟低，性能稳定，主要是可以直接读取RTSP流，不用转码转流，但是从2015年以后，Chrome等浏览器取消对NPAPI支持后，VLC就不能直接使用了。
而猿大师是一个独立浏览器外的中间件，猿大师的VLC播放程序底层调用VLC的ActiveX控件可实现在网页中内嵌播放多路RTSP的实时视频流，可以做到低延迟（300毫秒），支持H.264和H.265格式，兼容主流浏览器的老版本和最新版本，不用服务器转码转流！
猿大师VLC播放程序与VLC原生播放器延迟对比：
https://www.bilibili.com/vide...

Answer 5

找到了一个好用的免费开源JS库——streamedian

当当当~上链接：https://streamedian.com

介绍中讲到，Multifunctional HTML5 RTSP streaming video player over WebSocket
就是说，利用websocket实现多功能的H5的rtsp视频流播放器

这里是使用文档：https://streamedian.com/docs/

对于对websocket、linux、服务器、甚至英文一知半解（一窍不通）并看了文档也不理解的同学，请继续看手把手中文教程：

首先我们理解一下个中原理：

目标：在你的浏览器（browser）上播放rtsp视频流
问题：然而，H5的标签<video>不支持这样的播放
方案：这里利用我们的streamedian在你的服务端开启一个websocket代理（proxy），负责接收rtsp流，并转播给你的浏览器客户端，streamedian在客户端利用中间件（Media Sources Extensions）将经过转播收到的RTP H264和AAC包转化成MP4包，“喂给“<video>进行播放

下面拿到streamedian的code来感受一下：

JS库下载

方法一：通过官网下载
可能不是最新版，streamedian团队还在不断地修复bug中，建议用方法二、三下载最新更新的版本

进入https://streamedian.com 完成注册并登录

可以看到最上面红框标注的是我们需要的客户端和服务端的JS程序；

针对客户端，如果你使用H5的原生播放器<video>标签，下载Download player即可，此外还提供了代替版本————结合非原生H5播放器的clappr integration、videojs integration、Flowerplayer integration可供选择。这里我只下载了Download player
针对服务端，下载proxy，这里的.rpm和.deb是两种格式，选择其一下载，我这里用的ubuntu，.deb更适用，点击下载

接下来是对我们使用的免费版本streamedian的特性描述；
在Domain栏里。你需要输入你所使用的客户端的域名或IP，Add之后，点击Download license。保存好这个license后面会用到，后面会解释为什么要在license中明确特定的客户端域名

方法三：从git上拉下来
npm install git://github.com/Streamedian/html5_rtsp_player.git
方法二：下载git的压缩包

配置与安装

梳理一下，我们现在下载了什么呢？客户端JS streamedian，服务端proxy streamedian_proxy.deb,一个licsense wsp.lic

• 服务端配置

将streamedian_proxy.deb和wsp.lic分别上传至服务器，并在streamedian_proxy.deb根目录下sudo dpkg -i streamedian_proxy.deb #安装streamedian_proxy.deb软件包（其中-i等价于--install）

安装好后会生成/etc/ws_rtsp.ini，进入这个路径，利用vim进行配置，这里我们只要设置general，其中port就是你的服务端转播服务的端口，liscense_path则是你上传的wsp.lic的绝对路径，PRO version的参数可以不进行修改

配置好端，可以用service ws_rtsp start命令启动该服务，那么就在后端相应端口建立起了一个将rtsp转播服务。至此服务端已经配置好，只要前端把rtsp地址通过socket发送给服务端，就可收到rtsp流的socket包了

service ws_rtsp stop命令可以用于停止该服务，ps -aux|grep ws_rtsp命令可以用于查询该服务进程的运行情况

• 客户端配置

用Vs Code打开下载好的streamedian

终端运行npm install下载依赖
终端运行npm install --global rollup这里我们安装的的rollup是一个JS模块打包工具，后面会用到

接下来打开rollup.config.js，其中的entry配置了源文件，target则指定了打包生成的目标文件的目录及文件名。终端运行rollup -c，可以看到在dist目录下打包生成了目标文件streamedian.js

至此我们的客户端工作完成一半，客户端的页面在哪里呢？下面我们来做一个最简单的页面，这里以文件中的index.html为例
可以看到<script>标签中引用了我们打包好的streamedian.js

引用了<video>标签播放rtsp视频

<source>中指定了rtsp流源,rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov是一个稳定的可用于测试的源

socket的参数则是我们运行的rtsp流转播服务器运行url，格式为ws://服务器IP:端口号，可以看到这里的端口号就是之前配置好的1104

现在我们在浏览器中打开index.html，可是并没有视频显示！我的理解是，前期我们在license中设置过客户端的IP或域名，这意味对服务端来说，只对我们制定的客户端进行流转播，因此还差一步

把index.html及streamedian.js放在同一目录下，并上传至制定的客户端服务器

大功告成~~