使用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/`
              );
            }
相关推荐
web前端进阶者12 小时前
音视频开发远端未发布视频占位图
音视频·webrtc
fangji99918 小时前
自建webrtc低延时分布式街机游戏直播方案
webrtc·游戏直播·街机直播·自建集群·低延时直播
RTC老炮1 天前
webrtc弱网-ReceiveSideCongestionController类源码分析及算法原理
网络·算法·webrtc
福大大架构师每日一题1 天前
pion/webrtc v4.1.6 发布:修复 nil stats getter 问题并升级依赖模
webrtc
RTC老炮3 天前
webrtc弱网-AcknowledgedBitrateEstimatorInterface类源码分析与算法原理
网络·算法·webrtc
卓码软件测评6 天前
第三方媒体流压力测试:k6插件xk6-webrtc的使用来测试媒体流的性能
网络协议·测试工具·http·https·webrtc·ssl·媒体
RTC老炮8 天前
webrtc弱网-BitrateEstimator类源码分析与算法原理
网络·人工智能·算法·机器学习·webrtc
bluesen9 天前
WebRTC获取GB28181监控摄像头实时音视频流的实现方法
音视频·webrtc·gb28181·gb/t.28181
魔猴疯猿9 天前
轻松搭建RTMP推流、WebRTC拉流服务器SRS服务,源码编译安装
服务器·elasticsearch·webrtc
RTC老炮12 天前
webrtc弱网-RobustThroughputEstimator源码分析与算法原理
网络·算法·webrtc