使用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/`
            );
          }