vue3播放实时监控视频

### 实现 Vue3 中集成并播放实时监控视频流

为了实现在 Vue 3 项目中播放实时监控视频的功能，可以采用 Web 浏览器兼容的方式通过 HTML5 `<video>` 标签来加载 RTSP 或者 HTTP-FLV/HTTP-HLS 类型的视频流。对于海康威视设备来说，通常会使用其提供的 SDK 来获取视频流地址，并将其转换成适合浏览器播放的形式。

#### 安装依赖库

考虑到直接处理 RTSP 流可能遇到跨域等问题，在实际开发过程中推荐先将 RTSP 转换成 HLS 或 FLV 协议再推送到前端展示。这里可以选择一些成熟的第三方工具如 FFmpeg 进行转码工作。另外还需要安装 `hls.js` 库用于解析 m3u8 文件：

npm install hls.js --save

#### 创建 VideoPlayer 组件

创建一个新的组件命名为 `VideoPlayer.vue`, 将负责渲染视频播放界面以及控制逻辑:

<template>
  <div class="player-container">
    <!-- 使用 video 标签 -->
    <video ref="videoRef" controls autoplay></video>
  </div>
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Hls from 'hls.js';

const props = defineProps({
  src: String,
});

// 获取 DOM 元素引用
let videoRef = ref(null);

onMounted(() => {
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(props.src);
    hls.attachMedia(videoRef.value);
    
    // 添加监听事件以便更好地管理资源释放
    window.addEventListener('beforeunload', () => {
      hls.destroy();
    });
  }
});
</script>

<style scoped>
.player-container {
  width: 100%;
}
</style>

此代码片段展示了如何利用 `hls.js` 解析来自服务器端推送过来的 M3U8 音频/视频文件[^1]。

#### 设置路由与页面布局

最后一步就是把刚刚定义好的 `VideoPlayer` 放到合适的位置上显示出来。假设已经配置好了基本的 Vue Router 和 App 布局，则可以在对应的 view 页面里引入该组件并通过属性传递具体的 URL 地址给它。

需要注意的是，这里的 `props.src` 参数应该指向经过中间件处理后的合法 HTTPS 请求路径而不是原始 RTSP 地址[^2]。