基于客户端处理能力的WebSocket视频流自动清晰度切换方案咨询

直接上可落地的实现思路和代码，核心是通过视频播放状态+JMuxer缓冲区监控判断客户端处理能力，完全不依赖Network Information API：

核心检测逻辑 #

不猜网络状况，直接看客户端能不能跟上解码渲染：

• 监听video元素的waiting事件：触发时说明客户端在等待帧解码/渲染，连续触发代表处理能力不足
• 监控JMuxer帧队列：如果接收的帧持续堆积（缓冲区超阈值），说明解码速度跟不上接收速度
• 播放延迟差：计算当前播放时间与最新接收帧的时间戳差值，差值持续增大代表处理不过来

实现步骤 #

1. 定义清晰度配置 #

先把清晰度层级、对应端点排序，方便升降档操作：

const QUALITY_LEVELS = [
  { name: '1080p', url: '/video?quality=1080p' },
  { name: '720p', url: '/video?quality=720p' },
  { name: '360p', url: '/video?quality=360p' }
];
let currentQualityIndex = 0; // 默认从最高清开始
let isSwitching = false; // 防频繁切换锁
const SWITCH_COOLDOWN = 5000; // 切换冷却时间5秒

2. 封装JMuxer与WebSocket管理函数 #

实现快速销毁旧连接、初始化新流的复用逻辑：

let ws = null;
let jmuxer = null;
const videoElement = document.getElementById('video-player');

// 初始化流连接
function initStream(qualityUrl) {
  // 清理旧资源
  if (ws) {
    ws.close();
    ws = null;
  }
  if (jmuxer) {
    jmuxer.destroy();
    jmuxer = null;
  }

  // 初始化JMuxer
  jmuxer = new JMuxer({
    node: videoElement,
    mode: 'video',
    flushingTime: 1000,
    onError: (err) => {
      console.error('JMuxer解码出错:', err);
      // 出错直接尝试降档
      trySwitchQuality(-1);
    }
  });

  // 建立WebSocket连接（注意协议转换）
  ws = new WebSocket(qualityUrl.replace('http', 'ws'));
  ws.binaryType = 'arraybuffer';

  ws.onmessage = (event) => {
    // 推送帧到JMuxer
    jmuxer.feed({
      video: new Uint8Array(event.data)
    });

    // 监控缓冲区堆积（阈值根据实际码率调整）
    if (jmuxer.buffer && jmuxer.buffer.length > 12) {
      trySwitchQuality(-1);
    }
  };

  ws.onclose = () => {
    console.log('当前流已断开');
  };
}

3. 监听播放状态，触发清晰度切换 #

// 统计waiting事件触发次数
let waitingCount = 0;
const WAITING_THRESHOLD = 3; // 连续3次卡顿触发降档

videoElement.addEventListener('waiting', () => {
  if (isSwitching) return;
  waitingCount++;
  if (waitingCount >= WAITING_THRESHOLD) {
    trySwitchQuality(-1);
    waitingCount = 0;
  }
});

// 播放正常时重置计数
videoElement.addEventListener('playing', () => {
  waitingCount = 0;
});

// 清晰度切换核心逻辑
function trySwitchQuality(direction) {
  if (isSwitching) return;
  const newIndex = currentQualityIndex + direction;
  // 边界判断：不能低于最低清，也不能高于最高清
  if (newIndex < 0 || newIndex >= QUALITY_LEVELS.length) return;

  isSwitching = true;
  currentQualityIndex = newIndex;
  console.log(`切换至${QUALITY_LEVELS[currentQualityIndex].name}`);
  
  initStream(QUALITY_LEVELS[currentQualityIndex].url);
  
  // 冷却时间后解锁，避免频繁切换
  setTimeout(() => {
    isSwitching = false;
  }, SWITCH_COOLDOWN);
}

// 可选：添加手动切换按钮
document.getElementById('btn-360p').addEventListener('click', () => {
  currentQualityIndex = 2;
  trySwitchQuality(0);
});

4. 实用优化点 #

• 实时流场景：切换时无需同步播放时间，直接接入新流即可；点播流场景需记录当前currentTime，初始化新流后调用videoElement.currentTime = recordedTime
• 自动升档：可添加逻辑，比如连续15秒无卡顿，自动尝试升一档（调用trySwitchQuality(1)）
• 阈值调整：WAITING_THRESHOLD、缓冲区长度、冷却时间需根据你的视频码率、目标客户端性能实际测试调整

内容的提问来源于stack exchange，提问作者Geoff