@xmov/avatar 2.0.0-alpha.38

package/src/view/DebugOverlay.ts

@@ -0,0 +1,404 @@
+import { EErrorCode, type SDKError } from "../types/error";
+import { type ISessionResponse } from "../modules/ResourceManager";
+import { formatTimestamp } from "../utils/time";
+
+/**
+ * 调试信息浮层（支持复制会话ID + 禁止疯狂刷新DOM）
+ */
+export class DebugOverlay {
+  private container: HTMLDivElement | null = null;
+  private sdkContainer: HTMLElement | null = null;
+  private sdk: any;
+  private sessionInfo: ISessionResponse;
+  private startTime: number;
+  private updateInterval: number | null = null;
+
+  private errors: SDKError[] = [];
+  private fps: number = 0;
+  private frameCount: number = 0;
+  private lastFpsUpdate: number = performance.now();
+
+  private videoInfo: { name: string; body_id: number; id: number } = {
+    name: "",
+    body_id: 0,
+    id: 0,
+  };
+  private audioInfo: { sf: number; ef: number; ad: Uint8Array } = {
+    sf: 0,
+    ef: 0,
+    ad: new Uint8Array(),
+  };
+  private eventInfo: { sf: number; ef: number; event: any[] } = {
+    sf: 0,
+    ef: 0,
+    event: [],
+  };
+
+  private memoryInfo: {
+    jsHeapSizeLimit?: number;
+    totalJSHeapSize?: number;
+    usedJSHeapSize?: number;
+  } = {};
+
+  private perfMetrics: Record<
+    string,
+    { times: number[]; avg: number; last: number; count: number }
+  > = {};
+  private currentFrameIndex: number = 0;
+
+  private domRefs: Record<string, HTMLElement> = {};
+
+  constructor(sdk: any, sessionInfo: ISessionResponse) {
+    this.sdk = sdk;
+    this.sdkContainer = sdk.el;
+    this.sessionInfo = sessionInfo;
+    this.startTime = Date.now();
+    this.trackFPS();
+    this.trackMemory();
+  }
+
+  setAudioInfo(info: { sf: number; ef: number; ad: Uint8Array }) {
+    this.audioInfo = info;
+  }
+
+  setEventData(info: { sf: number; ef: number; event: any[] }) {
+    this.eventInfo = info;
+  }
+
+  addError(error: SDKError) {
+    this.errors.unshift(error);
+    if (this.errors.length >= 20) this.errors.pop();
+  }
+
+  public show(): void {
+    if (this.container) {
+      this.container.style.display = "block";
+      return;
+    }
+    this.createOverlay();
+    this.updateInterval = window.setInterval(() => this.updateTextOnly(), 200);
+    this.updateTextOnly();
+  }
+
+  public hide(): void {
+    if (this.container) this.container.style.display = "none";
+    if (this.updateInterval) {
+      clearInterval(this.updateInterval);
+      this.updateInterval = null;
+    }
+  }
+
+  public destroy(): void {
+    this.hide();
+    if (this.container?.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+    this.container = null;
+  }
+
+  setVideoInfo(info: any) {
+    this.videoInfo = info;
+  }
+
+  private updateTextOnly(): void {
+    if (!this.container) return;
+
+    this.sessionInfo.session_id = this.sdk.resourceManager.session_id;
+    this.currentFrameIndex =
+      this.sdk.renderScheduler.frameAnimationController?.getCurrentFrame() ?? 0;
+
+    this.updatePerfMetrics();
+    this.updateMemory();
+
+    this.setText("look_name", this.sessionInfo.config.look_name);
+    this.setText("video_name", `${this.videoInfo.name} - ${this.videoInfo.body_id}`);
+    this.setText("session_id", this.sessionInfo.session_id);
+    this.setText("frame_idx", String(this.currentFrameIndex));
+    this.setText(
+      "audio_info",
+      `开始帧: ${this.audioInfo.sf} / 结束帧: ${this.audioInfo.ef} / 长度: ${this.audioInfo.ad.length}`
+    );
+    this.setText(
+      "event_info",
+      `开始帧: ${this.eventInfo.sf} / 结束帧: ${this.eventInfo.ef} / 长度: ${this.eventInfo.event.length}`
+    );
+
+    this.setText("perf", this.formatPerfMetrics());
+    this.setText("fps", String(this.fps));
+    this.setText("mem", this.formatMemory());
+
+    const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
+    this.setText("session_start", formatTimestamp(this.sessionInfo.session_start_time));
+    this.setText("session_duration", `${duration}s`);
+    this.setText("network", this.getNetworkInfo());
+
+    this.setText("error_count", `(${this.errors.length})`);
+    this.setText("error_log", this.formatErrors(false));
+    this.setText("ttsa_error_log", this.formatErrors(true));
+  }
+
+  private setText(id: string, text: string) {
+    const el = this.domRefs[id];
+    if (el) el.innerHTML = text;
+  }
+
+  // 🔥 复制会话 ID 功能
+  private copySessionId() {
+    const sessionId = this.sessionInfo.session_id;
+    if (!sessionId) return;
+    navigator.clipboard.writeText(sessionId).then(() => {
+    }).catch(err => {
+      console.warn("复制失败", err);
+    });
+  }
+
+  private createOverlay(): void {
+    this.container = document.createElement("div");
+    this.container.id = "sdk-debug-overlay";
+    this.applyStyles(this.container);
+    this.container.style.userSelect = "text";
+
+    const make = (id: string, label: string, value = "") => {
+      const d = document.createElement("div");
+      d.style.marginBottom = "8px";
+      d.innerHTML = `<span style="color:#888;font-size:11px;">${label}:</span>`;
+      const v = document.createElement("span");
+      v.style.color = "#fff";
+      v.style.fontSize = "11px";
+      v.style.marginLeft = "4px";
+      v.textContent = value;
+      d.append(v);
+      this.domRefs[id] = v;
+      return d;
+    };
+
+    // ==========================
+    // 🔥 带复制按钮的会话 ID
+    // ==========================
+    const makeSessionIdWithCopy = () => {
+      const d = document.createElement("div");
+      d.style.marginBottom = "8px";
+      d.style.display = "flex";
+      d.style.alignItems = "center";
+      d.style.gap = "6px";
+
+      const label = document.createElement("span");
+      label.style.color = "#888";
+      label.style.fontSize = "11px";
+      label.textContent = "会话 ID:";
+
+      const value = document.createElement("span");
+      value.style.color = "#fff";
+      value.style.fontSize = "11px";
+      value.style.wordBreak = "break-all";
+      value.style.flex = "1";
+      this.domRefs["session_id"] = value;
+
+      const copyBtn = document.createElement("button");
+      copyBtn.textContent = "复制";
+      copyBtn.style.fontSize = "10px";
+      copyBtn.style.padding = "2px 6px";
+      copyBtn.style.borderRadius = "3px";
+      copyBtn.style.border = "none";
+      copyBtn.style.background = "#007aff";
+      copyBtn.style.color = "#fff";
+      copyBtn.style.cursor = "pointer";
+      copyBtn.onclick = () => this.copySessionId();
+
+      d.append(label, value, copyBtn);
+      return d;
+    };
+
+    const title = document.createElement("h3");
+    title.textContent = "🔍 调试信息";
+    title.style.margin = "0 0 12px 0";
+    title.style.color = "#00ff88";
+    title.style.fontSize = "14px";
+
+    const content = document.createElement("div");
+    content.append(
+      title,
+      make("look_name", "角色look_name"),
+      make("video_name", "当前视频"),
+      makeSessionIdWithCopy(), // 🔥 替换成带复制按钮的
+      make("frame_idx", "当前帧"),
+      make("audio_info", "下发音频"),
+      make("event_info", "下发事件"),
+      make("fps", "FPS"),
+    );
+
+    const perfTitle = document.createElement("div");
+    perfTitle.style.marginBottom = "8px";
+    perfTitle.innerHTML = `<span style="color:#888;font-size:11px;">性能耗时:</span>`;
+    const perf = document.createElement("div");
+    perf.style.fontSize = "11px";
+    perf.style.background = "rgba(0,0,0,0.2)";
+    perf.style.padding = "4px";
+    perf.style.borderRadius = "4px";
+    perf.style.color = "#fff";
+    this.domRefs["perf"] = perf;
+    content.append(perfTitle, perf);
+
+    const errWrap = document.createElement("div");
+    errWrap.style.borderTop = "1px solid #444";
+    errWrap.style.paddingTop = "8px";
+    errWrap.style.marginBottom = "8px";
+
+    const errTitle = document.createElement("h4");
+    errTitle.style.margin = "0 0 6px 0";
+    errTitle.style.fontSize = "12px";
+    errTitle.style.color = "#888";
+    const errCount = document.createElement("span");
+    this.domRefs["error_count"] = errCount;
+    errTitle.append("✅ 错误日志 ", errCount);
+    errWrap.append(errTitle);
+
+    const makePre = (id: string) => {
+      const p = document.createElement("pre");
+      p.style.margin = "0 0 4px 0";
+      p.style.padding = "6px";
+      p.style.background = "rgba(255,255,255,0.05)";
+      p.style.borderRadius = "4px";
+      p.style.fontSize = "10px";
+      p.style.lineHeight = "1.3";
+      p.style.color = "#888";
+      p.style.maxHeight = "120px";
+      p.style.overflowY = "auto";
+      p.style.whiteSpace = "pre-wrap";
+      this.domRefs[id] = p;
+      return p;
+    };
+
+    const errLog = makePre("error_log");
+    const ttsaLog = makePre("ttsa_error_log");
+    errWrap.append(errLog, ttsaLog);
+    content.append(errWrap);
+
+    content.append(
+      make("mem", "内存占用"),
+      make("session_start", "会话开始时间"),
+      make("session_duration", "会话时长"),
+      make("network", "网络信息")
+    );
+
+    this.container.append(content);
+    this.sdkContainer?.appendChild(this.container);
+    this.enableDrag(this.container);
+  }
+
+  private formatErrors(isTtsa: boolean): string {
+    let list = this.errors;
+    if (isTtsa) list = list.filter(e => e.code === EErrorCode.TTSA_ERROR);
+    else list = list.filter(e => e.code !== EErrorCode.TTSA_ERROR);
+    if (list.length === 0) return "暂无错误";
+    return list
+      .map(e => `[${new Date(e.timestamp).toLocaleTimeString()}] ${e.code}: ${e.message}`)
+      .join("\n");
+  }
+
+  private updatePerfMetrics() {
+    if (!(window as any).performanceTracker) return;
+    const raw = (window as any).performanceTracker.getVideoMetrics();
+    for (const [k, v] of Object.entries(raw)) {
+      const t = (v as any)?.time ?? 0;
+      if (!this.perfMetrics[k]) this.perfMetrics[k] = { times: [], avg: 0, last: 0, count: 0 };
+      const m = this.perfMetrics[k];
+      m.times.push(t);
+      m.last = t;
+      m.count++;
+      m.avg = m.times.reduce((a, b) => a + b, 0) / m.times.length;
+    }
+  }
+
+  private formatPerfMetrics(): string {
+    const m = this.perfMetrics;
+    if (!Object.keys(m).length) return "暂无数据";
+    return Object.entries(m)
+      .map(([k, v]) => `${k}: 最近:${v.last.toFixed(2)}ms 平均:${v.avg.toFixed(2)}ms 次数:${v.count}`)
+      .join("<br>");
+  }
+
+  private formatMemory(): string {
+    const m = this.memoryInfo;
+    if (!m.usedJSHeapSize) return "N/A";
+    const used = (m.usedJSHeapSize! / 1048576).toFixed(1);
+    const total = (m.totalJSHeapSize! / 1048576).toFixed(1);
+    const limit = (m.jsHeapSizeLimit! / 1048576).toFixed(1);
+    return `${used}MB / ${total}MB / ${limit}MB`;
+  }
+
+  private trackFPS() {
+    const loop = (now: number) => {
+      this.frameCount++;
+      if (now - this.lastFpsUpdate >= 1000) {
+        this.fps = this.frameCount;
+        this.frameCount = 0;
+        this.lastFpsUpdate = now;
+      }
+      requestAnimationFrame(loop);
+    };
+    requestAnimationFrame(loop);
+  }
+
+  private updateMemory() {
+    if ((window as any).performance?.memory) {
+      const m = (window as any).performance.memory;
+      this.memoryInfo = {
+        jsHeapSizeLimit: m.jsHeapSizeLimit,
+        totalJSHeapSize: m.totalJSHeapSize,
+        usedJSHeapSize: m.usedJSHeapSize,
+      };
+    }
+  }
+
+  private trackMemory() {
+    if ((window as any).performance?.memory) {
+      setInterval(() => this.updateMemory(), 1000);
+    }
+  }
+
+  private getNetworkInfo(): string {
+    const conn = (navigator as any).connection;
+    if (!conn) return "N/A";
+    return `类型:${conn.effectiveType} 下行:${conn.downlink}Mbps 延迟:${conn.rtt}ms`;
+  }
+
+  private applyStyles(el: HTMLElement) {
+    el.style.position = "fixed";
+    el.style.bottom = "50px";
+    el.style.right = "10px";
+    el.style.width = "350px";
+    el.style.maxHeight = "400px";
+    el.style.overflowY = "auto";
+    el.style.background = "rgba(0,0,0,0.8)";
+    el.style.borderRadius = "8px";
+    el.style.padding = "10px";
+    el.style.zIndex = "99999";
+    el.style.fontSize = "12px";
+    el.style.color = "#fff";
+    el.style.textAlign="left";
+  }
+
+  private enableDrag(el: HTMLElement) {
+    let dragging = false, startX = 0, startY = 0, left = 0, top = 0;
+    el.style.cursor = "move";
+    el.addEventListener("mousedown", e => {
+      dragging = true;
+      startX = e.clientX;
+      startY = e.clientY;
+      left = el.offsetLeft;
+      top = el.offsetTop;
+      (document.body as any).style.userSelect = "none";
+    });
+    document.addEventListener("mousemove", e => {
+      if (!dragging) return;
+      el.style.left = left + e.clientX - startX + "px";
+      el.style.top = top + e.clientY - startY + "px";
+      el.style.right = el.style.bottom = "unset";
+    });
+    document.addEventListener("mouseup", () => {
+      dragging = false;
+      (document.body as any).style.userSelect = "";
+    });
+  }
+}