下载webtrc-streamer的压缩包，在github上有 https://github.com/mpromonet/webrtc-streamer/releases
将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/stactic目录下，在index.html文件里引入这两个js文件。文章来源：https://www.toymoban.com/news/detail-782528.html
解压之后打开exe文件就可以播放了。（想做到把exe变成开机自启，这样就不用打开了。但是没做），有需要自行百度吧。文章来源地址https://www.toymoban.com/news/detail-782528.html
<template>
<video id="video" autoplay></video>
</template>
data() {
return {
webRtcServer: null,
videoPath_Channel1: "rtsp://",
videoPath_Channel2: "rtsp:// ",
}
}
mounted() {
this.getVideoSatusPlay();
},
methods: {
// 获取实时视频流rtsp
getVideoSatusPlay() {
//192.168.1.100是启动webrtc-streamer的服务器IP，8000是webrtc-streamer的默认端口号，可以在服务端启动的时候更改的
this.webRtcServer = new WebRtcStreamer(
"video",
location.protocol + "//127.0.0.1:8000" // 本地
);
//需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
this.webRtcServer.connect(this.typeName == '可见光' ? this.videoPath_Channel1 : this.videoPath_Channel2);
},
}
beforeDestroy() {
this.webRtcServer.disconnect();
this.webRtcServer = null;
}
到了这里，关于vue项目播放rtsp流视频。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
