使用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老炮1 天前
webrtc弱网-LossBasedBandwidthEstimation类源码分析与算法原理
网络·算法·webrtc
小噔小咚什么东东1 天前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
Antonio9151 天前
【音视频】WebRTC P2P、SFU 和 MCU 架构
音视频·webrtc·p2p
山河君1 天前
webrtc之高通滤波——HighPassFilter源码及原理分析
算法·音视频·webrtc·信号处理
RTC老炮1 天前
webrtc弱网-LossBasedBweV2类源码分析与算法原理
算法·webrtc
正在走向自律1 天前
WebRTC开启实时通信新时代
webrtc·mediastream·webcodecs·信令·网页即时通信·rtcpeerconne·ice机制
Antonio9153 天前
【音视频】WebRTC ICE 模块深度剖析
音视频·webrtc
山河君3 天前
webrtc之语音活动上——VAD能量检测原理以及源码详解
算法·音视频·webrtc·信号处理
不会吃萝卜的兔子3 天前
go webrtc - 1 go基本概念
开发语言·golang·webrtc
正在走向自律5 天前
解锁WebRTC在数字人领域的无限潜能
人工智能·python·llm·webrtc·数字人·微软autogen·实时语音交互