# 初始化项目
npm init -y
# 安装构建工具与类型定义
npm install -D typescript webpack webpack-cli @types/emscripten
# 获取 dav1d wasm 预构建产物 (或自行编译)
npm install @videolan/dav1d-wasm

// types/dav1d.d.ts
export interface Dav1dWasmModule {
  // 内存管理
  _malloc(size: number): number;
  _free(ptr: number): void;
  HEAPU8: Uint8Array;
  
  // 解码器生命周期
  dav1d_open(settingsPtr: number): number; // 返回上下文指针
  dav1d_close(ctxPtr: number): void;
  dav1d_send_data(ctxPtr: number, dataPtr: number, size: number): number;
  dav1d_get_picture(ctxPtr: number, picPtr: number): number;
  
  // 设置结构体偏移量 (需根据编译版本生成)
  // 建议使用 wasm2wat 反汇编或官方头文件确认偏移
}

class DecoderScheduler {
  private worker: Worker;
  private frameCallbacks: Map<number, (frame: VideoFrame) => void> = new Map();
  private frameId = 0;

  constructor() {
    this.worker = new Worker(new URL('./decoder.worker.ts', import.meta.url), { type: 'module' });
    this.worker.onmessage = this.handleMessage.bind(this);
  }

  decode(chunk: EncodedVideoChunk): Promise<VideoFrame> {
    return new Promise((resolve) => {
      const id = this.frameId++;
      this.frameCallbacks.set(id, resolve);
      // 传输 ArrayBuffer 所有权 (零拷贝)
      this.worker.postMessage({ id, data: chunk.data, timestamp: chunk.timestamp, type: chunk.type }, [chunk.data]);
    });
  }
  // ... 处理回调逻辑
}

// decoder.worker.ts
import initDav1d, { Dav1dWasmModule } from '@videolan/dav1d-wasm';

let Module: Dav1dWasmModule;
let decoderCtx: number = 0;

async function initDecoder() {
  Module = await initDav1d({
    locateFile: (path) => `https://cdn.example.com/wasm/${path}`, // CDN 加速
    // 关键：预分配内存，减少 runtime growth 开销
    initialMemory: 64 * 1024 * 1024, // 64MB 初始内存
    maximumMemory: 512 * 1024 * 1024 // 512MB 上限
  });

  // 初始化 dav1d 设置结构体 (简化版)
  const settingsPtr = Module._malloc(/* 结构体大小 */);
  // 设置 n_threads = navigator.hardwareConcurrency || 2 (启用多线程)
  // 设置 frame_size_limit 等参数
  
  decoderCtx = Module.dav1d_open(settingsPtr);
  Module._free(settingsPtr);
  
  if (decoderCtx === 0) throw new Error('Dav1d 初始化失败');
}

self.onmessage = async (e: MessageEvent) => {
  const { id, data, timestamp, type } = e.data;
  const inputPtr = Module._malloc(data.byteLength);
  Module.HEAPU8.set(new Uint8Array(data), inputPtr);

  // 1. 送入解码器
  const retSend = Module.dav1d_send_data(decoderCtx, inputPtr, data.byteLength);
  Module._free(inputPtr); // dav1d 内部拷贝后可立即释放

  // 2. 循环取帧 (可能一包数据对应多帧或零帧)
  const picPtr = Module._malloc(/* Dav1dPicture 结构体大小 */);
  let frameOutput: VideoFrame | null = null;

  while (true) {
    const retGet = Module.dav1d_get_picture(decoderCtx, picPtr);
    if (retGet === 0) { // 成功获取一帧
      // 从 Wasm 内存读取 YUV 平面数据 (data[0], data[1], data[2], stride[0]...)
      // 构造 VideoFrame (需拷贝到新 ArrayBuffer，因 Wasm 内存可能增长失效)
      frameOutput = new VideoFrame(/* planes, layout, timestamp, format */);
      break; // 简化：每次 postMessage 仅返回一帧，实际应缓存队列
    } else if (retGet === -EAGAIN) { // 需要更多数据
      break;
    } else { // 错误处理
      console.error('解码错误:', retGet);
      break;
    }
  }
  Module._free(picPtr);

  if (frameOutput) {
    // transfer 所有权回主线程
    self.postMessage({ id, frame: frameOutput }, [frameOutput]);
  } else {
    self.postMessage({ id, frame: null }); // 信号：需更多数据
  }
};

// CapabilityDetection.ts
export async function checkHardwareSupport(): Promise<'hardware' | 'wasm'> {
  if (!('VideoDecoder' in window)) return 'wasm';
  
  const config = { codec: 'av01.0.05M.08', hardwareAcceleration: 'prefer-hardware' };
  try {
    const support = await VideoDecoder.isConfigSupported(config);
    if (support.supported && support.config.hardwareAcceleration === 'hardware') {
      return 'hardware';
    }
  } catch (e) { /* 忽略异常，回退 */ }
  return 'wasm';
}

graph TD
    A[输入流 MP4/WebM] --> B{Demuxer}
    B --> C[EncodedVideoChunk]
    C --> D{Capability Check}
    D -- 支持硬解 --> E[VideoDecoder (硬件加速)]
    D -- 不支持/降级 --> F[WebWorker + dav1d-wasm (SIMD软解)]
    E --> G[VideoFrame]
    F --> G
    G --> H[渲染器 Canvas/WebGL/WebGPU]

// benchmark/perf.test.js
const { chromium } = require('playwright');
const fs = require('fs');

const TEST_VIDEOS = [
  { name: '1080p60', url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', res: '1920x1080' },
  { name: '4K30', url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', res: '3840x2160' } // 替换为真实4K源
];

async function runBenchmark() {
  const browser = await chromium.launch({ headless: true, args: ['--enable-gpu', '--use-gl=angle'] });
  const results = [];

  for (const video of TEST_VIDEOS) {
    const page = await browser.newPage();
    await page.goto('http://localhost:3000/benchmark.html'); // 你的测试页面
    
    // 注入测试逻辑
    const metrics = await page.evaluate(async (src) => {
      const player = new Av1Player({ wasmFallback: true });
      const frames = [];
      let dropped = 0;
      let lastTs = 0;
      
      return new Promise(resolve => {
        player.on('frame', (frame) => {
          const now = performance.now();
          if (lastTs && (now - lastTs) > 20) dropped++; // 简易掉帧判定
          frames.push({ decodeTime: frame.decodeTime, renderTime: now });
          lastTs = now;
        });
        player.on('error', resolve);
        player.load(src);
        setTimeout(() => {
          player.destroy();
          resolve({ frames, dropped, total: frames.length });
        }, 30000); // 跑30秒
      });
    }, video.url);

    // 统计计算
    const avgDecode = metrics.frames.reduce((a,b)=>a+b.decodeTime,0)/metrics.frames.length;
    results.push({
      ...video,
      avgDecodeMs: avgDecode.toFixed(2),
      dropRate: (metrics.dropped/metrics.total*100).toFixed(2)+'%',
      fps: (1000/avgDecode).toFixed(1)
    });
    await page.close();
  }
  await browser.close();
  fs.writeFileSync('benchmark-report.json', JSON.stringify(results, null, 2));
  console.table(results);
}
runBenchmark();

// Renderer.js (主线程)
class ZeroCopyRenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.gl = canvas.getContext('webgl2', { preserveDrawingBuffer: false });
    this.textureCache = new Map(); // 复用纹理对象，减少 GC
    this.shaderProgram = this.initShaders(); // YUV -> RGB 着色器
  }

  async render(videoFrame) {
    // 1. 直接将 VideoFrame 作为纹理源 (零拷贝上传)
    // 需确保 VideoFrame.format 为 'I420' 或 'NV12'
    const texture = this.getOrCreateTexture(videoFrame);
    
    // 2. 使用 gl.texSubImage2D 配合 PBO (Pixel Buffer Object) 或 
    // 直接 gl.texImage2D({ source: videoFrame }) // Chrome 100+ 支持
    this.gl.bindTexture(this.gl.TEXTURE_2D, texture.y);
    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RED, 
                       this.gl.RED, this.gl.UNSIGNED_BYTE, videoFrame); // 零拷贝上传 Y 平面
    // ... 上传 U/V 平面
    
    // 3. 绘制
    this.draw();
    
    // 4. 关键：及时释放 VideoFrame 引用，归还底层缓冲区给解码器池
    videoFrame.close(); 
  }
}

// Rust 编写 Wasm 核心滤波器片段 (编译目标 wasm32-unknown-unknown)
#[target_feature(enable = "simd128")]
unsafe fn horizontal_filter_8tap_simd(src: *const u8, stride: usize, dst: *mut u8, coeffs: &[i16; 8]) {
    // 使用 v128.load, v128.dot_i16i8_add_sat_i16x8 等指令
    // 手动展开循环，利用 Wasm SIMD 128bit 寄存器一次处理 8/16 个像素
    // 避免编译器因指针别名分析保守而产生的冗余加载/存储
}

graph LR
    subgraph Worker_1 [Worker: 解码线程池]
        A[解码帧 N] --> B[输出 YUV 内部缓冲区]
    end
    subgraph Worker_2 [Worker: 后处理线程]
        B --> C[HDR Tone Mapping / 色域转换 / Film Grain 合成]
        C --> D[生成 GPU 友好格式 NV12/P010]
    end
    subgraph Main_Thread [主线程: 渲染提交]
        D --> E[VideoFrame.wrap / texImage2D]
        E --> F[requestAnimationFrame 绘制]
    end

# 严格 CSP：仅允许同源 Wasm，禁止 inline script/eval
# 注意：若使用 wasm-bindgen --target web, 需允许 'wasm-unsafe-eval' 或预编译为 ES Module
add_header Content-Security-Policy 
  "default-src 'self'; 
   script-src 'self' 'wasm-unsafe-eval' https://cdn.yourdomain.com; 
   worker-src 'self' blob:; 
   child-src 'self' blob:; 
   img-src 'self' data: https:; 
   media-src 'self' https://vod.yourdomain.com; 
   connect-src 'self' wss://signal.yourdomain.com https://api.yourdomain.com;
   require-trusted-types-for 'script';" always;

# COOP/COEP 仅作用于解码器隔离页面，避免污染主站广告/统计 SDK
location /player/wasm-decoder/ {
    add_header Cross-Origin-Opener-Policy "same-origin";
    add_header Cross-Origin-Embedder-Policy "require-corp";
    add_header Cross-Origin-Resource-Policy "cross-origin";
}

# .github/workflows/device-farm.yml
jobs:
  compatibility-test:
    runs-on: ubuntu-latest
    strategy:
      matrix: 
        device: [iphone15pro, s24ultra, pixel8, iphone_se2, redmi_k70, win11_chrome, macos_safari]
    steps:
      - uses: actions/checkout@v4
      - name: Run on Device Farm (AWS Device Farm / BrowserStack / 自建 STF)
        run: |
          npm run test:e2e -- --device=${{ matrix.device }} --scenario=av1_4k60_stress
      - name: Upload Metrics to InfluxDB
        run: node scripts/upload-metrics.js
      - name: Alert on Regression
        if: failure()
        run: curl -X POST ${{ secrets.ALERT_WEBHOOK }} -d "AV1 Decoder Regression on ${{ matrix.device }}"

interface QoEMetrics {
  // 环境标识
  ua: string; sdkVer: string; abi: string; // 设备架构
  // 解码器选型
  decoderPath: 'hardware' | 'wasm-simd-mt' | 'wasm-simd-st' | 'wasm-fallback';
  // 关键性能
  startupLatencyMs: number; // 首帧渲染耗时
  avgDecodeLatencyMs: number; // P50/P95/P99
  decodeErrorRate: number; // 解码错误/总帧
  fallbackCount: number; // 硬解->软解 降级次数
  // 资源消耗
  peakMemoryMB: number; // performance.measureUserAgentSpecificMemory()
  cpuTimeMs: number; // 解码 Worker 累计 CPU 时间
  // 体验结果
  stallCount: number; // 卡顿次数 (>1s)
  stallDurationMs: number;
  userAction: 'play' | 'pause' | 'seek' | 'quality_change' | 'exit';
}

# 单机型硬解失败率飙升 > 5% (可能驱动/系统更新导致)
sum by (device_model) (rate(av1_decoder_fallback_total[5m])) 
/ sum by (device_model) (rate(av1_decoder_init_total[5m])) > 0.05

# Wasm 低端机 OOM 崩溃率 > 1%
sum by (device_model) (rate(av1_wasm_oom_crash_total[1h])) 
/ sum by (device_model) (rate(av1_session_start_total[1h])) > 0.01