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

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

<template>
  <div>
    <img ref="image">
  </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);
        this.$refs.image.src = url;
      };
    }
  }
}
</script>

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

接着，我们将 `URL` 地址赋值给 `img` 标签的 `src` 属性，实现视频流的实时展示。

需要注意的是，使用 `img` 标签展示视频流可能会出现帧率不稳定、卡顿等问题，因为 `img` 标签本身是通过 HTTP 请求来获取图片资源的，而不是像 `video` 或 `canvas` 标签一样通过内存缓存来实现实时展示。因此，如果需要实现高质量的视频流实时展示，建议使用 `video` 或 `canvas` 标签。