go2rtc MSE 다채널 테스트와 무한 로딩 분석 및 해결

this.onmessage["mse"] = (msg) => {
  if (msg.type !== "mse") return;
 
  this.mseCodecs = msg.value;
 
  const sb = ms.addSourceBuffer(msg.value);
  sb.mode = "segments"; // segments or sequence
  sb.addEventListener("updateend", () => {
    if (!sb.updating && bufLen > 0) {
      try {
        const data = buf.slice(0, bufLen);
        sb.appendBuffer(data);
        bufLen = 0;
      } catch (e) {
        console.debug("[VideoRTC][MSE] updateend but NO buffered", e);
      }
    }
 
    if (!sb.updating && sb.buffered && sb.buffered.length) {
      const end = sb.buffered.end(sb.buffered.length - 1);
      const start = end - 5;
      const start0 = sb.buffered.start(0);
      if (start > start0) {
        // console.debug('[VideoRTC][MSE] trim', {from: start0.toFixed(2), to: start.toFixed(2)});
        sb.remove(start0, start);
        ms.setLiveSeekableRange(start, end);
      }
      if (this.video.currentTime < start) {
        console.debug("[VideoRTC][MSE] seekToLive", { to: start.toFixed(2) });
        this.video.currentTime = start;
      }
      const gap = end - this.video.currentTime;
      const nextRate = gap > 0.1 ? gap : 0.1;
      // console.debug('[VideoRTC][MSE] rate', {nextRate});
      this.video.playbackRate = nextRate;
      // console.debug('VideoRTC.buffered', gsap, this.video.playbackRate, this.video.readyState);
    }
  });
 
  const buf = new Uint8Array(2 * 1024 * 1024);
  let bufLen = 0;
  const BUF_MAX = buf.byteLength;
 
  this.ondata = (data) => {
    if (sb.updating || bufLen > 0) {
      try {
        const b = new Uint8Array(data);
 
        // bounds check (BUF_MAX)
        if (bufLen + b.byteLength > BUF_MAX) {
          console.debug("[VideoRTC][MSE] buf overflow -> drop & reconnect", {
            bufLen,
            incoming: b.byteLength,
            BUF_MAX,
          });
          bufLen = 0;
 
          // ws 재연결
          if (this.ws) this.ws.close();
          return;
        }
 
        buf.set(b, bufLen);
        bufLen += b.byteLength;
      } catch (e) {
        console.debug("[VideoRTC][MSE] buffer set FAIL", e.name, e.message, {
          bufLen,
        });
        bufLen = 0;
        // ws 재연결
        if (this.ws) this.ws.close();
      }
    } else {
      try {
        sb.appendBuffer(data);
      } catch (e) {
        // DEBUG
        console.debug("[VideoRTC][MSE] appendBuffer FAIL", e.name, e.message);
        // ws 재연결
        if (this.ws) this.ws.close();
      }
    }
  };
};

this.onmessage["mse"] = (msg) => {
  if (msg.type !== "mse") return;
 
  this.mseCodecs = msg.value;
 
  const sb = ms.addSourceBuffer(msg.value);
  sb.mode = "segments"; // segments or sequence
 
  // ====== VMS / 관제용 안정화 파라미터 ======
  // - playbackRate는 1.0 고정 (gap 기반 제어 제거)
  // - 버퍼가 너무 얇으면 live edge로 점프
  // - 버퍼가 너무 두꺼워(지연 누적)도 점프
  const FIXED_RATE = 1.0;
  const MIN_GAP_SEC = 0.3; // underflow 방지: end-currentTime이 0.3s 미만이면 점프
  const JUMP_BEHIND_LIVE_SEC = 0.8; // 점프할 때 live edge에서 0.8s 뒤로 붙음
  const MAX_GAP_SEC = 2.0; // 지연 누적: gap이 2.5s 초과면 점프해서 따라잡음
  // =========================================
 
  sb.addEventListener("updateend", () => {
    // 1) pending buffer flush
    if (!sb.updating && bufLen > 0) {
      try {
        const data = buf.slice(0, bufLen);
        sb.appendBuffer(data);
        bufLen = 0;
      } catch (e) {
        console.debug(
          "[VideoRTC][MSE] flush appendBuffer FAIL",
          e.name,
          e.message,
          { bufLen },
        );
        // 라이브 관제: 누적 고착 방지
        bufLen = 0;
        // 반복 실패는 재연결이 가장 깔끔
        if (this.ws) this.ws.close();
        return;
      }
    }
 
    // 2) trim + live range + seek-to-live
    if (!sb.updating && sb.buffered && sb.buffered.length) {
      const end = sb.buffered.end(sb.buffered.length - 1);
      const start = end - 5;
      const start0 = sb.buffered.start(0);
 
      if (start > start0) {
        sb.remove(start0, start);
        ms.setLiveSeekableRange(start, end);
      }
 
      // (A) 너무 뒤로 밀린 경우: live 범위로 당김
      if (this.video.currentTime < start) {
        console.debug("[VideoRTC][MSE] seekToLive(min)", {
          to: start.toFixed(2),
        });
        this.video.currentTime = start;
      }
 
      // (B) 관제용 제어: playbackRate 1.0 고정
      if (this.video.playbackRate !== FIXED_RATE) {
        this.video.playbackRate = FIXED_RATE;
      }
 
      // (C) gap 기반 점프: underflow/latency 누적 둘 다 대응
      const gap = end - this.video.currentTime;
 
      // underflow 직전: 너무 live edge에 붙어있으면 약간 뒤로 점프해서 버퍼를 확보
      if (gap > 0 && gap < MIN_GAP_SEC) {
        const to = Math.max(end - JUMP_BEHIND_LIVE_SEC, start);
        console.debug("[VideoRTC][MSE] jump(underflow)", {
          gap: gap.toFixed(3),
          to: to.toFixed(2),
          end: end.toFixed(2),
        });
        this.video.currentTime = to;
      }
 
      // 지연 누적: gap이 너무 크면 따라잡기(관제에선 지연이 커지는 걸 방지)
      if (gap > MAX_GAP_SEC) {
        const to = Math.max(end - JUMP_BEHIND_LIVE_SEC, start);
        console.debug("[VideoRTC][MSE] jump(latency)", {
          gap: gap.toFixed(3),
          to: to.toFixed(2),
          end: end.toFixed(2),
        });
        this.video.currentTime = to;
      }
    }
  });
 
  // 2MB pending buffer (WebSocket burst / sb.updating 동안 누적)
  const buf = new Uint8Array(2 * 1024 * 1024);
  let bufLen = 0;
  const BUF_MAX = buf.byteLength;
 
  this.ondata = (data) => {
    if (sb.updating || bufLen > 0) {
      try {
        const b = new Uint8Array(data);
 
        // bounds check (BUF_MAX)
        if (bufLen + b.byteLength > BUF_MAX) {
          console.debug("[VideoRTC][MSE] buf overflow -> drop & reconnect", {
            bufLen,
            incoming: b.byteLength,
            BUF_MAX,
          });
          bufLen = 0;
 
          // 재연결(라이브 관제: 드롭 후 복구가 최우선)
          if (this.ws) this.ws.close();
          return;
        }
 
        buf.set(b, bufLen);
        bufLen += b.byteLength;
      } catch (e) {
        console.debug("[VideoRTC][MSE] buffer set FAIL", e.name, e.message, {
          bufLen,
        });
        bufLen = 0;
        if (this.ws) this.ws.close();
      }
    } else {
      try {
        sb.appendBuffer(data);
      } catch (e) {
        console.debug("[VideoRTC][MSE] appendBuffer FAIL", e.name, e.message);
        if (this.ws) this.ws.close();
      }
    }
  };
};