前端播放RTSP视频流

在浏览器中请求 RTSP 视频流，并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，我们通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js

在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器原生的

//定义一个 HTML 视频元素

 
//属性介绍
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();
 
  }
}