阅读量:0
简述：在浏览器中请求 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/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" 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; } },