使用webrtc-streamer查看实时监控

已于 2024-12-12 17:24:16 修改 · 1.8k 阅读

文章标签：

#webrtc #javascript #前端

于 2024-07-25 17:43:17 首次发布

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

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

webrtc-streamer下载

webrtc-streamer下载地址

下载后解压出来cmd命令运行

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