簡述：在瀏覽器中請求 RTSP 視頻流并進行播放時，直接使用原生的瀏覽器 API 是行不通的，因為它們不支持 RTSP 協議。為了解決這個問題，開發者通常會選擇使用像 flv.js 這樣的庫，它專為在瀏覽器中播放 FLV 和其他流媒體格式設計。然而，flv.js 本身并不直接支持 RTSP，這意味著我們需要一個額外的步驟來橋接 RTSP 和 flv.js。這里來記錄一下

---

詳細介紹：

1. 在 Vue 中使用 flv.js 插件播放 RTSP 視頻流的主要原因是瀏覽器原生的 <video> 標簽并不直接支持 RTSP 協議，也不支持 FLV 容器格式。
2. FLV 是一種流行的流媒體容器格式，主要用于在線視頻播放，而 RTSP 是一種用于控制實時流媒體會話的網絡協議。
3. flv.js 是一個開源的 JavaScript 庫，它可以用于在現代瀏覽器中播放 FLV 格式的視頻流，同時它也支持 HLS (HTTP Live Streaming) 和 DASH (Dynamic Adaptive Streaming over HTTP)。
4. flv.js 能夠在瀏覽器環境中解碼和播放 FLV 流，這是因為 flv.js 內部實現了對 FLV 文件結構的理解和相應的解碼邏輯。
5. 當要在 Vue 中播放 RTSP 視頻流時，一般需要先將 RTSP 流轉換成瀏覽器能夠理解的格式，比如 FLV 或者 HLS。這個轉換過程通常發生在服務器端或者使用某種流媒體服務器軟件（如 FFmpeg、SRS、Nginx RTMP 等）。轉換后的流可以通過 HTTP 協議發送到客戶端，這樣 flv.js 就可以接收并解碼這些流了。
6. 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;}},