WebSocket 实时视频流传输技术实践：从连接建立到画质控制#

1
// 核心状态管理
2
const currentFrameImage = ref<string>('');
3
const isStreamDisconnected = ref<boolean>(false);
4
const currentFps = ref<number>(0);
5
let ws: WebSocket | null = null;
6
let currentImageUrl: string = '';
7

8
// 连接建立流程
9
const startRealtimeMonitoring = async () => {
10
  // 先关闭旧的连接，避免连接泄漏
11
  stopRealtimeMonitoring();
12

13
  // 获取Token，建立连接
14
  const token = await refreshToken();
15
  const wsUrl = `/api/stream/viewer/ws/${deviceId}?token=${token}`;
16
  ws = new WebSocket(wsUrl);
17

18
  // 连接状态检测：2.5秒检查一次，2秒无新帧标记为断开
19
  ws.onopen = () => {
20
    streamCheckInterval = window.setInterval(() => {
21
      if (Date.now() - lastFrameTimestamp > 2000) {
22
        isStreamDisconnected.value = true;
23
      }
24
    }, 2500);
25
  };
26
};

1
const handleFrameData = (data: any) => {
2
  // 兼容多种数据格式：base64、Blob、ArrayBuffer、Uint8Array
3
  let blob: Blob;
4
  if (typeof data === 'string') blob = base64ToBlob(data);
5
  else if (data instanceof Blob) blob = data;
6
  else if (data instanceof ArrayBuffer) blob = new Blob([data], { type: 'image/jpeg' });
7
  else if (data instanceof Uint8Array) blob = new Blob([data], { type: 'image/jpeg' });
8

9
  // 释放旧的URL，防止内存泄漏
10
  if (currentImageUrl) URL.revokeObjectURL(currentImageUrl);
11
  // 创建新的URL用于图片展示
12
  currentImageUrl = URL.createObjectURL(blob);
13
  currentFrameImage.value = currentImageUrl;
14

15
  // 计算实时帧率
16
  const now = Date.now();
17
  currentFps.value = Math.round(1000 / (now - previousFrameTimestamp));
18
  previousFrameTimestamp = now;
19
  lastFrameTimestamp = now;
20
};

1
// 发送画质设置到设备
2
const sendStreamQuality = async (quality: number) => {
3
  if (!ws || ws.readyState !== WebSocket.OPEN) return;
4

5
  // 双向控制协议
6
  const message = JSON.stringify({
7
    code: 1,
8
    item: 'camera',
9
    key: 'jpeg_quality',
10
    values: quality.toString()
11
  });
12
  ws.send(message);
13
};
14

15
// 监听滑块变化，自动反转值适配用户直觉
16
watch(imageQuality, (newQuality) => {
17
  // 设备的参数是值越小质量越高，所以我们反转UI的值
18
  // UI滑块：1-63（低-高），实际发送：63-1
19
  const invertedQuality = 63 - newQuality;
20
  sendStreamQuality(invertedQuality);
21
});

1
ws.onmessage = (event) => {
2
  // 先处理文本消息：控制命令响应、断开通知
3
  if (typeof event.data === 'string') {
4
    try {
5
      // 尝试解析为JSON，处理控制响应
6
      const data = JSON.parse(event.data);
7
      // 处理画质、分辨率的设置响应
8
    } catch {
9
      // 普通文本消息，比如断开通知
10
      connectionError.value = event.data;
11
    }
12
  } else {
13
    // 二进制数据，处理为视频帧
14
    handleFrameData(event.data);
15
  }
16
};

1
1. 用户选择要监控的设备
2
   ↓
3
2. 获取访问Token，保证连接的安全性
4
   ↓
5
3. 建立WebSocket连接：/api/stream/viewer/ws/{deviceId}?token={token}
6
   ↓
7
4. 连接成功，开始接收视频帧，同时可以发送控制命令
8
   ↓
9
5. 用户切换设备或离开页面时，自动关闭连接