0


使用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/` ); }


本文转载自: https://blog.csdn.net/qq_57436326/article/details/140691969
版权归原作者 LNwany 所有, 如有侵权,请联系我们删除。

“使用webrtc-streamer查看实时监控”的评论:

还没有评论