当前位置:   article > 正文

使用webrtc-streamer查看实时监控_uni-app和webrtc-streamer实现rtsp实时监控

uni-app和webrtc-streamer实现rtsp实时监控

  • 摄像头配置(海康摄像头为例)

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

  • webrtc-streamer下载

    • webrtc-streamer下载地址

    • 下载后解压出来双击运行,端口默认8000

  • VUE2项目引入文件

    • 在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“adapter.min.js”
      • “webrtcstreamer.js”在上面下载的“html”文件夹内
      • “adapter.min.js”上面下载的“html/bils”文件夹内
      • 两个js文件放入项目中,在html文件引入
  •  组件对接

    • 定义容器
        1. <section>
        2. <video
        3. muted
        4. autoplay
        5. controls
        6. width="100%"
        7. height="10vh"
        8. ref="video"
        9. id="video"
        10. ></video>
        11. </section>
    • 定义data变量
    • 初始化摄像头
        1. //192.168.3.11:8000是webrtc-streamer运行的ip和端口
        2. //rtsp地址根据实际来查看
        3. //此项目是后台返回监控信息,包括账号密码和摄像头ip地址
        4. initVideo(item) {
        5. this.webRtcServer = new WebRtcStreamer(
        6. "video",
        7. location.protocol + "//192.168.3.11:8000"
        8. );
        9. //需要查看的rtsp地址
        10. this.webRtcServer.connect(
        11. `rtsp://${item.account}:${item.password}@${item.ip}:554/h264/ch1/main/`
        12. );
        13. }

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号