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

1
// 实时监控图片帧
2
const currentFrameImage = ref<string>('');
3
const lastFrameTime = ref<string>('');
4
const connectionError = ref<string>('');
5
const isStreamDisconnected = ref<boolean>(false);
6
const currentFps = ref<number>(0);
7
let lastFrameTimestamp = 0;
8
let previousFrameTimestamp = 0;
9
let streamCheckInterval: number | null = null;
10
let ws: WebSocket | null = null;
11
let currentImageUrl: string = '';

1
const startRealtimeMonitoring = async () => {
2
  // 关闭旧的连接
3
  stopRealtimeMonitoring();
4

5
  if (!selectedDeviceId.value) {
6
    console.log('没有选择设备，无法启动实时监控');
7
    return;
8
  }
9

10
  try {
11
    // 先刷新token
12
    let token = await refreshToken();
13
    if (!token) {
14
      connectionError.value = '未登录，请先登录';
15
      return;
16
    }
17

18
    // 建立WebSocket连接
19
    const wsUrl = `/api/stream/viewer/ws/${selectedDeviceId.value}?token=${token}`;
20
    ws = new WebSocket(wsUrl);
21

22
    // 监听连接打开事件
23
    ws.onopen = () => {
24
      console.log('WebSocket连接已建立');
25
      connectionError.value = '';
26
      lastFrameTimestamp = Date.now();
27
      isStreamDisconnected.value = false;
28

29
      // 启动定时器检查图片流是否更新
30
      streamCheckInterval = window.setInterval(() => {
31
        const now = Date.now();
32
        if (now - lastFrameTimestamp > 2000 && currentFrameImage.value) {
33
          isStreamDisconnected.value = true;
34
        }
35
      }, 2500);
36
    };
37
    // ... 其他事件监听
38
  }
39
};

1
const handleFrameData = (data: any) => {
2
  try {
3
    let blob: Blob;
4
    if (typeof data === 'string') {
5
      // base64编码的图片数据
6
      blob = base64ToBlob(data);
7
    } else if (data instanceof Blob) {
8
      blob = data;
9
    } else if (data instanceof ArrayBuffer) {
10
      blob = new Blob([data], { type: 'image/jpeg' });
11
    } else if (data instanceof Uint8Array) {
12
      blob = new Blob([data as any], { type: 'image/jpeg' });
13
    } else {
14
      throw new Error('不支持的数据类型');
15
    }
16

17
    // 释放旧的URL对象
18
    if (currentImageUrl) {
19
      URL.revokeObjectURL(currentImageUrl);
20
    }
21

22
    // 创建新的URL
23
    currentImageUrl = URL.createObjectURL(blob);
24
    currentFrameImage.value = currentImageUrl;
25
    lastFrameTime.value = new Date().toLocaleTimeString('zh-CN');
26

27
    // 计算帧率
28
    const now = Date.now();
29
    if (previousFrameTimestamp > 0) {
30
      const frameInterval = now - previousFrameTimestamp;
31
      currentFps.value = Math.round(1000 / frameInterval);
32
    }
33
    previousFrameTimestamp = now;
34
    lastFrameTimestamp = now;
35
    isStreamDisconnected.value = false;
36
  } catch (error) {
37
    console.error('处理图片数据失败:', error);
38
  }
39
};

1
// 视频质量控制
2
const imageQuality = ref(32); // 默认画质为32
3
const frameSize = ref('FRAMESIZE_VGA'); // 默认视频尺寸
4

5
// 发送画质设置到WebSocket连接
6
const sendStreamQuality = async (quality: number) => {
7
  if (!ws || ws.readyState !== WebSocket.OPEN) {
8
    console.warn('WebSocket连接未建立，无法发送画质设置');
9
    return;
10
  }
11

12
  const message = JSON.stringify({
13
    code: 1,
14
    item: 'camera',
15
    key: 'jpeg_quality',
16
    values: quality.toString()
17
  });
18

19
  console.log('向ws连接发送画质设置:', message);
20

21
  try {
22
    ws.send(message);
23
  } catch (error) {
24
    console.error('发送画质设置失败:', error);
25
  }
26
};
27

28
// 监听滑块变化
29
watch(imageQuality, (newQuality) => {
30
  // 双端统一：1-63 -> 63-1（反转值，滑块值越大质量越高）
31
  const invertedQuality = 63 - newQuality;
32
  sendStreamQuality(invertedQuality);
33
});

1
// 发送视频尺寸设置到WebSocket连接
2
const sendFrameSize = async (size: string) => {
3
  if (!ws || ws.readyState !== WebSocket.OPEN) {
4
    console.warn('WebSocket连接未建立，无法发送视频尺寸设置');
5
    return;
6
  }
7

8
  const message = JSON.stringify({
9
    code: 1,
10
    item: 'camera',
11
    key: 'frame_size',
12
    values: size
13
  });
14

15
  console.log('向ws连接发送视频尺寸设置:', message);
16

17
  try {
18
    ws.send(message);
19
  } catch (error) {
20
    console.error('发送视频尺寸设置失败:', error);
21
  }
22
};
23

24
// 监听视频尺寸变化
25
watch(frameSize, (newSize) => {
26
  sendFrameSize(newSize);
27
});

1
<template>
2
  <div class="video-controls">
3
    <div class="quality-control">
4
      <span class="quality-label">视频质量</span>
5
      <el-slider
6
        v-model="imageQuality"
7
        :min="1"
8
        :max="63"
9
        :step="1"
10
        :show-tooltip="false"
11
        style="width: 120px"
12
      />
13
    </div>
14
    <div class="quality-control">
15
      <span class="quality-label">视频尺寸</span>
16
      <el-select v-model="frameSize" style="width: 120px" size="small">
17
        <el-option label="128x128" value="FRAMESIZE_128X128" />
18
        <el-option label="240x240" value="FRAMESIZE_240X240" />
19
        <el-option label="320x320" value="FRAMESIZE_320X320" />
20
        <el-option label="VGA" value="FRAMESIZE_VGA" />
21
        <el-option label="SVGA" value="FRAMESIZE_SVGA" />
22
        <el-option label="HD" value="FRAMESIZE_HD" />
23
        <el-option label="FHD" value="FRAMESIZE_FHD" />
24
      </el-select>
25
    </div>
26
  </div>
27
</template>

1
<template>
2
  <!-- 移动端视频控制 -->
3
  <div class="video-settings">
4
    <div class="setting-item">
5
      <span class="setting-label">画质</span>
6
      <el-slider
7
        v-model="imageQuality"
8
        :min="1"
9
        :max="63"
10
        :step="1"
11
        :show-tooltip="false"
12
        size="small"
13
        style="flex: 1; margin-left: 8px;"
14
      />
15
    </div>
16
    <div class="setting-item">
17
      <span class="setting-label">视频尺寸</span>
18
      <el-select v-model="frameSize" style="flex: 1; margin-left: 8px;" size="small">
19
        <el-option label="128x128" value="FRAMESIZE_128X128" />
20
        <!-- ... 其他选项 -->
21
      </el-select>
22
    </div>
23
  </div>
24
</template>

1
// 新的连接模式：一个WebSocket对应一个设备
2
const wsUrl = `/api/stream/viewer/ws/${selectedDeviceId.value}?token=${token}`;
3
ws = new WebSocket(wsUrl);
4

5
// 新的连接模式不需要单独发送请求开启设备推流
6
// 服务器自动根据URL中的设备ID开始推流

1
ws.onmessage = (event) => {
2
  try {
3
    // 检查是否是设备断开的文本消息
4
    if (typeof event.data === 'string' && event.data.includes('设备已断开')) {
5
      console.log('收到设备断开消息:', event.data);
6
      connectionError.value = '设备已断开';
7
      return;
8
    }
9

10
    // 尝试解析JSON数据（控制命令响应）
11
    try {
12
      const data = JSON.parse(event.data);
13
      if (data.code === 1 && data.key === 'jpeg_quality') {
14
        console.log('画质设置成功:', data);
15
      } else if (data.code === 1 && data.key === 'frame_size') {
16
        console.log('视频尺寸设置成功:', data);
17
      } else if (data.code === 400) {
18
        console.error('订阅失败:', data.msg);
19
        connectionError.value = '订阅失败';
20
      }
21
    } catch (jsonError) {
22
      // 如果不是JSON数据，处理为二进制图片数据
23
      handleFrameData(event.data);
24
    }
25
  } catch (error) {
26
    console.error('解析WebSocket消息失败:', error);
27
  }
28
};

1
1. 用户选择设备
2
   ↓
3
2. 获取访问token
4
   ↓
5
3. 建立WebSocket连接 (/api/stream/viewer/ws/{deviceId}?token={token})
6
   ↓
7
4. 连接成功，开始接收视频帧
8
   ↓
9
5. 可发送控制命令（画质、分辨率）
10
   ↓
11
6. 用户切换设备或离开页面时关闭连接

1
// 释放旧的URL对象防止内存泄漏
2
if (currentImageUrl) {
3
  URL.revokeObjectURL(currentImageUrl);
4
}
5
currentImageUrl = URL.createObjectURL(blob);

1
// 每2.5秒检查一次是否收到新帧
2
streamCheckInterval = window.setInterval(() => {
3
  const now = Date.now();
4
  if (now - lastFrameTimestamp > 2000 && currentFrameImage.value) {
5
    isStreamDisconnected.value = true;
6
  }
7
}, 2500);

1
const handleFrameData = (data: any) => {
2
  let blob: Blob;
3
  if (typeof data === 'string') {
4
    blob = base64ToBlob(data);
5
  } else if (data instanceof Blob) {
6
    blob = data;
7
  } else if (data instanceof ArrayBuffer) {
8
    blob = new Blob([data], { type: 'image/jpeg' });
9
  } else if (data instanceof Uint8Array) {
10
    blob = new Blob([data as any], { type: 'image/jpeg' });
11
  }
12
  // ...
13
};

1
// 值反转：UI显示1-63（低-高），实际发送63-1
2
watch(imageQuality, (newQuality) => {
3
  const invertedQuality = 63 - newQuality;
4
  sendStreamQuality(invertedQuality);
5
});