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

  • 摄像头视频编码应改成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/`
              );
            }