vue项目中播放rtsp视频流

一、下载webrtc-streamer
下载地址：https://github.com/mpromonet/webrtc-streamer/releases
根据设备型号下载对应的版本到本地直接解压就行，我下载的是webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release.tar版本。
双击webrtc-streamer.exe可执行文件后在浏览器访问http://127.0.0.1:8000，可以看到自己电脑正在操作的内容。

二、vue项目中使用

1、将/html/libs目录下的adapter.min.js和/html目录下面的webrtcstreamer.js文件分别拷贝到vue项目中，并在index.html文件全局引入。
2、自定义组件videoPlayer.vue，在需要播放视频的页面引入使用。文件代码如下：

<template><video ref="video" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
</template><script>import Setting from "@/setting";export default {props: {videoSrc: {type: String,default: '',}},data () {return {webRtcServer: null}},watch: {videoSrc () {this.initData();}},mounted () {// 分别对应开发环境、生产环境视频流转码服务的地址let srvUrl = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8000' : 'http://127.0.0.1:8000';this.webRtcServer = new WebRtcStreamer(this.$refs.video, srvUrl);this.videoSrc && this.initData();},methods: {initData () {this.webRtcServer.connect(this.videoSrc || '');}},beforeDestroy () {this.webRtcServer.disconnect();this.webRtcServer = null;}}
</script>

注：style="object-fit: fill; 设置视频内容撑满整个video标签

3、页面使用

<template><div><videoPlayer :videoSrc="videoSrc" /></div>
</template><script>import videoPlayer from '@/components/videoPlayer.vue';export default {components: { videoPlayer },data () {return {videoSrc: 'rtsp://rtspstream:14277f5...',}},}
</script>

总结：功能实现需要建立在有一个第三方转流服务的基础上，本地开发的时候可以在双击运行webrtc-streamer.exe可执行文件后使用http://127.0.0.1:8000服务，打包发布到线上的时候可以让后台在服务器上安装webrtc-streamer并提供真实的地址，操作类似。

ps：一开始搜到的很多是用的浏览器插件播放的，例如vlc插件，但是那些只针对很老的版本的浏览器，现在的浏览器基本都不支持这些插件了。本来还嫌麻烦想着能不能不依赖第三方服务自己实现播放的，为此还研究纠结了很久也没啥结果，最后选择了这种感觉用着也挺方便的，算了不纠结了就这样吧。