前端播放RTSP视频流

在浏览器中请求 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 地址的原因。

//定义一个 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();
 
  }
}