由于目前浏览器不支持flash插件，使很多支持播放视频的插件， 如videojs等并不可使用
目前可以实现的RTSP的方法：
1.后端通过使用FFmpeg将RTSP视频转码。前端结合videojs插件等实现浏览器显示
2.通过webrtc-streamer实现RTSP视频在浏览器播放，但是此方法需要电脑后台启动8000端口号（查阅网上很多相关内容，端口和地址都是可以实现更改实现适配的）
- 。。。。（还有其他的就不列举了）
最近项目涉及大屏显示监控视频，刚开始接到这个任务以为通过videojs插件等可以完成任务，事实证明是我异想天开了。
在和后端对接时候发现，公司返回的监控视频是RTSP格式的监控视频，通过自己本地测试 + videojs插件的结合并没有实现此功能。
于是，我开始查阅网上各种相关的文章，同时结合最近比较火热的chatGPT来帮助我快速实现相关的功能，出乎意料看文章加实际操作大概花费一两天时间还是没有实现。
由于经常刷掘金沸点，所以通过在掘金沸点寻求帮助，JYM给了很多的解决方法，最多的就是让后端进行转码，前端根据后端转码的链接进行展示。我去找公司的后端，让他通过FFmpeg把RTSP视频转码。又经历一天的时间，后端把转码的视频链接发我测试，但是由于这样的方式太消耗服务器资源，公司的项目组老大不允许后端这样做，也就只能作罢。
真是经历千辛万苦最终决定试试webrtc-streamer实现此功能
具体实现步骤：
1.首先要去github下载 webrtc-streamer，我是使用Windows系统，要根据自己的想要实现的系统选择具体的压缩包
webrtc-streamer 版本0.7.0 （链接来自blog.csdn.net/m0_66509866…）
2.将下载的压缩包解压，打开解压的文件夹执行以下步骤：
3.将html文件夹里面的webrtcstreamer.js和libs文件夹的adapter.min.js一起放在vue项目文件夹里面
4.需要下载videojs插件
5.将播放RTSP视频写成组件 webrtcSteamer.vue（注：需要引入webrtcstreamer.js）
<!--
* @Description: rtsp视频播放
-->
<template>
<div class="webrtcSteamer s-fill s-flex">
<video
id="video"
class="video-js"
controls
autoplay
autobuffer
muted
preload="auto"
></video>
</div>
</template>
<script>
import WebRtcStreamer from '../common/webrtcstreamer.js'
export default {
props: {
scale: {
type: Number,
required: true
},
videoUrl:{
type: String,
required: true
},
},
data () {
return {
httpServer: '',
rtspUrl: this.videoUrl,
player: null,
webRtcServer: null,
videoSeting: {
language: 'zh-CN',
autoplay: true, // true/false 播放器准备好之后，是否自动播放 【默认false】
controls: true, // /false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
loop: false, // /false 视频播放结束后，是否循环播放
muted: true, // /false 是否静音
poster: '', // 播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
preload: 'auto', // 预加载 ‘auto‘ 自动 ’metadata‘ 元数据信息 ，比如视频长度，尺寸等 ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
bigPlayButton: true,
},
}
},
mounted () {
var a = `${window.location.href}`
var b = a.split(':')
this.httpServer = `${b[0]}:${b[1]}:8000/`
console.log('httpServer', this.httpServer)
// 初始化webrec服务
this.webRtcServer = new WebRtcStreamer('video', this.httpServer)
this.webRtcServer.connect(this.rtspUrl)
},
methods: {
playVideo () {
this.webRtcServer.connect(this.rtspUrl)
},
},
}
</script>
<style lang="less" scoped>
.webrtcSteamer {
&-num {
color: #06FBFC;
font-weight: 500;
font-family: 'PingFang SC';
}
}
.video-js {
width: 100%;
height: 100%;
}
</style>
基本就完成功能的实现。
但是，这是基于本地测试可行，但是如果发到线上客户是没有启动webrtc-streamer.exe程序，监控视频是无法打开的。
目前公司处理方式是在页面显示webrtcstreamer的压缩包链接下载提示，检测客户是否开启8000端口，如果没有检测到8000端口则让客户自己下载webrtcstreamer的压缩包实现监控视频的显示。我觉得这样做的可视化并不强，但是目前没有想到更好的方式实现。
欢迎大家指正不足之处，如果有更好的实现方可以评论，一起学习进步。
参考的博主链接：blog.csdn.net/m0_66509866…
