前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
北城笑笑 2024-07-22 16:03:03 阅读 85
简述：在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。这里来记录一下
详细介绍：
在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器原生的 <code><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接口类型格式
<code>http://localhost/dev-api/res/getVideo
// +
rtsp://192.168.0.77:8554/abc/test
http://localhost/dev-api/res/getVideo?path=rtsp://192.168.0.77:8554/abc/test
二. 安装插件
npm i flv.js
//或者
cnpm i flv.js
三. HTML
//定义一个 HTML 视频元素
<video
id="video_label1"code>
controls
autoplay
muted
@fullscreenchange="choseFullScreenChange"code>
></video>
//属性介绍
id="video_label1" 视频元素的唯一标识符code>
controls 显示视频控件（播放、暂停、音量等）
autoplay 页面加载时自动播放视频
muted 静音播放视频
@fullscreenchange="choseFullScreenChange" code>
监听全屏状态变化事件，触发 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("进入全屏模式");code>
// 在进入全屏时执行的逻辑
// 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;
}
},
上一篇： 使用 useNuxtData 进行高效的数据获取与管理
下一篇： 【WebGIS平台】传统聚落建筑科普数字化建模平台
本文标签
在Vue中使用插件flv.js请求RTSP视频流播放） 使用FLV请求RTSP视频流播放（Vue项目 前端播放RTSP视频流
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。