简述:浏览器在请求RTSP视频流播放时,需要在Vue项目中使用插件flv.js请求播放。因为flv.js本身并不直接支持RTSP流,所以需要flv连接到转换后的视频流URL,这里来记录一下。
一. 首先,看下需要请求的API接口类型
http://localhost/dev-api/res/getVideo
+
rtsp://192.168.0.77:8554/Media/tingche2
http://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/Media/tingche2
二. 安装插件
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 方法 -->
四. 请求播放
// 引入 FLV.js 库
import flvjs from "flv.js";
callvideoDserveJudge(ulr) {
//console.log(ulr);
// 检查当前环境是否支持 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();
}
}
//这里的flvPlayer为null
flvPlayer: null,
五. 点击全屏
// 处理全屏变化的函数
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) {
if (flvPlayer) {
// 暂停视频播放
flvPlayer.pause();
// 卸载视频流,释放内存
flvPlayer.unload();
// 解除视频元素和播放器的绑定
flvPlayer.detachMediaElement();
// 销毁 FLV 播放器实例
flvPlayer.destroy();
// 将 flvPlayer 置为 null,避免内存泄漏
flvPlayer = null;
}
},