vue2接入海康,大华摄像头(webrtc播放rtsp流)

前言:公司某项目要实现监控播放功能、截图功能,有了解了好多方法,目前排出后分享一下使用webrtc-streamer

一.先到官网上下载压缩包(地址:https://github.com/mpromonet/webrtc-streamer/releases),解压提取 libs/adapter.min.jswebrtcstreamer.js并拷贝到项目中,放到了public下,并在index.html中引入

 

在index.html引用

二.打开下载解压的文件,双击红框的程序

如果双击没用,那就在当前目录下打开cmd,运行webrtc-streamer.exe -H xxx.xxx.x.xxx:端口号-o这个命令(xxx.xxx.x.xxx这是地址,谁电脑打开就用谁的本地地址,服务器就用服务器地址)

三.下面就是代码了(我用的vue)

(1),先写一个video属性,用来播放rtsp流

html:<video id="video" autoplay width="100%" height="100%"></video>

(2),在data属性定义一个属性,接一下地址

//摄像头数据

扫描二维码关注公众号,回复: 17394299 查看本文章

 webRtcServer: null,

 

(3),在mounted中写入方法

mounted() {

    //海康1号摄像头

    this.webRtcServer = new WebRtcStreamer(

      "video",

      location.protocol + "//xxx.xxx.x.xxx:端口号"  //这里是后端地址

    );

    this.webRtcServer.connect("rtsp://admin:[email protected]:554/h264");//这是后端给的rtsp地址,海康的摄像头有说明,如果不会,私信我一下

  },

(4),在beforeDestroy中销毁

this.webRtcServer.disconnect();

this.webRtcServer = null;

(5),看一下效果(延迟在毫秒,基本没延迟)

 

三,截图的功能的实现,可以看看我主页,有一篇文章专门写了

!!!写的不好,有问题随时指出,共同进步,本人新手菜鸟>﹏< 

猜你喜欢

转载自blog.csdn.net/m0_73700304/article/details/135775747