当前位置:首页 » 《资源分享》 » 正文

【无标题】vue webrtc 播放rtsp视频流

15 人参与  2024年09月15日 12:01  分类 : 《资源分享》  评论

点击全文阅读


最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用webrtc来实现相关功能,记录一下,步骤如下:

1、下载webrtc :Releases · mpromonet/webrtc-streamer · GitHub

        winows下下载:webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

2、js准备

  将下载包中html/libs文件夹下webrtcstreamer.js、adapter.min.js文件复制到VUE项目public目录中

VUE代码如下:

    <div class="coTitle">视频</div>    <video id='video' controls autoplay autobuffer muted preload='auto'           style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'>    </video>
</script><script lang="js">import {WebRtcStreamer} from './webrtcstreamer.js';export default {  name: 'index1',  data() {    return {      webRtcServer: null    }  },  mounted() {    //video:需要绑定的video控件ID    //127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000    this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')    //需要查看的rtsp地址   this.webRtcServer.connect('rtsp://192.169.0.1:9000/dss/monitor/param?cameraid=1000211%210&substream=1')  },  beforeDestroy() {    this.webRtcServer.disconnect()    this.webRtcServer = null  },}</script>

3、首选运行 webrtc-streamer.exe 有的说不加参数CPU高,我的电脑上没加参数也不高,懒,没测试。不过运行 webrtc-streamer.exe 后有个黑框,我是自己写了个服务,如果webrtc没启动,就定时启动一下,这样播放的电脑上就没有黑框了。

4、完成上述 123步就可以正常播放,有一个关键问题特意说明一下:

海康的视频流会提示:Start playing sink for "video/H264" subsession

可能出现此问题的原因是 音视频在同一个流中
解决方法如下:
 

     //this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");      var audioUrl="";      var options="rtptransport=tcp&timeout=60";      webRtcServer.connect(videoUrl,audioUrl,options);


点击全文阅读


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

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

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

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