杂谈_网页直接播放rtsp方案整理

公司业务需要做rtsp摄像头推送到网页上，简单整理下相关方案
最好：不要插件，不要收费的。

01，H5Stream：零视技术

使用：
1 cp h5ss.service /usr/lib/systemd/system/
2 systemctl enable h5ss.service
3 systemctl start h5ss.service

问题：
01，无法独立使用，直接生成网页了。rtsp源=>直接映射网页，不好定制（暂停，页面样式等）
02，灵活性不足。新增rtsp，删除rtsp不方便，需要重启systemctl restart h5ss.service类似
参考：
Chrome浏览器直播 rtsp格式 （Media Source Extensions + H5Stream）：https://segmentfault.com/q/1010000013117129
使用H5Stream实现rtsp流播放，并整合到web项目中:https://blog.csdn.net/yanmuchen/article/details/98207002
H5Stream入门级应用，播放RTSP流视频：https://www.cnblogs.com/Vince-blogs/p/8608076.html

02，类似fmpeg转流为rtmp

类似：ffmpeg推流为m3u8（转为m3u8一样会占用较大cpu。）
类似：ffmpeg + video，rtsp转hls播放
优点：rtmp支持较多
缺点：不利于后台实时控制rtsp流的增加，减少，且转码也需占用cpu资源。

参考：
rtsp流前端web页面播放：https://zhuanlan.zhihu.com/p/81105913
浏览器播放rtsp视频流解决方案：https://juejin.cn/post/6844903877217632264

03，WebChimera.js

libvlc 的 JavaScript 封装
目前主要支持以下分支工具：

1. WebChimera.js 播放器 -一个全功能的视频播放器
2. WebChimera.js 角播放器 -角视频播放器
3. WebChimera.js 渲染 -使用WebChimera.js呈现的视频（通过绘制在WebGL的帧）
4. WebChimera.js - libvlc 结合，JS的API允许你控制libvlc并获得UInt8Array原始帧
   需要注意的是，由于这些都是基于一个NPAPI /的ActiveX插件，它只能在 Firefox 和 Internet Explorer 的工作。Chrome 浏览器，Opera 不再被支持。
   关注度低，出了问题基本没人答复

04， html5 + websocket_rtsp_proxy 实现视频流直播

服务器端用 websocket 接受 rtsp ，然后，推送至客户端
此方案，客户端因为直接转成了mp4，所以H5的video标签直接可以显示。
参考地址：https://github.com/Streamedian/html5_rtsp_player
基于：streamedian，
优点：实现比较简单
缺点：收费的，免费版有很多限制

05，WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 通过 webRTC 直接调用摄像头，但是如果要实现远程视频流的显示，则需要将 RTSP 转换为 WebRTC 流，供 web 端显示。
参考地址：github.com/lulop-k/kur…

06，vlc插件

参考：
html播放rtsp直播数据流：https://blog.csdn.net/taoerit/article/details/84975046

07，高相关文章

在web页面中播放rtsp直播数据流方法(WebChimera.js,h5stream（不支持h265）,npapi-vlc(依赖vlc插件)):https://blog.csdn.net/u011573853/article/details/79551678

浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案：https://blog.csdn.net/weixin_40777510/article/details/106693408

1
2
3
4
5
6
7
8

几种浏览器播放RTSP视频流的方案：https://bnlt.org/2019/几种浏览器播放RTSP视频流的方案/  
1.通过浏览器插件直接播放RTSP  
1.1 VLC插件  
1.2 Flash  
2.转码方案  
2.1 ffserver  
2.2 FFmpeg4 和 RTMP  
2.3 FFmpeg4 和 HLS

rtsp+rtmp多路网页播放（视频流转图片播放方案，demo，基于yield的）：https://www.cnblogs.com/FHC1994/p/11724484.html
Web下无插件播放rtsp视频流的方案总结：https://blog.csdn.net/ajrm0925/article/details/91879551
开源项目：直播、点播流媒体服务，网页播放rtsp摄像头，不需要安装插件，支持Chrome浏览器：https://github.com/tablife/gan

HTML5 播放 RTSP 视频：https://zhuanlan.zhihu.com/p/75406976

1
2
3
4
5
6
7
8

服务器端采用 express + express-ws 框架进行编写，当有 HTTP 请求发送到指定的地址时，启动 ffmpeg 串流程序，直接将 RTSP 流封装成 FLV 格式的视频流，推送到指定的 WebSocket 响应流中。  
HTML5 播放 RTSP 示例仓库:https://github.com/GWmodel-Developers/html5-rtsp  
如何不花钱让html5播放rtsp视频流（第二弹）：https://juejin.cn/post/6844903949309313037  
node全栈实现了一个简单工的是视频平台，优点：  
同时预览来自海康，大华等能生产rtsp流的IPC视频和录像。  
不需要安装任何插件  
不依赖flash播放视频  
视频延时缩小到1s内

谷歌浏览器RTSP 流在线播放（chrome安装专用插件）：https://www.cnblogs.com/piaoxuewuming/p/14150186.html
RTSP？不存在的 -> 前端实时流探索记：https://segmentfault.com/a/1190000022994032?utm_source=sf-related

1
2
3

RTMP(flash),  
HLS（高延迟）,  
HTTP-FLV(flv.js,flv->mp4->mediaSourceExtensions)

直接使用rtsp。最大顾虑，小众，有问题不大好解决，比如我们本机ok，用户机器不行。

08，选择方案02的http-flv方案

相关资料
html5 播放 rtsp:https://www.cnblogs.com/qianxiaox/p/13666264.html
服务器端采用 express + express-ws 框架进行编写。需编写js代码

使用flv.js快速搭建html5网页直播:https://zhuanlan.zhihu.com/p/94440420
使用pingos

浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案:https://www.banmajio.com/post/a693e260.html
nginx-http-flv-module