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,在需要播放视频的页面引入使用。文件代码如下:

javascript 复制代码
<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、页面使用

javascript 复制代码
<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插件,但是那些只针对很老的版本的浏览器,现在的浏览器基本都不支持这些插件了。本来还嫌麻烦想着能不能不依赖第三方服务自己实现播放的,为此还研究纠结了很久也没啥结果,最后选择了这种感觉用着也挺方便的,算了不纠结了就这样吧。

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt