后端实时返回视频流，前端如何实时展示，vue代码如何实现，video除外

如果不使用 `video` 标签来展示视频流，可以使用 `canvas` 标签来实现。以下是一个简单的 Vue 示例：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      const ws = new WebSocket('ws://localhost:3000/video-stream');
      ws.binaryType = 'arraybuffer';
      ws.onmessage = (event) => {
        const blob = new Blob([event.data], { type: 'image/jpeg' });
        const url = URL.createObjectURL(blob);
        const img = new Image();
        img.onload = () => {
          const canvas = this.$refs.canvas;
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, img.width, img.height);
          URL.revokeObjectURL(url);
        };
        img.src = url;
      };
    }
  }
}
</script>

在这个示例中，我们使用 WebSocket 连接到服务器获取视频流数据，并在收到数据后将其转换为 `Blob` 对象，并通过 `URL.createObjectURL` 方法将其转换为可访问的 URL 地址。

接着，我们创建一个 `Image` 对象并将其加载到 `canvas` 中，实现视频流的实时展示。需要注意的是，我们需要在 `Image` 对象的 `onload` 事件处理函数中将 `Blob` 对象的 URL 地址释放掉，否则可能会导致内存泄漏。

需要注意的是，这个示例也只是一个简单的实现，实际情况中需要考虑更多的细节问题，例如视频编解码格式、视频分辨率、网络带宽等。