使用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/`
              );
            }
相关推荐
红米饭配南瓜汤9 天前
WebRTC 发送端 SSRC 生成流程总结
网络·网络协议·音视频·webrtc·媒体
小柯博客10 天前
从零开始WebRTC(一)
stm32·单片机·嵌入式硬件·青少年编程·嵌入式·webrtc
Paraverse平行云14 天前
实时云渲染云推流突破UE像素流传输数据单个消息64KB限制
云计算·webrtc·unreal engine
MagicSakuraD21 天前
LiveKit 的核心概念
webrtc
RTC老炮1 个月前
webrtc弱网-AlrDetector类源码分析与算法原理
服务器·网络·算法·php·webrtc
不会吃萝卜的兔子1 个月前
go webrtc - 2 webrtc重要概念
webrtc
ayaya_mana1 个月前
BilldDesk:基于Vue3+WebRTC+Nodejs+Electron的开源远程桌面控制
electron·开源·webrtc
她超甜i1 个月前
前端通过后端给的webrtc的链接,在前端展示,并更新实时状态
前端·javascript·webrtc
计算机小手1 个月前
高效 P2P 文件传输工具:FileSync 利用 WebRTC 技术实现极速安全传输
经验分享·docker·webrtc·开源软件
AI码上来1 个月前
当小智 AI 遇上数字人,我用 WebRTC 打造实时音视频应用
人工智能·webrtc·实时音视频