vue3 websocket 获取视频流

### 在 Vue3 中使用 WebSocket 接收视频流

为了实现在 Vue3 项目中通过 WebSocket 获取并播放视频流，可以按照如下方法构建应用逻辑：

#### 准备工作
确保后端已经配置好能够发送视频帧数据的 WebSocket 服务。前端部分则需引入必要的库来处理 WebSockets 连接以及媒体流解析。

#### 前端实现步骤概述

创建 WebSocket 对象实例用于建立到服务器的连接[^1]：

let socketUrl = 'ws://yourserveraddress:port'; // 替换成实际地址
const ws = new WebSocket(socketUrl);

监听来自服务器的消息事件，并对接收到的数据进行适当处理以便于显示视频内容。通常情况下，这些二进制数据会被转换成 `Blob` 或者直接作为 MediaSource 输入源的一部分。

对于视频流的具体展示，在 HTML 页面上放置 `<video>` 标签用来承载最终渲染出来的影像资料：

<template>
  <div id="app">
    <!-- Video element to display the stream -->
    <video autoplay playsinline></video>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// Define a reference to hold video element
const videoRef = ref(null);

onMounted(() => {
  const ws = new WebSocket('ws://yourserveraddress:port');

  ws.onmessage = function(event) {
    if (event.data instanceof Blob) {
      // Create an object URL for the received blob and set it as source of video tag.
      const urlCreator = window.URL || window.webkitURL;
      const videoUrl = urlCreator.createObjectURL(event.data);
      videoRef.value.src = videoUrl;

      // Clean up after playing or when component unmounts
      videoRef.value.addEventListener('ended', () => {
        urlCreator.revokeObjectURL(videoUrl);
      });
    }
  };
});
</script>

此代码片段展示了如何利用 JavaScript 的 `ref()` 方法绑定 DOM 节点至响应式变量 `videoRef` 上；当组件挂载完成后初始化 WebSocket 并设置消息回调函数负责更新视图中的视频资源链接[^2]。

注意：上述例子假设服务器是以单个完整的 media 文件形式传输给客户端。如果采用分片传送的方式，则还需要额外考虑拼接各段数据形成完整文件再供播放器读取等问题。