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

在 Vue 中实现后端实时返回视频流并在前端实时展示可以使用 `video` 标签和 `MediaSource` API，以下是一个简单的实现示例：

<template>
  <div>
    <video ref="videoPlayer" controls></video>
  </div>
</template>

<script>
export default {
  mounted() {
    if (window.MediaSource) {
      const mediaSource = new MediaSource();
      this.$refs.videoPlayer.src = URL.createObjectURL(mediaSource);
      mediaSource.addEventListener('sourceopen', () => {
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001f"');
        const socket = new WebSocket('ws://localhost:3000/video-stream');
        socket.onmessage = (event) => {
          sourceBuffer.appendBuffer(event.data);
        };
      });
    } else {
      console.error('MediaSource API not supported');
    }
  }
}
</script>

在这个示例中，我们使用 `video` 标签来展示视频流，当组件挂载完成后，我们初始化 `MediaSource` 对象并将其传递给 `video` 标签的 `src` 属性，然后监听 `sourceopen` 事件，在事件处理函数中创建 `sourceBuffer` 对象并将其添加到 `MediaSource` 对象中。

接着，我们通过 WebSocket 连接到服务器获取视频流数据，并在收到数据后将其添加到 `sourceBuffer` 中。这样，随着视频流数据的到来，我们就能够实时展示视频流了。

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