使用webrtc-streamer查看实时监控

m0_748246612024-12-12 8:12

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

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