当前位置:首页 » 《关注互联网》 » 正文

在vue2中使用webrtcstreamer解析播放rtsp流

7 人参与  2024年11月04日 19:20  分类 : 《关注互联网》  评论

点击全文阅读


1、在git上下载webrtcstreamer(下载链接)

下载完成解压后,在文件夹这个位置输入cmd,

打开命令窗口,输入启动命令        

webrtc-streamer -H 127.0.0.1:8080(ip和端口自己定义===端口不要重复) 

启动完成后可以在浏览器中输入设置的ip和端口打开,看看是否启动成功     

                        测试输入流是否可以播放(这里可以播放,但有些原因嵌入到页面里也无法播放)

2、在vue下public文件夹添加webrtcstreamer.js与adapter.min.js文件并引入到html文件当中

webrtcstreamer.js文件位置:webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html中

adapter.min.js文件位置:webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Debug\html\libs中

3.在vue页面的html部分创建dom

在js部分写

//改变量要在data中声明,方便后续使用完进行销毁(声明为null就可以)//window.SYS_Config.VUE_APP_API_BASE_CAMERAURL:webrtc-streamer启动自己定义的地址this.webRtcServer = new WebRtcStreamer(            'videoLs',            location.protocol + '//' + window.SYS_Config.VUE_APP_API_BASE_CAMERAURL          )          //需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意:视频编码格式必须是H264的,否则无法正常显示,编码格式可在摄像头的后台更改          this.webRtcServer.connect(this.prevVideoUrl)

在beforeDestroy声明周期写

beforeDestroy() { this.webRtcServer.disconnect(); this.webRtcServer = null; }

遇到的坑

使用这个的时候可以使用vlc下载个小帽子,去看rtsp流是否可以正常播放

(点击媒体,打开网络串流,输入rtsp地址)

播放成功了,右键,打开编码器信息,查看是否是h264编码

这种可以播放

这种无法播放,然后我反正没找到海康哪设置这个流位置的

(他不是从流0开始,编码器格式对了也没法播放)


点击全文阅读


本文链接:http://zhangshiyu.com/post/182470.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1