使用webrtc-streamer查看实时监控

摄像头配置（海康摄像头为例）

摄像头视频编码应改成H264格式

webrtc-streamer下载

webrtc-streamer下载地址

下载后解压出来双击运行，端口默认8000

VUE2项目引入文件

在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“adapter.min.js” “webrtcstreamer.js”在上面下载的“html”文件夹内 “adapter.min.js”上面下载的“html/bils”文件夹内 两个js文件放入项目中，在html文件引入

 组件对接

定义容器

      <section>        <video          muted          autoplay          controls          width="100%"          height="10vh"          ref="video"          id="video"        ></video>      </section>

定义data变量 初始化摄像头

    //192.168.3.11:8000是webrtc-streamer运行的ip和端口    //rtsp地址根据实际来查看    //此项目是后台返回监控信息，包括账号密码和摄像头ip地址        initVideo(item) {      this.webRtcServer = new WebRtcStreamer(        "video",        location.protocol + "//192.168.3.11:8000"      );      //需要查看的rtsp地址      this.webRtcServer.connect(        `rtsp://${item.account}:${item.password}@${item.ip}:554/h264/ch1/main/`      );    }