┌─────────────────────────────────────────────────────────────┐
│                      React / Vue 组件层                       │
│  <ActiveSpeakerGrid streams={streams} onChange={...} />      │
└───────────────────────────┬───────────────────────────────────┘
                            │ props / events
┌───────────────────────────▼───────────────────────────────────┐
│                     useAudioLevel Hook                         │
│  - 管理 AudioContext 生命周期                                   │
│  - 订阅 MediaStreamTrack → AnalyserNode                        │
│  - 输出 { streamId, level, isActive } 实时流                    │
└───────────────────────────┬───────────────────────────────────┘
                            │ Web Audio API
┌───────────────────────────▼───────────────────────────────────┐
│                    浏览器原生 AudioWorklet                      │
│  - 运行在音频线程，零主线程阻塞                                 │
│  - 实现 RMS + EMA + VAD 组合算法                                │
└────────────────────────────────────────────────────────────────┘

// ali-processor.ts
interface AliOptions {
  fftSize: number;           // 256 / 512
  smoothingTimeConstant: number; // 0.8
  minDecibels: number;       // -70
  maxDecibels: number;       // -10
  emaAlpha: number;          // 0.2
  activeThreshold: number;   // 0.25
  leadMargin: number;        // 0.15
}

class AliProcessor extends AudioWorkletProcessor {
  private readonly options: AliOptions;
  private emaLevel = 0;
  private readonly buffer: Float32Array;

  constructor(options: AudioWorkletNodeOptions) {
    super();
    this.options = options.processorOptions as AliOptions;
    this.buffer = new Float32Array(this.options.fftSize);
  }

  process(inputs: Float32Array[][]): boolean {
    const input = inputs[0]?.[0];
    if (!input) return true;

    // 1. RMS 计算
    let sumSq = 0;
    for (let i = 0; i < input.length; i++) sumSq += input[i] * input[i];
    const rms = Math.sqrt(sumSq / input.length) || 1e-10;

    // 2. 分贝换算
    const db = 20 * Math.log10(rms);

    // 3. 归一化 0-1
    const { minDecibels, maxDecibels } = this.options;
    let level = (db - minDecibels) / (maxDecibels - minDecibels);
    level = Math.max(0, Math.min(1, level));

    // 4. EMA 平滑
    this.emaLevel = this.options.emaAlpha * level + (1 - this.options.emaAlpha) * this.emaLevel;

    // 5. 广播给主线程
    this.port.postMessage({ level: this.emaLevel, rawDb: db });
    return true;
  }
}

registerProcessor('ali-processor', AliProcessor);

// useAudioLevel.ts
import { useEffect, useRef, useState, useCallback } from 'react';

export interface AudioLevelState {
  streamId: string;
  level: number;      // 0-1 平滑电平
  rawDb: number;      // 原始分贝
  isActive: boolean;  // ASD 判定结果
}

export function useAudioLevel(streams: MediaStream[]) {
  const [levels, setLevels] = useState<Map<string, AudioLevelState>>(new Map());
  const ctxRef = useRef<AudioContext>();
  const nodeMapRef = useRef<Map<string, AudioWorkletNode>>(new Map());

  // 初始化 AudioContext（复用单例）
  useEffect(() => {
    ctxRef.current = new AudioContext({ latencyHint: 'interactive' });
    return () => ctxRef.current?.close();
  }, []);

  // 核心：为每条流挂载 ALI 节点
  const attachStream = useCallback(async (stream: MediaStream) => {
    const ctx = ctxRef.current!;
    await ctx.audioWorklet.addModule('/ali-processor.js');

    const source = ctx.createMediaStreamSource(stream);
    const node = new AudioWorkletNode(ctx, 'ali-processor', {
      processorOptions: {
        fftSize: 256,
        smoothingTimeConstant: 0.8,
        minDecibels: -70,
        maxDecibels: -10,
        emaAlpha: 0.2,
        activeThreshold: 0.25,
        leadMargin: 0.15,
      },
    });

    source.connect(node).connect(ctx.destination); // 静默连接防止 GC
    nodeMapRef.current.set(stream.id, node);

    node.port.onmessage = (e) => {
      setLevels((prev) => {
        const next = new Map(prev);
        const { level, rawDb } = e.data;
        const old = next.get(stream.id) || { streamId: stream.id, level: 0, rawDb: -100, isActive: false };
        next.set(stream.id, { ...old, level, rawDb });
        return next;
      });
    };
  }, []);

  // ASD 判定：每帧在主线程跑一次相对领先逻辑
  useEffect(() => {
    let rafId: number;
    const tick = () => {
      setLevels((prev) => {
        const next = new Map(prev);
        // 找出最大电平流
        let maxLevel = 0, maxId = '';
        for (const [id, v] of next) {
          if (v.level > maxLevel) { maxLevel = v.level; maxId = id; }
        }
        for (const [id, v] of next) {
          const isActive = id === maxId && v.level > 0.25 && v.level > maxLevel - 0.15;
          if (v.isActive !== isActive) next.set(id, { ...v, isActive });
        }
        return next;
      });
      rafId = requestAnimationFrame(tick);
    };
    tick();
    return () => cancelAnimationFrame(rafId);
  }, []);

  // 流变更同步
  useEffect(() => {
    const currentIds = new Set(streams.map(s => s.id));
    // 移除已销毁流
    for (const [id, node] of nodeMapRef.current) {
      if (!currentIds.has(id)) { node.disconnect(); nodeMapRef.current.delete(id); }
    }
    // 新增流
    for (const stream of streams) {
      if (!nodeMapRef.current.has(stream.id)) attachStream(stream);
    }
    // 清理 levels 中不存在的流
    setLevels(prev => {
      const next = new Map(prev);
      for (const id of next.keys()) if (!currentIds.has(id)) next.delete(id);
      return next;
    });
  }, [streams, attachStream]);

  return levels;
}

// ActiveSpeakerGrid.tsx
import { useAudioLevel, AudioLevelState } from './useAudioLevel';
import { memo, useMemo } from 'react';

interface StreamItemProps {
  stream: MediaStream;
  state: AudioLevelState;
}

const StreamItem = memo(({ stream, state }: StreamItemProps) => (
  <div
    className={`relative aspect-video bg-gray-100 rounded-xl overflow-hidden transition-all ${state.isActive ? 'ring-4 ring-primary-500 scale-[1.02]' : ''}`}
    style={{ boxShadow: state.isActive ? '0 0 24px rgba(59,130,246,0.6)' : 'none' }}
  >
    <video className="w-full h-full object-cover" srcObject={stream} autoPlay playsInline muted={state.isActive} />
    <div className="absolute bottom-2 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden">
      <div
        className="h-full bg-emerald-400 transition-all duration-70 ease-out"
        style={{ width: `${state.level * 100}%` }}
      />
    </div>
    {state.isActive && <span className="absolute top-2 right-2 bg-primary-600 text-white text-xs px-2 py-0.5 rounded">正在发言</span>}
  </div>
));

export function ActiveSpeakerGrid({ streams }: { streams: MediaStream[] }) {
  const levels = useAudioLevel(streams);

  const sortedStreams = useMemo(() =>
    [...streams].sort((a, b) => (levels.get(b.id)?.level ?? 0) - (levels.get(a.id)?.level ?? 0)),
    [streams, levels]
  );

  return (
    <div className="grid gap-4 auto-rows-fr"
         style={{
           gridTemplateColumns: `repeat(auto-fit, minmax(240px, 1fr))`,
         }}>
    {sortedStreams.map((stream) => (
      <StreamItem key={stream.id} stream={stream} state={levels.get(stream.id)!} />
    ))}
  );
}

graph TD
    A[本地全量低码率缩略流 160x90@5fps] --> B(本地 ALI/ASD 计算)
    B --> C{Top-N 发言人排序}
    C --> D[向 SFU 发送订阅偏好信令]
    D --> E[SFU 下发高清大流 1280x720@30fps]
    E --> F[主画面渲染 + 备选流预加载]

// subscription-manager.ts
interface SubscriptionPolicy {
  maxHighDef: number;        // 同时高清数上限
  preloadRatio: number;      // 预加载备选流比例 1.5x
  hysteresisMs: number;      // 切换迟滞防抖 2000ms
}

export class SubscriptionManager {
  private currentHighDef = new Set<string>();
  private candidateQueue: string[] = [];
  private lastSwitch = 0;

  constructor(
    private pc: RTCPeerConnection,
    private policy: SubscriptionPolicy,
    private getLevel: (id: string) => number
  ) {}

  // 每 500ms 调用一次
  tick(activeSpeakers: string[]) {
    const now = performance.now();
    if (now - this.lastSwitch < this.policy.hysteresisMs) return;

    // 1. 计算目标集合：Top-N + 预加载
    const sorted = [...activeSpeakers].sort((a, b) => 
      this.getLevel(b) - this.getLevel(a)
    );
    const target = new Set(sorted.slice(0, this.policy.maxHighDef * this.policy.preloadRatio));

    // 2. 差分计算
    const toAdd = [...target].filter(id => !this.currentHighDef.has(id));
    const toRemove = [...this.currentHighDef].filter(id => !target.has(id));

    // 3. 批量下发 setParameters (避免频繁 renegotiation)
    this.applyBatch(toAdd, 'high');
    this.applyBatch(toRemove, 'low');
  }

  private async applyBatch(ids: string[], quality: 'high' | 'low') {
    for (const id of ids) {
      const transceiver = this.pc.getTransceivers().find(t => t.sender.track?.id === id);
      if (!transceiver) continue;
      
      const encodings = transceiver.sender.getParameters().encodings;
      const targetEncoding = encodings.find(e => e.rid === (quality === 'high' ? 'h' : 'l'));
      if (targetEncoding) {
        targetEncoding.active = quality === 'high';
        await transceiver.sender.setParameters({ encodings });
        this.currentHighDef.add(id);
      }
    }
    this.lastSwitch = performance.now();
  }
}

// plc-aware-ali.ts (AudioWorkletProcessor 扩展)
process(inputs: Float32Array[][]) {
  const input = inputs[0][0];
  const isPlcFrame = this.detectPlcArtifacts(input); // 频谱平坦度 + 周期性检测
  
  let level = this.computeRmsLevel(input);
  
  // PLC 帧权重衰减 0.3x，防止虚假电平抬升
  if (isPlcFrame) level *= 0.3; 
  
  this.emaLevel = this.alpha * level + (1 - this.alpha) * this.emaLevel;
  this.port.postMessage({ level: this.emaLevel, plc: isPlcFrame });
  return true;
}

private detectPlcArtifacts(frame: Float32Array): boolean {
  // 简易启发式：高频能量占比 < 5% 且 自相关峰值极高 -> 疑似 PLC 合成音
  const highFreqEnergy = frame.slice(frame.length/2).reduce((s, v) => s + v*v, 0);
  const totalEnergy = frame.reduce((s, v) => s + v*v, 0);
  return (highFreqEnergy / (totalEnergy + 1e-10)) < 0.05;
}

packages/
├── core/                 # 纯 TS 算法层 (零平台依赖)
│   ├── ali-algo.ts       # RMS/EMA/ASD 纯函数
│   ├── vad-wrapper.ts    # 封装 wasm-vad 推理
│   └── types.ts
├── adapters/
│   ├── web-audio/        # AudioWorklet + WebAudio 实现
│   ├── rn-audio/         # react-native-audio-api / expo-av 适配
│   ├── electron/         # 复用 web-audio + node-ffi 调用原生 VAD
│   └── miniprogram/      # 微信/钉钉/飞书小程序 LivePusherContext 适配
└── ui/
    ├── react/            # ActiveSpeakerGrid (Web/Electron)
    ├── react-native/     # <View><Video /><Waveform /></View>
    └── vue/              # 组件库对接

// core/types.ts
export interface AudioFrame {
  pcm: Float32Array;      // 单声道 16kHz
  timestamp: number;      // 设备时钟 ms
  isPlc?: boolean;
}

export interface AnalysisResult {
  level: number;          // 0-1
  vadProb: number;        // 0-1 语音概率
  features?: Float32Array; // 可选：MFCC/Embedding 供声纹用
}

export interface IAudioAnalyzer {
  start(streamId: string, source: MediaStream | AudioBufferSourceNode): Promise<void>;
  stop(streamId: string): void;
  onResult: (streamId: string, result: AnalysisResult) => void;
  setConfig(cfg: Partial<AnalyzerConfig>): void;
}

// adapters/web-audio/WebAnalyzer.ts
export class WebAnalyzer implements IAudioAnalyzer {
  private ctx: AudioContext;
  private workletNodeMap = new Map<string, AudioWorkletNode>();
  private sourceNodeMap = new Map<string, MediaStreamAudioSourceNode>();

  async start(streamId: string, stream: MediaStream) {
    this.ctx = this.ctx || new AudioContext({ sampleRate: 16000 });
    await this.ctx.audioWorklet.addModule('/ali-processor.js');
    
    const source = this.ctx.createMediaStreamSource(stream);
    const node = new AudioWorkletNode(this.ctx, 'ali-processor');
    
    // 关键：插入 ScriptProcessorNode (已废弃但小程序/旧端必需) 或 
    // 使用 AudioWorklet 直连，通过 port 回调统一推送到 core 算法层
    node.port.onmessage = (e) => this.handleWorkerMessage(streamId, e.data);
    
    source.connect(node).connect(this.ctx.destination);
    this.workletNodeMap.set(streamId, node);
    this.sourceNodeMap.set(streamId, source);
  }
  
  private handleWorkerMessage(streamId: string, data: any) {
    // 这里可直接调用 core/ali-algo.ts 导出的纯函数做二次平滑/ASD 判决
    const result = computeASD(streamId, data.level, this.globalLevelMap);
    this.onResult?.(streamId, result);
  }
}

// ai-vad-processor.ts (AudioWorkletProcessor)
import * as ort from 'onnxruntime-web';

class AIVadProcessor extends AudioWorkletProcessor {
  private session!: ort.InferenceSession;
  private state: Float32Array; // VAD 隐状态 [2, 1, 64]
  private embedSession!: ort.InferenceSession; // 声纹提取 (可选)
  private buffer = new Float32Array(512); // 32ms @ 16k
  private ptr = 0;

  constructor() {
    super();
    this.state = new Float32Array(2 * 1 * 64).fill(0); // h0, c0
  }

  async init(modelUrls: { vad: string; embed?: string }) {
    this.session = await ort.InferenceSession.create(modelUrls.vad, {
      executionProviders: ['wasm'],
      graphOptimizationLevel: 'all',
    });
    if (modelUrls.embed) {
      this.embedSession = await ort.InferenceSession.create(modelUrls.embed, {
        executionProviders: ['wasm'],
      });
    }
  }

  process(inputs: Float32Array[][]): boolean {
    const input = inputs[0][0];
    if (!input) return true;

    // 1. 环形缓冲累积 512 采样点
    for (const s of input) {
      this.buffer[this.ptr++] = s;
      if (this.buffer.length === 512) {
        this.runInference();
        this.ptr = 0;
      }
    }
    return true;
  }

  private async runInference() {
    // VAD 输入: [1, 512] + state [2, 1, 64]
    const inputTensor = new ort.Tensor('float32', this.buffer, [1, 512]);
    const stateTensor = new ort.Tensor('float32', this.state, [2, 1, 64]);
    
    const feeds = { input: inputTensor, state: stateTensor };
    const results = await this.session.run(feeds);
    
    // 输出: speech_prob [1], new_state [2, 1, 64]
    const speechProb = results.speech_prob.data[0] as number;
    this.state.set(results.new_state.data as Float32Array);

    // 可选：声纹 Embedding (仅 speechProb > 0.5 时跑，省算力)
    let embedding: Float32Array | null = null;
    if (speechProb > 0.5 && this.embedSession) {
      const embResult = await this.embedSession.run({ audio: inputTensor });
      embedding = embResult.embedding.data as Float32Array;
    }

    this.port.postMessage({ vadProb: speechProb, embedding });
  }
}
registerProcessor('ai-vad-processor', AIVadProcessor);

// useAIAudioLevel.ts 扩展
const useAIAudioLevel = (streams: MediaStream[]) => {
  // ... 原有 ALI 逻辑 ...
  
  // 新增：接收 embedding 聚类
  useEffect(() => {
    const handleMsg = (e: MessageEvent) => {
      if (e.data.embedding) {
        // 简单余弦相似度聚类，判断是否同一人连续讲话
        updateSpeakerIdentity(e.data.streamId, e.data.embedding);
      }
    };
    // worker.port.onmessage = handleMsg
  }, []);

  // ASD 判决升级：VAD概率 * 电平 * 身份一致性
  const computeActive = (streamId: string) => {
    const { level, vadProb, speakerId } = stateMap.get(streamId)!;
    const score = level * vadProb * (speakerId === currentDominantSpeaker ? 1.2 : 1.0);
    return score;
  };
};

        E2E (Cypress/Playwright)          ← 关键用户旅程：入会→发言→切屏→录制回放
       /                                 
  Integration (Vitest + Mock Service Worker)  ← 信令交互、订阅切换、弱网模拟
     /                                     
Unit (Vitest)                              ← 纯算法函数、Hook 逻辑、Reducer

// core/ali-algo.test.ts
import { fc } from '@fast-check/vitest';
import { computeRms, dbToLevel, emaSmooth, asdDecision } from './ali-algo';

describe('ALI 算法数学属性', () => {
  // 属性：RMS 非负且 <= 1 (归一化输入)
  test.prop([fc.array(fc.float({ min: -1, max: 1 }), { minLength: 1, maxLength: 480 })])
    ('RMS 范围正确', (samples) => {
      const rms = computeRms(samples);
      expect(rms).toBeGreaterThanOrEqual(0);
      expect(rms).toBeLessThanOrEqual(1);
    });

  // 属性：EMA 单调收敛
  test.prop([fc.float({ min: 0, max: 1 }), fc.float({ min: 0, max: 1 }), fc.float({ min: 0.01, max: 0.5 })])
    ('EMA 收敛性', (prev, curr, alpha) => {
      const next = emaSmooth(prev, curr, alpha);
      if (curr > prev) expect(next).toBeGreaterThanOrEqual(prev);
      else expect(next).toBeLessThanOrEqual(prev);
    });

  // 属性：ASD 互斥性 (单讲场景下仅有一个 true)
  test.prop([fc.array(fc.record({ id: fc.string(), level: fc.float({ min: 0, max: 1 }) }), { minLength: 2 })])
    ('单讲互斥', (streams) => {
      const max = Math.max(...streams.map(s => s.level));
      const maxCount = streams.filter(s => s.level === max).length;
      if (maxCount === 1 && max > 0.3) {
        const result = asdDecision(streams);
        expect(result.filter(r => r.isActive).length).toBe(1);
      }
    });
});

// integration/network-resilience.test.ts
import { createMockSFU, MockNetworkProfile } from '@test/sfu-mocker';

const profiles: MockNetworkProfile[] = [
  { name: '3G', rtt: 200, loss: 0.05, bandwidth: 500_000 },
  { name: 'WiFi抖动', rtt: 30, loss: 0.01, jitter: 80 },
  { name: '高丢包', rtt: 50, loss: 0.15, bandwidth: 2_000_000 },
];

for (const profile of profiles) {
  test(`ASD 准确率在 ${profile.name} 环境 > 95%`, async () => {
    const sfu = createMockSFU(profile);
    const { result } = renderHook(() => useAudioLevel(streams));
    
    // 注入标准测试向量 (ITU-T P.501 语料)
    await sfu.injectTestVectors('speech_zh_cn_16k.wav', { 
      speakerChanges: [{ at: 5000, from: 'A', to: 'B' }] 
    });
    
    // 等待收敛
    await waitFor(() => result.current.get('B')?.isActive === true, { timeout: 10000 });
    
    // 统计误判窗口
    const falsePositiveWindows = analyzeFalsePositives(result.current.history);
    expect(falsePositiveWindows.totalDuration).toBeLessThan(500); // ms
  });
}

// benchmarks/ali.bench.ts
import { bench, describe } from 'vitest';
import { AliProcessor } from '../core/ali-processor';

describe('ALI 处理性能', () => {
  bench('AudioWorklet 单帧处理 (256 samples)', () => {
    const processor = new AliProcessor({ processorOptions: DEFAULT_OPTS });
    const input = new Float32Array(256).fill(0.1);
    processor.process([input]);
  });

  bench('ONNX VAD 推理 (512 samples)', async () => {
    const session = await ort.InferenceSession.create('/models/silero_vad.onnx');
    const input = new ort.Tensor('float32', new Float32Array(512), [1, 512]);
    await session.run({ input, state: initialState });
  });
});

- name: Run Benchmarks
  run: npm run bench -- --reporter=json > bench-result.json
- name: Compare with Baseline
  uses: benchmark-action/github-action-benchmark@v1
  with:
    tool: 'vitest'
    output-file-path: bench-result.json
    github-token: ${{ secrets.GITHUB_TOKEN }}
    alert-threshold: '150%'  # 性能退化超 1.5x 报警
    fail-on-alert: true

// telemetry/asd-reporter.ts
interface AsdTelemetryEvent {
  type: 'asd_decision';
  meetingId: string;
  userId: string;
  timestamp: number;
  decisions: Array<{
    streamId: string;
    level: number;
    vadProb: number;
    isActive: boolean;
    algorithmVersion: 'rule_v2' | 'ai_v1';
  }>;
  // 关键：附带设备指纹用于分桶分析
  deviceFingerprint: {
    ua: string;
    cores: number;
    memory: number;
    audioLatency: number; // AudioContext.baseLatency
  };
}

// 批量上报，采样率 10% 避免流量压力
const reporter = new BatchReporter<AsdTelemetryEvent>({
  endpoint: '/api/telemetry/asd',
  batchSize: 50,
  flushInterval: 30_000,
  sampleRate: 0.1,
});

SELECT 
  algorithmVersion,
  deviceModel,
  quantile(0.99)(asd_latency_ms) AS p99_latency,
  countIf(isActive AND NOT groundTruthActive) / count() AS fp_rate
FROM asd_telemetry
WHERE meetingDate = today() 
  AND meetingType = 'large_group'
GROUP BY algorithmVersion, deviceModel
HAVING fp_rate > 0.05
ORDER BY fp_rate DESC
LIMIT 20;