简述：在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。这里来记录一下
详细介绍：
- 在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器原生的
<video> 标签并不直接支持 RTSP 协议，也不支持 FLV 容器格式。 - FLV 是一种流行的流媒体容器格式，主要用于在线视频播放，而 RTSP 是一种用于控制实时流媒体会话的网络协议。
- flv.js 是一个开源的 JavaScript 库，它可以用于在现代浏览器中播放 FLV 格式的视频流，同时它也支持 HLS (HTTP Live Streaming) 和 DASH (Dynamic Adaptive Streaming over HTTP)。
- flv.js 能够在浏览器环境中解码和播放 FLV 流，这是因为 flv.js 内部实现了对 FLV 文件结构的理解和相应的解码逻辑。
- 当要在 Vue 中播放 RTSP 视频流时，一般需要先将 RTSP 流转换成浏览器能够理解的格式，比如 FLV 或者 HLS。这个转换过程通常发生在服务器端或者使用某种流媒体服务器软件（如 FFmpeg、SRS、Nginx RTMP 等）。转换后的流可以通过 HTTP 协议发送到客户端，这样 flv.js 就可以接收并解码这些流了。
- flv.js 并不直接支持 RTSP 协议，所以仍然需要一个中间层来将 RTSP 转换成 FLV 或其他 flv.js 支持的格式。这就是为什么在 Vue 中使用 flv.js 插件播放 RTSP 视频流时，你不能直接请求 RTSP 地址的原因。
FLV特性：
- 跨平台兼容性：flv.js 支持多种浏览器，包括 Chrome, Firefox, Safari, IE11 和 Edge。
- 硬件加速：flv.js 可以利用浏览器的硬件加速功能，提高播放效率。
- 低开销：flv.js 的设计考虑到了性能和资源消耗，可以有效管理内存和 CPU 使用。
- 适应性：flv.js 支持自适应比特率流，可以根据网络状况自动调整视频质量。
一. 首先，看下需要请求的API接口类型
http://localhost/dev-api/res/getVideo
+
rtsp://192.168.0.77:8554/Media/tingchhttp://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/Media/tingch
二. 安装插件
npm i flv.js
//或者
cnpm i flv.js
三. HTML
//定义一个 HTML 视频元素
<videoid="video_label1"controlsautoplaymuted@fullscreenchange="choseFullScreenChange"
></video>//属性介绍
id="video_label1" 视频元素的唯一标识符
controls 显示视频控件（播放、暂停、音量等）
autoplay 页面加载时自动播放视频
muted 静音播放视频
@fullscreenchange="choseFullScreenChange"
监听全屏状态变化事件，触发 choseFullScreenChange 方法
四. 请求播放函数
// 这里的flvPlayer为null
flvPlayer: null,// 引入 FLV.js 库
import flvjs from "flv.js"; callvideoDserveJudge(ulr) {// console.log(ulr);// 这里的url就是API后面拼接的RTSP视频流地址，rtsp://192.168.0.77:8554/Media/tingch// 检查当前环境是否支持 FLV.jsif (flvjs.isSupported()) {// 选择用于播放视频的 HTML 元素var videoElement = document.querySelector("#video_label1");// console.log(videoElement);// 创建 FLV 播放器实例this.flvPlayer = flvjs.createPlayer({type: "flv", // 设置视频类型为 FLVisLive: true, // 指定这是直播流hasAudio: false, // 指定视频流中没有音频// 拼接视频流的 URLurl: process.env.VUE_APP_BASE_API + "/res/getVideo?path=" + ulr, });// 将播放器绑定到 HTML 视频元素this.flvPlayer.attachMediaElement(videoElement);// 加载视频流this.flvPlayer.load();// 播放视频this.flvPlayer.play();}
}
五. 点击全屏函数
// 处理全屏变化的函数
choseFullScreenChange() {// 检查当前是否处于全屏模式const isFullScreen =document.fullscreenElement || // 标准全屏 APIdocument.webkitFullscreenElement || // WebKit 内核浏览器全屏 APIdocument.mozFullScreenElement || // Firefox 全屏 APIdocument.msFullscreenElement; // IE/Edge 全屏 APIif (isFullScreen) {// 如果当前处于全屏模式console.log("进入全屏模式");// 在进入全屏时执行的逻辑// this.$store.commit("IsStopFn", false);} else {// 如果当前不处于全屏模式console.log("退出全屏模式");// 在退出全屏时执行的逻辑// this.$store.commit("IsStopFn", true);}},
六. 点击删除函数
// 删除视频播放实例的函数
deleteVideo(flvPlayer) {// 这里的flvPlayer就是this.flvPlayer;// console.log(flvPlayer)if (flvPlayer) {// 暂停视频播放flvPlayer.pause();// 卸载视频流，释放内存flvPlayer.unload();// 解除视频元素和播放器的绑定flvPlayer.detachMediaElement();// 销毁 FLV 播放器实例flvPlayer.destroy();// 将 flvPlayer 置为 null，避免内存泄漏flvPlayer = null;}},
