使用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/`
              );
            }
相关推荐
RTC老炮5 天前
webrtc弱网-AlrDetector类源码分析与算法原理
服务器·网络·算法·php·webrtc
不会吃萝卜的兔子6 天前
go webrtc - 2 webrtc重要概念
webrtc
ayaya_mana6 天前
BilldDesk:基于Vue3+WebRTC+Nodejs+Electron的开源远程桌面控制
electron·开源·webrtc
她超甜i7 天前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
计算机小手7 天前
高效 P2P 文件传输工具:FileSync 利用 WebRTC 技术实现极速安全传输
经验分享·docker·webrtc·开源软件
AI码上来8 天前
当小智 AI 遇上数字人,我用 WebRTC 打造实时音视频应用
人工智能·webrtc·实时音视频
Antonio9159 天前
【音视频】WebRTC 音视频延时、同步分析以及超低延时优化
音视频·webrtc
RTC老炮10 天前
webrtc弱网-LossBasedBandwidthEstimation类源码分析与算法原理
网络·算法·webrtc
小噔小咚什么东东10 天前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
Antonio91510 天前
【音视频】WebRTC P2P、SFU 和 MCU 架构
音视频·webrtc·p2p