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

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用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代码如下:

html 复制代码
    <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>
html 复制代码
</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

可能出现此问题的原因是 音视频在同一个流中

解决方法如下:

html 复制代码
     //this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");
      var audioUrl="";
      var options="rtptransport=tcp&timeout=60";
      webRtcServer.connect(videoUrl,audioUrl,options);
相关推荐
EasyNVR2 天前
EasyRTC智能硬件:小体积,大能量,开启音视频互动新体验
前端·安全·音视频·webrtc·sdk·p2p·智能硬件
科技小E3 天前
WebRTC与EasyRTC:开启智能硬件音视频通讯的全新旅程
网络·网络协议·音视频·webrtc·p2p·视频监控
cyw89983 天前
vue3读取webrtc-stream 视频流
webrtc
Likeadust4 天前
WebP2P+自研回音消除:视频通话SDK嵌入式EasyRTC构建高交互性音视频应用
音视频·webrtc·p2p·webp2p
EasyGBS5 天前
EasyRTC嵌入式WebRTC视频通话SDK支持Web浏览器、Linux、ARM、Android、iOS
arm开发·音视频·webrtc·webp2p
xiejiashu5 天前
嵌入式EasyRTC实时通话支持海思hi3516cv610,编译器arm-v01c02-linux-musleabi-gcc
webrtc·webrtc嵌入式·嵌入式webrtc·硬件视频通话·嵌入式视频通话
EasyNVR5 天前
WebRTC与EasyRTC:开启智能硬件音视频通讯的全新旅程
网络·安全·音视频·webrtc·智能硬件·视频监控
william_myq8 天前
协议-WebRTC-HLS
音频·webrtc·hls
sun_weitao8 天前
flutter-webrtc安装示例
flutter·webrtc
爱学习的大牛12311 天前
WebRTC 客户端与ZLMediaKit通讯
webrtc·zlmediakit