VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)

下载了webrct的插件,只完成了本地播放,并且只有单个监控视频播放,多屏播放弄了好久没弄出来,而且不知道是插件原因还是后端转流的原因,监控视频延迟了5分钟。总之,对接海康摄像头RTSP视频流真的太恼火了,海康自己的无插件版本只支持高版本浏览器,还要nginx代理服务器,自带的插件包对浏览器也有很多要求,网上找了很多插件都需要终端下载运行,对于项目太鸡肋了。最后还是要后端那边转码做,目前让后端转码 m3u8 + video.js试试

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第1张图片

1、下载webrtc-streamer,本机测试我下载的最新window版本

https://github.com/mpromonet/webrtc-streamer/releases

2、解压+运行插件

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第2张图片
VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第3张图片

3、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/static目录下。

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第4张图片

4、在index.html文件里引入这两个js文件

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第5张图片

5、为确保没问题,在编写视频的页面又引入了一次

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第6张图片

6、直接在页面上用

VUE + webrtc-streamer实时播放海康威视监控(RTSP视频流)_第7张图片

你可能感兴趣的:(vue.js)