vue3不通过转码直接在页面上播放rtsp格式的视频流

在Vue3中，直接在页面上播放RTSP格式的视频流通常需要借助WebRTC技术，结合HTML5的`<video>`元素以及一些第三方库，如`vue-video-player`、`jsmpeg`等。以下是大致步骤：

1. **安装依赖**:
使用npm或yarn安装适合处理RTSP直播的库，比如`vue-websocket-video-player` 或者 `jsmpeg`。

npm install vue-websocket-video-player
# 或
yarn add vue-websocket-video-player jsmpeg

2. **创建视频组件**:
创建一个自定义的Vue组件，并配置它支持RTSP源：

<template>
  <div>
    <video-player :url="streamUrl" :controls></video-player>
  </div>
</template>

<script>
import VideoPlayer from 'vue-websocket-video-player';

export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
      streamUrl: '', // 实际的RTSP地址
    };
  },
  methods: {
    startStream(url) {
      this.streamUrl = url;
      this.videoPlayer.start();
    },
    stopStream() {
      this.videoPlayer.stop();
      this.streamUrl = '';
    },
  },
};
</script>

3. **连接到RTSP服务器**:
需要在JavaScript里设置WebSocket连接到RTSP服务器，并将接收到的数据传递给`VideoPlayer`组件：

import { createSocket } from 'jsmpeg';
// ...

methods: {
  async startStream(url) {
    const socket = createSocket(url);
    socket.on('data', (data) => {
      this.$refs.videoPlayer.srcObject = new Blob([data], { type: 'video/webm' });
    });

    try {
      await socket.connect();
      // 开始播放
      this.startStream(url);
    } catch (error) {
      console.error('Error connecting to RTSP:', error);
    }
  },
}

4. **停止播放**:
当需要停止播放时，调用`stopStream()`方法关闭连接。

**注意**：
- 实际应用中，你需要确保服务器允许跨域访问，或者在后端设置CORS策略。
- WebRTC对设备性能有一定要求，尤其是对于实时视频流，可能会占用较多带宽和CPU资源。