@xmov/avatar 2.0.0-alpha.38

package/src/utils/perfermance.ts

@@ -0,0 +1,141 @@
+import Ttsa from "../control/ttsa";
+
+export const performanceConstant = {
+  load_resource: 'load_resource',
+  ttsa_connect: 'ttsa_connect',
+  ttsa_ready: 'ttsa_ready',
+  first_avatar_render: 'first_avatar_render',
+  first_webgl_render: 'first_webgl_render',
+
+  ttsa_body_res: 'ttsa_body_res',
+
+  start_action_res: 'start_action_res',
+  start_action_render: 'start_action_render',
+  load_video: 'load_video',
+  decode_video: 'decode_video',
+  voice_response_play: 'voice_response_play',
+  first_decode_video: 'first_decode_video',
+  first_render: 'first_render',
+};
+const performanceText={
+  [performanceConstant.load_resource]: '加载资源',
+  [performanceConstant.ttsa_connect]: 'ttsa连接',
+  [performanceConstant.ttsa_ready]: 'ttsa准备返回first_start_timestamp',
+  [performanceConstant.first_avatar_render]: '前端处理好第一帧渲染数据',
+  [performanceConstant.first_webgl_render]: '前端处理好第一帧webgl渲染',
+  [performanceConstant.ttsa_body_res]: 'ttsa返回body',
+  [performanceConstant.start_action_res]: '触发行为返回',
+  [performanceConstant.start_action_render]: '触发行为并渲染耗时',
+  [performanceConstant.load_video]: '视频加载',
+  [performanceConstant.decode_video]: '视频解码',
+  [performanceConstant.voice_response_play]: 'speak音频响应',
+  [performanceConstant.first_decode_video]: '第一帧视频解码',
+  [performanceConstant.first_render]: '第一帧webgl渲染',
+}
+
+interface PerformanceMark {
+  state?: string;
+  time: number;
+}
+
+class PerformanceTracker {
+  private marks: Map<keyof typeof performanceText, PerformanceMark> = new Map();
+  private measures: Map<keyof typeof performanceText, PerformanceMark> = new Map();
+  private reportFunc: Ttsa | null = null;
+  private onStateRenderChange: (state: string, duration: number) => void = () => {};
+  public firstDecodeTime = 0;
+  public firstRenderTime = 0;
+  constructor() {
+    this.marks = new Map();
+    this.measures = new Map();
+  }
+  getFirstInfo() {
+    return {
+      decode_speed: this.firstDecodeTime,
+      render_speed: this.firstRenderTime,
+    }
+  }
+  // 记录开始时间点
+  markStart(key: string, state?: string) {
+    this.marks.set(key as keyof typeof performanceText, {
+      state,
+      time: performance.now(),
+    });
+  }
+
+  // 记录结束时间点并计算耗时
+  markEnd(key: string, state?: string | any) {
+    const mark = this.marks.get(key as keyof typeof performanceText);
+    if (!mark) return;
+    if(state && typeof state === 'string' && state!== mark?.state) {
+      return;
+    }
+    const endTime = performance.now();
+    const duration = endTime - mark.time;
+    this.measures.set(key as keyof typeof performanceText, {
+      state: mark?.state,
+      time: duration,
+    });
+    // 提供给业务方状态改变到渲染耗时
+    if(mark.state && key === performanceConstant.start_action_render) {
+      this.onStateRenderChange(mark.state, duration);
+    }
+    this.reportMetric();
+    
+    if(key !== performanceConstant.load_video && key !== performanceConstant.decode_video) {
+      this.marks.delete(key as keyof typeof performanceText);
+    }
+    // 记录第一帧解码时间
+    if(key === performanceConstant.first_decode_video) {
+      this.firstDecodeTime = duration;
+    }
+    // 记录第一帧渲染时间
+    if(key === performanceConstant.first_render) {
+      this.firstRenderTime = duration;
+    }
+    return duration;
+  }
+
+  // 获取所有性能数据
+  getAllMetrics() {
+    return Object.fromEntries(this.measures.entries());
+  }
+
+  getVideoMetrics() {
+    const data = this.getAllMetrics();
+    const filterData = Object.fromEntries(
+      Object.entries(data).filter(([key]) => [performanceConstant.decode_video, performanceConstant.load_video].includes(key))
+    );
+    return filterData;
+  }
+
+  setReportFunc(ttsa: Ttsa) {
+    this.reportFunc = ttsa;
+  }
+
+  // 上报数据到服务器
+  reportMetric() {
+    const data = this.getAllMetrics();
+    if(Object.keys(data).length > 0 && this.reportFunc?.getStatus()) {
+      // 过滤load_video和decode_video
+      const filterData = Object.fromEntries(
+        Object.entries(data).filter(([key]) => ![performanceConstant.load_video, performanceConstant.decode_video].includes(key))
+      );
+      if(Object.keys(filterData).length > 0) {
+        this.reportFunc?.sendPerfLog(filterData);
+      }
+      // 遍历data
+      for(const key in filterData) {
+        if(key !== performanceConstant.decode_video && key !== performanceConstant.load_video) {
+          this.measures.delete(key);
+        }
+      }
+    }
+  }
+  setOnStateRenderChange(onStateRenderChange: (state: string, duration: number) => void) {
+    this.onStateRenderChange = onStateRenderChange;
+  }
+}
+
+// 创建全局单例
+(window as any).performanceTracker = new PerformanceTracker();

package/src/utils/request.ts

@@ -0,0 +1,95 @@
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD'
+
+interface RequestOptions {
+  method?: HttpMethod
+  data?: Record<string, any>
+  headers?: Record<string, string>
+}
+
+interface ErrorResponse {
+  status: number
+  statusText: string
+  message: string
+}
+
+const TAG = '[REQUEST]'
+export default async function request(
+  url: string,
+  options: RequestOptions = {}
+) {
+  const { method = 'GET', data, headers = {} } = options
+
+  const config: RequestInit = {
+    method,
+    // headers,
+    headers: {
+      'Content-Type': 'application/json',
+      ...headers,
+    },
+  }
+
+  if (method === 'GET' && data) {
+    const params = new URLSearchParams(data).toString()
+    url += `${url.includes('?') ? '&' : '?'}${params}`
+  }
+
+  if (method !== 'GET' && data) {
+    config.body = JSON.stringify(data)
+  }
+
+  try {
+    const response = await fetch(url, config)
+
+    if (!response.ok) {
+      const error: ErrorResponse = {
+        status: response.status,
+        statusText: response.statusText,
+        message: `HTTP error! status: ${response.status}`,
+      }
+      throw error
+    }
+    return response
+  } catch (error) {
+    if (error instanceof Error) {
+      throw {
+        message: error.message,
+        status: 500,
+        statusText: 'Client Error',
+      } as ErrorResponse
+    }
+    throw error
+  }
+}
+
+/**
+ * 资源下载请求
+ * @returns {Promise<[isError: boolean, data: ArrayBuffer | string]>}
+ * */
+export function XMLRequest(options: {
+  url: string
+  cache?: {
+    enable: boolean
+  }
+  onProgress: (progress: number, e: ProgressEvent) => void
+}): Promise<[boolean, ArrayBuffer | string]> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', options.url);
+    xhr.responseType = 'arraybuffer';
+    xhr.onload = function() {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        const arrayBuffer = xhr.response;
+        resolve([false, arrayBuffer]);
+      } else if (xhr.status !== 200) {
+        reject([true, xhr.statusText]);
+      }
+    };
+    xhr.onprogress = (e) => {
+      if (e.lengthComputable) {
+        const percent = Math.round((e.loaded / e.total) * 100);
+        options.onProgress(percent, e);
+      }
+    };
+    xhr.send();
+  });
+}

package/src/utils/requestAnimateFrames.ts

@@ -0,0 +1,195 @@
+interface FrameAnimationControllerOptions {
+  defaultSpeed?: number;
+  frameRate?: number;
+  frameCallback?: (frame: number, timeJson: any) => void;
+}
+
+export default class FrameAnimationController {
+  private startTime: number | null; // 新增：开始时间
+  private currentFrame: number;
+  private speed: number;
+  private frameCallback: ((frame: number, timeJson: any) => void) | null;
+  private isPlaying: boolean;
+  private animationId: number | null;
+  private frameRate: number; // 新增：帧率
+  private startTimeFromDate: number | null; // 新增：开始时间日期
+  private currentFrameFromDate: number | null; // 新增：当前帧日期
+
+  constructor({
+    defaultSpeed = 1,
+    frameRate = 24,
+    frameCallback,
+  }: FrameAnimationControllerOptions = {}) {
+    this.startTime = null; // 初始化开始时间为null
+    this.currentFrame = 1;
+    this.speed = defaultSpeed;
+    this.frameCallback = frameCallback || null;
+    this.frameRate = frameRate; // 保存帧率
+
+    this.isPlaying = false;
+    this.animationId = null;
+    this.startTimeFromDate = null; // 初始化开始时间日期为null
+    this.currentFrameFromDate = null; // 初始化开始帧日期为null
+  }
+
+  get playing() {
+    return this.isPlaying;
+  }
+
+  // 启动动画
+  play(): void {
+    if (this.isPlaying) return;
+
+    this.isPlaying = true;
+    (window as any).avatarSDKLogger.log("开始时间", this.startTime)
+    // 记录开始时间（如果还没有开始时间）
+    if (this.startTime === null) {
+      (window as any).avatarSDKLogger.log("当前时间", performance.now())
+      this.startTime = performance.now();
+      // startTimeFromDate 必须与 startTime 同步设置，
+      // 否则 pause→play 后两个时间源基准不一致，导致 frame_number_error 误报
+      this.startTimeFromDate = Date.now();
+    }
+    this.animationId = requestAnimationFrame(this._animate.bind(this));
+  }
+
+  // 暂停动画
+  pause(): void {
+    this.isPlaying = false;
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+
+  // 重置动画
+  reset(): void {
+    this.pause();
+    this.startTime = null; // 重置开始时间
+    this.currentFrame = 1;
+    this._updateFrame();
+    this.startTimeFromDate = null; // 重置开始时间日期
+    this.currentFrameFromDate = null; // 重置当前帧日期
+  }
+
+  // 设置速度
+  setSpeed(speed: number): void {
+    this.speed = speed;
+  }
+
+  // 跳转到指定帧
+  gotoFrame(frameNumber: number): void {
+    if (frameNumber < 1) frameNumber = 1;
+
+    this.currentFrame = frameNumber;
+    this._updateFrame();
+  }
+
+  // 下一帧
+  nextFrame(): void {
+    this.currentFrame++;
+    this._updateFrame();
+  }
+
+  // 上一帧
+  prevFrame(): void {
+    this.gotoFrame(this.currentFrame - 1);
+  }
+
+  // 清理资源，在组件销毁时调用
+  destroy(): void {
+    this.pause();
+    this.frameCallback = null;
+    this.startTime = null; // 清理开始时间
+    this.startTimeFromDate = null; // 清理开始时间日期
+    this.currentFrame = 1; // 清理当前帧
+    this.currentFrameFromDate = null; // 清理当前帧日期
+    this.speed = 1;
+  }
+
+  // 动画循环
+  private _animate(timestamp: number): void {
+    let nowTime = performance.now();
+    const deltaTime = timestamp - nowTime;
+    // 如果差异在100ms以内，使用timestamp作为时间戳
+    // 如果差异在100ms以上，则使用performance.now()作为时间戳
+    if (Math.abs(deltaTime) < 100) {
+      nowTime = timestamp;
+    }
+    if (this.currentFrame < 50) {
+      (window as any).avatarSDKLogger.log("animate时间", timestamp, "开始时间", this.startTime, "performance", performance.now())
+    }
+    if (!this.isPlaying) return;
+
+    // 基于开始时间计算当前应该显示的帧数
+    if (this.startTime !== null) {
+      const elapsedTime = nowTime - this.startTime;
+      // 使用1/48秒的计算速率来提高准确度，然后除以2来保持1/24秒的显示速率
+      const calculatedFrame =
+        Math.floor(
+          Math.floor(elapsedTime / (1000 / (this.frameRate * 2))) / 2
+        ) + 1;
+
+      // (window as any).avatarSDKLogger.log("计算帧号", calculatedFrame)
+      // 如果计算出的帧号与当前帧号不同，更新帧号
+      if (calculatedFrame !== this.currentFrame) {
+        this.currentFrame = calculatedFrame;
+        this._updateFrame();
+      }
+      // 基于开始时间日期计算当前应该显示的帧数
+      const elapsedTimeFromDate = Date.now() - this.startTimeFromDate!;
+      const calculatedFrameFromDate = Math.floor(
+        Math.floor(elapsedTimeFromDate / (1000 / (this.frameRate * 2))) / 2
+      ) + 1;
+      // (window as any).avatarSDKLogger.log("计算日期帧号", calculatedFrameFromDate)
+      this.currentFrameFromDate = calculatedFrameFromDate;
+    }
+
+    if (this.isPlaying) {
+      this.animationId = requestAnimationFrame(this._animate.bind(this));
+    }
+  }
+
+  // 更新帧 - 基于时间的帧计算
+  private _updateFrame(): void {
+    let timeJson:any = null
+    if (this.frameCallback) {
+      // 执行帧更新回调
+      if (this.currentFrameFromDate !== this.currentFrame && this.currentFrameFromDate !== null) {
+        timeJson = {
+          "key": "frame_number_error",
+          "Date帧号": this.currentFrameFromDate,
+          "performance帧号": this.currentFrame,
+          "开始时间": this.startTime,
+          "开始时间日期": this.startTimeFromDate,
+          "当前时间": Date.now(),
+          "performance.now()": performance.now(),
+        };
+      }
+      this.frameCallback(this.currentFrame, timeJson);
+    }
+  }
+
+  // 获取当前帧
+  getCurrentFrame(): number {
+    // 这里不能直接返回this.currentFrame，因为存在用户将游览器置到后台，
+    // 游览器会暂停requestAnimationFrame，导致this.currentFrame不更新
+    // 这里需要重新计算
+    if (this.startTime !== null) {
+      const elapsedTime = performance.now() - this.startTime;
+      const calculatedFrame =
+        Math.floor(
+          Math.floor(elapsedTime / (1000 / (this.frameRate * 2))) / 2
+        ) + 1;
+      return calculatedFrame;
+    }
+    return this.currentFrame;
+  }
+
+  // 更新开始时间
+  updateStartTime(frame: number): void {
+    this.startTime = performance.now() - (frame - 1) * (1000 / this.frameRate);
+    // 同步 Date 时间基准，避免 performance 和 Date 双时间源脱节导致 frame_number_error 误报
+    this.startTimeFromDate = Date.now() - (frame - 1) * (1000 / this.frameRate);
+  }
+}

package/src/utils/time.ts

@@ -0,0 +1,32 @@
+/**
+ * @file 时间处理工具函数
+ */
+
+/**
+ * 格式化时间戳字符串为 'YYYY-MM-DD HH:mm:ss' 格式
+ * @param timestamp - ISO 格式的时间字符串, e.g., "2025-07-02T15:02:36.391615"
+ * @returns 格式化后的时间字符串，如果输入无效则返回 'N/A'
+ */
+export function formatTimestamp(timestamp: string): string {
+  if (!timestamp || typeof timestamp !== 'string') {
+    return 'N/A';
+  }
+  try {
+    const date = new Date(timestamp);
+    if (isNaN(date.getTime())) {
+        return 'Invalid Date';
+    }
+
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  } catch (error) {
+    (window as any).avatarSDKLogger.error('Error formatting timestamp:', error);
+    return timestamp; // 如果格式化失败，返回原始字符串
+  }
+}