yjz-web-sdk 1.0.9-beta.5 → 1.0.10

package/src/core/util/Logger.ts

@@ -0,0 +1,83 @@
+// sdk/logger.ts
+
+export enum LogLevel {
+    DEBUG = 10,
+    INFO = 20,
+    WARN = 30,
+    ERROR = 40,
+    OFF = 100,
+}
+
+// 全局控制
+let globalLogLevel: LogLevel = LogLevel.DEBUG;
+let globalEnable = true;
+let globalNamespace = "SDK"; // 默认命名空间
+
+export function setLogLevel(level: LogLevel) {
+    globalLogLevel = level;
+}
+
+export function enableLog(enable: boolean) {
+    globalEnable = enable;
+}
+
+export function setNamespace(ns: string) {
+    globalNamespace = ns;
+}
+
+// 颜色配置
+const levelStyle: Record<LogLevel, string> = {
+    [LogLevel.DEBUG]: "color: #999",
+    [LogLevel.INFO]: "color: #2b90d9",
+    [LogLevel.WARN]: "color: #e6a23c",
+    [LogLevel.ERROR]: "color: #f56c6c",
+    [LogLevel.OFF]: "color: inherit",
+};
+
+class LoggerCore {
+    private canLog(level: LogLevel) {
+        return globalEnable && level >= globalLogLevel;
+    }
+
+    private log(level: LogLevel, ...args: any[]) {
+        // console.log(LogLevel.DEBUG===level, !this.canLog(level), level, globalLogLevel)
+        if (!this.canLog(level)) return;
+        const levelName = LogLevel[level];
+        const prefix = `%c[${globalNamespace}] [${levelName}]`;
+        const style = levelStyle[level];
+
+        switch (level) {
+            case LogLevel.DEBUG:
+                console.log(prefix, style, ...args);
+                break;
+            case LogLevel.INFO:
+                console.info(prefix, style, ...args);
+                break;
+            case LogLevel.WARN:
+                console.warn(prefix, style, ...args);
+                break;
+            case LogLevel.ERROR:
+                console.error(prefix, style, ...args);
+                break;
+        }
+    }
+
+    debug(...args: any[]) {
+        this.log(LogLevel.DEBUG, ...args);
+    }
+
+    info(...args: any[]) {
+        this.log(LogLevel.INFO, ...args);
+    }
+
+    warn(...args: any[]) {
+        this.log(LogLevel.WARN, ...args);
+    }
+
+    error(...args: any[]) {
+        this.log(LogLevel.ERROR, ...args);
+    }
+}
+
+// 导出单例（不用实例化，直接用）
+export const Logger = new LoggerCore();

package/src/core/util/MapCache.ts

@@ -0,0 +1,135 @@
+export class MapCache {
+    private key: string;
+    private maxSize: number;
+    private defaultExpire: number; // 默认过期时间（毫秒）
+
+    constructor(key: string, maxSize = 100, expireMs = 5 * 60 * 1000) {
+        this.key = key;
+        this.maxSize = maxSize;
+        this.defaultExpire = expireMs;
+    }
+
+    /** 从 localStorage 读取 Map（自动清理过期的 item） */
+    getMap(): Map<string, any> {
+        const raw = localStorage.getItem(this.key);
+        if (!raw) return new Map();
+
+        try {
+            const data = JSON.parse(raw) as Record<string, { value: any; timestamp: number; expire: number }>;
+            const now = Date.now();
+            const result = new Map<string, any>();
+            let changed = false;
+
+            for (const [k, obj] of Object.entries(data)) {
+                if (now - obj.timestamp <= obj.expire) {
+                    result.set(k, obj.value);
+                } else {
+                    changed = true; // 有过期项，需要更新存储
+                }
+            }
+
+            if (changed) this.saveMap(result);
+
+            return result;
+        } catch {
+            return new Map();
+        }
+    }
+
+    /** 保存 Map（每个值都有独立的 timestamp/expire） */
+    private saveMap(map: Map<string, any>, meta?: Record<string, { timestamp: number; expire: number }>) {
+        const obj: Record<string, { value: any; timestamp: number; expire: number }> = {};
+        const now = Date.now();
+
+        for (const [k, v] of map.entries()) {
+            if (meta && meta[k]) {
+                obj[k] = { value: v, timestamp: meta[k].timestamp, expire: meta[k].expire };
+            } else {
+                obj[k] = { value: v, timestamp: now, expire: this.defaultExpire };
+            }
+        }
+        localStorage.setItem(this.key, JSON.stringify(obj));
+    }
+
+    /** 设置值（支持单项自定义过期时间） */
+    set(key: string, value: any, expireMs?: number) {
+        const map = this.getMap();
+
+        // 取出旧的 meta 信息（避免覆盖其它项的 expire）
+        const raw = localStorage.getItem(this.key);
+        let meta: Record<string, { timestamp: number; expire: number }> = {};
+        if (raw) {
+            try {
+                meta = JSON.parse(raw);
+            } catch {
+                meta = {};
+            }
+        }
+
+        // 超出限制时删除最早的
+        if (map.size >= this.maxSize && !map.has(key)) {
+            const firstKey = map.keys().next().value;
+            if (typeof firstKey === "string") {
+                map.delete(firstKey);
+                delete meta[firstKey];
+            }
+        }
+
+        map.set(key, value);
+        meta[key] = { timestamp: Date.now(), expire: expireMs ?? this.defaultExpire };
+        this.saveMap(map, meta);
+    }
+
+    /** 获取值（单项过期会自动清除） */
+    get(key: string) {
+        const map = this.getMap();
+        return map.get(key);
+    }
+
+    /** 检查是否存在且未过期 */
+    has(key: string): boolean {
+        const raw = localStorage.getItem(this.key);
+        if (!raw) return false;
+
+        try {
+            const data = JSON.parse(raw) as Record<string, { value: any; timestamp: number; expire: number }>;
+            const obj = data[key];
+            if (!obj) return false;
+
+            const now = Date.now();
+            if (now - obj.timestamp <= obj.expire) {
+                return true;
+            } else {
+                // 过期则清除
+                this.delete(key);
+                return false;
+            }
+        } catch {
+            return false;
+        }
+    }
+
+    /** 删除 */
+    delete(key: string) {
+        const map = this.getMap();
+        map.delete(key);
+
+        const raw = localStorage.getItem(this.key);
+        if (raw) {
+            try {
+                const meta = JSON.parse(raw);
+                delete meta[key];
+                this.saveMap(map, meta);
+            } catch {
+                this.saveMap(map);
+            }
+        } else {
+            this.saveMap(map);
+        }
+    }
+
+    /** 清空 */
+    clear() {
+        localStorage.removeItem(this.key);
+    }
+}

package/src/core/util/ScreenControlUtil.ts

@@ -0,0 +1,174 @@
+/**
+ * 根据视图和云端流的尺寸、角度及输入坐标，转换为相应的坐标值
+ * @param viewWidth 视图宽度
+ * @param viewHeight 视图高度
+ * @param cloudWidth 云端流宽度
+ * @param cloudHeight 云端流高度
+ * @param viewAngle 视图旋转角度（0 或 -90）
+ * @param streamAngle 流旋转角度（0 或 -90）
+ * @param inputX 输入 X 坐标
+ * @param inputY 输入 Y 坐标
+ * @returns 转换后的坐标 [x, y]，若超出有效区域则返回 null
+ */
+export function transformCoordinate(
+  viewWidth: number,
+  viewHeight: number,
+  cloudWidth: number,
+  cloudHeight: number,
+  viewAngle: number,
+  streamAngle: number,
+  inputX: number,
+  inputY: number,
+): [number, number] | null {
+  let realShortWidth: number
+  let short: number
+
+  // 根据视图旋转角度判断短边及计算实际短边宽度
+  if (viewAngle === -90) {
+    short = viewHeight
+    realShortWidth = (cloudWidth * viewWidth) / cloudHeight
+  }
+  else {
+    short = viewWidth
+    realShortWidth = (cloudWidth * viewHeight) / cloudHeight
+  }
+
+  // 计算无效区域（边缘空白区域）及中间有效区域参数
+  const invalidValue = (short - realShortWidth) / 2
+  const mid = short / 2
+  const start = invalidValue
+  const end = short - invalidValue
+  const len = mid - invalidValue
+
+  if (viewAngle === -90) {
+    // 视图横屏
+    const resultY = linearTransform(invalidValue, mid, start, end, len, inputY)
+    if (streamAngle === -90) {
+      // 流横屏：X 坐标不变，Y 坐标经过线性转换
+      return [inputX, resultY]
+    }
+    else {
+      // 流竖屏：交换坐标并调整 Y 坐标
+      return [viewHeight - resultY, inputX]
+    }
+  }
+  else {
+    // 视图竖屏
+    const resultX = linearTransform(invalidValue, mid, start, end, len, inputX)
+    if (streamAngle === -90) {
+      // 流横屏：需要额外旋转坐标
+      const [rotX, rotY] = rotatePoint90(viewWidth, viewHeight, resultX, inputY)
+      return [rotX, rotY]
+    }
+    else {
+      // 流竖屏：X 坐标经过线性转换，Y 坐标不变
+      return [resultX, inputY]
+    }
+  }
+}
+
+/**
+ * 将输入坐标转换为百分比值（相对于视图尺寸），并考虑云端流的宽高比例
+ * @param viewWidth 视图宽度
+ * @param viewHeight 视图高度
+ * @param cloudWidth 云端流宽度
+ * @param cloudHeight 云端流高度
+ * @param viewAngle 视图旋转角度（0 或 -90）
+ * @param streamAngle 流旋转角度（0 或 -90）
+ * @param inputX 输入 X 坐标
+ * @param inputY 输入 Y 坐标
+ * @returns [xRatio, yRatio] 百分比比例值
+ */
+export function valueToPercentage(
+  viewWidth: number,
+  viewHeight: number,
+  cloudWidth: number,
+  cloudHeight: number,
+  viewAngle: number,
+  streamAngle: number,
+  inputX: number,
+  inputY: number,
+): [number, number] {
+  let xRatio: number
+  let yRatio: number
+
+  if (viewAngle === 0 && streamAngle === 0) {
+    // 容器竖屏, 流竖屏
+    xRatio = inputX / viewWidth
+    yRatio = inputY / viewHeight
+  }
+  else if (viewAngle === -90 && streamAngle === 0) {
+    // 容器横屏, 流竖屏
+    xRatio = inputX / viewHeight
+    yRatio = inputY / viewWidth
+  }
+  else if (viewAngle === -90 && streamAngle === -90) {
+    // 容器横屏, 流横屏
+    xRatio = (inputX / viewWidth) * (cloudHeight / cloudWidth)
+    yRatio = (inputY / viewHeight) * (cloudWidth / cloudHeight)
+  }
+  else {
+    // 容器竖屏, 流横屏
+    xRatio = (inputX / viewHeight) * (cloudHeight / cloudWidth)
+    yRatio = (inputY / viewWidth) * (cloudWidth / cloudHeight)
+  }
+
+  return [xRatio, yRatio]
+}
+
+/**
+ * 对输入坐标做线性转换
+ * @param invalidValue 无效区域大小（边缘空白区域）
+ * @param mid 中间有效区域的中点
+ * @param start 有效区域开始位置
+ * @param end 有效区域结束位置
+ * @param len 有效区域长度的一半
+ * @param input 输入坐标
+ * @returns 转换后的坐标值
+ */
+function linearTransform(
+  invalidValue: number,
+  mid: number,
+  start: number,
+  end: number,
+  len: number,
+  input: number,
+): number {
+  if (input >= start && input <= mid - 0.1) {
+    return ((input - invalidValue) * mid) / len
+  }
+  else if (input === mid) {
+    return mid
+  }
+  else if (input >= mid + 0.1 && input <= end) {
+    return mid + ((input - mid) * mid) / len
+  }
+  else {
+    return input
+  }
+}
+
+/**
+ * 将坐标进行 90 度旋转转换（以视图中心为原点）
+ * @param width 视图宽度
+ * @param height 视图高度
+ * @param inputX 输入 X 坐标
+ * @param inputY 输入 Y 坐标
+ * @returns 旋转后的坐标 [x, y]
+ */
+function rotatePoint90(
+  width: number,
+  height: number,
+  inputX: number,
+  inputY: number,
+): [number, number] {
+  const offsetLongSide = height / 2
+  const offsetShortSide = width / 2
+  // 将输入点平移至以视图中心为原点
+  const x0 = inputX - offsetShortSide
+  const y0 = inputY - offsetLongSide
+  // 旋转 90 度后，计算新坐标
+  const xRotated = y0 + offsetLongSide
+  const yRotated = -x0 + offsetShortSide
+  return [xRotated, yRotated]
+}

package/src/core/util/TurnTestUtil.ts

@@ -0,0 +1,123 @@
+import type {
+  PublicTurnTestResult,
+  TurnSelectionResult,
+  TurnServerConfig,
+  TurnTestResult,
+  TurnTestSummary,
+} from '../data/TurnType'
+import type { WebRTCConfigOptions } from '../rtc/WebRTCConfig'
+import {Logger} from "./Logger";
+
+export const testTurnServer = (turnConfig: TurnServerConfig, timeoutMs = 600): Promise<TurnTestResult> => {
+  return new Promise((resolve) => {
+    const start = performance.now()
+    let resolved = false
+
+    const pc = new RTCPeerConnection({
+      iceServers: [turnConfig],
+      iceTransportPolicy: 'relay', // 强制走 TURN
+    })
+
+    // 创建一个 data channel，触发 ICE 流程
+    pc.createDataChannel('test')
+
+    pc.createOffer()
+      .then(offer => pc.setLocalDescription(offer))
+      .catch(() => {
+        if (!resolved) {
+          resolved = true
+          pc.close()
+          resolve({ ...turnConfig, rtt: Infinity })
+        }
+      })
+
+    pc.onicecandidate = (event) => {
+      if (resolved) return
+
+      if (event.candidate && event.candidate.candidate.includes('relay')) {
+        const rtt = Math.trunc(performance.now() - start)
+        resolved = true
+        pc.close()
+        resolve({ ...turnConfig, rtt })
+      }
+
+      if (event.candidate === null) {
+        // gathering 完成但没有 relay candidate
+        resolved = true
+        pc.close()
+        resolve({ ...turnConfig, rtt: Infinity })
+      }
+    }
+
+    setTimeout(() => {
+      if (!resolved) {
+        resolved = true
+        pc.close()
+        resolve({ ...turnConfig, rtt: Infinity })
+      }
+    }, timeoutMs)
+  })
+}
+
+export const testMultipleTurnServers = async (
+  servers: string[],
+  timeoutMs = 600,
+): Promise<TurnTestSummary> => {
+  const turnServers: TurnServerConfig[] = servers.map(url => ({
+    urls: url,
+    username: 'yangyj',
+    credential: 'hb@2025@168',
+  }))
+
+  // 发起所有测试请求
+  const testPromises = turnServers.map(cfg =>
+    testTurnServer(cfg, timeoutMs)
+      .then(res => res)
+      .catch((err) => {
+        Logger.warn('警告日志：',`中继计算超时=====>`, err)
+        return { ...cfg, rtt: Infinity } // 用 Infinity 表示失败
+      }),
+  )
+
+  // 等待所有测试完成
+  const results: TurnTestResult[] = await Promise.all(testPromises)
+  Logger.debug('调试日志：', `信令计算结果======>`, results)
+  const available = results.filter(r => r.rtt !== Infinity)
+
+  if (available.length === 0) {
+    // 全部测试失败，返回错误或抛出异常
+    throw new Error('All TURN servers are unreachable or slow (RTT = Infinity).')
+    // 或者 return 特定结构：
+  }
+
+  const best = available.sort((a, b) => a.rtt - b.rtt)[0]
+
+  return {
+    best: best ? stripTurnAuth(best) : undefined,
+    all: results.map(stripTurnAuth),
+  }
+}
+
+const stripTurnAuth = (result: TurnTestResult): PublicTurnTestResult => {
+  return {
+    urls: result.urls,
+    rtt: result.rtt,
+  }
+}
+
+export const areTurnListsEmpty = (options: WebRTCConfigOptions): boolean => {
+  return (
+    (!options.hostTurn || options.hostTurn.length === 0)
+    && (!options.spareTurn || options.spareTurn.length === 0)
+  )
+}
+
+export const selectBestTurnServer = async (turnList: string[]): Promise<TurnSelectionResult> => {
+  try {
+    const result = await testMultipleTurnServers(turnList)
+    return { url: result.best?.urls, rtt: result.best?.rtt }
+  }
+  catch (e) {
+    return { error: (e as Error).message || '未知错误' }
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,30 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
+
+declare module '*.ts?worker&inline' {
+    const workerConstructor: {
+        new (): Worker;
+    };
+    export default workerConstructor;
+}
+
+declare module '*.js?worker&inline' {
+    const workerConstructor: {
+        new (): Worker;
+    };
+    export default workerConstructor;
+}
+
+
+declare module "*.wasm?url" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.wasm" {
+    const value: string;
+    export default value;
+}

package/src/index.ts

@@ -0,0 +1,61 @@
+import { WebRTCSdk } from './core/WebRTCSdk'
+import { getKeyEventData } from "./core/util/KeyCodeUtil";
+import { testMultipleTurnServers } from './core/util/TurnTestUtil'
+import {transformCoordinate, valueToPercentage} from "./core/util/ScreenControlUtil";
+import {
+    ActionType,
+    ChannelDataType,
+    ContainerDirection,
+    InputData,
+    KeyEventData,
+    TouchData,
+    WheelData,
+    GestureData,
+    type ActionCommand,
+    ActionCommandType,
+    ActionCommandEventType,
+    ActionCommandEventValue,
+    TrackEventData,
+    ClarityData,
+} from "./core/data/WebrtcDataType";
+import { type TurnServerConfig, type TurnTestResult, type TurnTestSummary } from "./core/data/TurnType";
+import type { WebRTCConfigOptions} from './core/rtc/WebRTCConfig'
+
+import {EmitType, type CameraError, type WebRtcError } from "./core/data/WebRtcError";
+import RemotePlayer from './components/RemotePlayer/index.vue'
+
+import { ConnectorType } from './core/data/MessageType'
+import { GroupCtrlSocketManager } from './core/groupctrl/GroupCtrlSocketManager'
+
+
+export {
+    WebRTCSdk,
+    getKeyEventData,
+    transformCoordinate,
+    valueToPercentage,
+    ActionType,
+    ChannelDataType,
+    InputData,
+    KeyEventData,
+    TouchData,
+    ContainerDirection,
+    EmitType,
+    WheelData,
+    GestureData,
+    ClarityData,
+    type ActionCommand,
+    ActionCommandType,
+    type WebRTCConfigOptions,
+    ActionCommandEventType,
+    ActionCommandEventValue,
+    RemotePlayer,
+    TrackEventData,
+    type TurnServerConfig,
+    type TurnTestResult,
+    type TurnTestSummary,
+    testMultipleTurnServers,
+    type CameraError,
+    type WebRtcError,
+    ConnectorType,
+    GroupCtrlSocketManager
+}

package/src/render/Canvas2DRenderer.ts

@@ -0,0 +1,38 @@
+export class Canvas2DRenderer {
+    private canvas: HTMLCanvasElement | OffscreenCanvas;
+    private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas) {
+        this.canvas = canvas;
+        const ctx = canvas.getContext("2d") as OffscreenCanvasRenderingContext2D | null;
+        if (!ctx) throw new Error("2D context not available");
+        this.ctx = ctx;
+    }
+
+    render(frame: VideoFrame): void {
+        this.canvas.width = frame.displayWidth;
+        this.canvas.height = frame.displayHeight;
+        this.ctx.drawImage(frame, 0, 0, frame.displayWidth, frame.displayHeight);
+        frame.close();
+    }
+
+    /** 清空画布 */
+    clear(): void {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    /** 完全销毁 Renderer，释放引用和上下文 */
+    destroy(): void {
+        // 清空画布
+        try {
+            this.clear();
+        } catch {}
+
+        // 释放引用
+        // @ts-ignore
+        this.ctx = null;
+
+        // @ts-ignore
+        this.canvas = null;
+    }
+}