简述：在浏览器中请求 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/tingch
http://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/Media/tingch
二. 安装插件
npm i flv.js
//或者
cnpm i flv.js
三. HTML
//定义一个 HTML 视频元素
<video
id="video_label1"
controls
autoplay
muted
@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.js
if (flvjs.isSupported()) {
// 选择用于播放视频的 HTML 元素
var videoElement = document.querySelector("#video_label1");
// console.log(videoElement);
// 创建 FLV 播放器实例
this.flvPlayer = flvjs.createPlayer({
type: "flv", // 设置视频类型为 FLV
isLive: true, // 指定这是直播流
hasAudio: false, // 指定视频流中没有音频
// 拼接视频流的 URL
url: 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 || // 标准全屏 API
document.webkitFullscreenElement || // WebKit 内核浏览器全屏 API
document.mozFullScreenElement || // Firefox 全屏 API
document.msFullscreenElement; // IE/Edge 全屏 API
if (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;
}
},
