在vue中利用webrtcstreamer解析播放rtsp流

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部门写

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

复制代码

在beforeDestroy声明周期写

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

复制代码

遇到的坑
利用这个的时候可以利用vlc下载个小帽子，去看rtsp流是否可以正常播放
（点击媒体，打开网络串流，输入rtsp地址）

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

这种可以播放

这种无法播放，然后我反正没找到海康哪设置这个流位置的
（他不是从流0开始，编码器格式对了也没法播放）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告