flowchart LR
    A[媒体服务器] -->|AV1 AnnexB / MP4| B(Wasm 解复用模块)
    B -->|VideoChunk| C[VideoDecoder 硬解管线]
    C -->|VideoFrame| D[WebGL / WebGPU / Canvas 渲染]
    D --> E[用户可见画面]
    B -.->|配置信息| C

// src/lib.rs 关键片段
use wasm_bindgen::prelude::*;
use mp4parse::Mp4Parser;

#[wasm_bindgen]
pub struct Demuxer {
    parser: Mp4Parser,
    video_track_id: u32,
    sample_iter: Box<dyn Iterator<Item = Sample>>,
}

#[wasm_bindgen]
impl Demuxer {
    #[wasm_bindgen(constructor)]
    pub fn new(data: &[u8]) -> Result<Demuxer, JsValue> {
        let parser = Mp4Parser::new(data).map_err(|e| JsValue::from_str(&e.to_string()))?;
        // 选取首个 video track，实际生产需按语言/码率筛选
        let video_track_id = parser.tracks().iter()
            .find(|t| t.track_type == TrackType::Video)
            .map(|t| t.id).ok_or("no video track")?;
        let sample_iter = parser.samples(video_track_id).map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(Demuxer { parser, video_track_id, sample_iter: Box::new(sample_iter) })
    }

    /// 返回下一帧的 AnnexB NALU 字节流 + PTS/DTS
    #[wasm_bindgen]
    pub fn next_chunk(&mut self) -> Option<JsValue> {
        self.sample_iter.next().map(|sample| {
            let nalu = av1_parser::convert_to_annexb(&sample.data);
            serde_wasm_bindgen::to_value(&EncodedChunk {
                data: nalu,
                timestamp: sample.pts as f64, // 微秒
                duration: sample.duration as f64,
                is_key: sample.is_sync,
            }).unwrap()
        })
    }
}

#[derive(serde::Serialize)]
struct EncodedChunk {
    data: Vec<u8>,
    timestamp: f64,
    duration: f64,
    is_key: bool,
}

wasm-pack build --target web --out-dir pkg --features simd

// decoder.js
class AV1HardwareDecoder {
  constructor({ onFrame, onError }) {
    this.onFrame = onFrame;
    this.onError = onError;
    this.decoder = null;
    this.pendingFrames = new Map(); // frameId -> resolve
    this.initDecoder();
  }

  async initDecoder() {
    // 1. 特性检测
    const support = await VideoDecoder.isConfigSupported({
      codec: 'av01.0.05M.08', // AV1 Main Profile @ Level 5.1
      hardwareAcceleration: 'prefer-hardware',
      optimizeForLatency: true
    });
    if (!support.supported) {
      throw new Error(`AV1 硬解不支持: ${support.reason}`);
    }

    // 2. 实例化解码器
    this.decoder = new VideoDecoder({
      output: this.handleFrame.bind(this),
      error: this.handleError.bind(this)
    });

    // 3. 配置解码器
    this.decoder.configure({
      codec: 'av01.0.05M.08',
      codedWidth: 1920,
      codedHeight: 1080,
      hardwareAcceleration: 'prefer-hardware',
      optimizeForLatency: true,
      description: new Uint8Array([/* AV1C 配置盒子 */])
    });
  }

  // 4. 推送 Wasm 解复用输出的 Chunk
  decode(chunk) {
    const videoChunk = new EncodedVideoChunk({
      type: chunk.is_key ? 'key' : 'delta',
      timestamp: chunk.timestamp, // 微秒
      duration: chunk.duration,
      data: new Uint8Array(chunk.data)
    });
    this.decoder.decode(videoChunk);
  }

  handleFrame(frame) {
    // 零拷贝传递给渲染层
    this.onFrame(frame);
  }

  handleError(err) {
    this.onError(err);
    // 策略：重置解码器、请求关键帧、降级软解
  }

  flush() { return this.decoder.flush(); }
  close() { this.decoder.close(); }
}

// renderer.js
class GLRenderer {
  constructor(canvas) {
    this.gl = canvas.getContext('webgl2', { preserveDrawingBuffer: false });
    this.program = this.createProgram(YUV_SHADER_VERT, YUV_SHADER_FRAG);
    this.textures = { y: null, u: null, v: null };
    this.initTextures();
  }

  initTextures() {
    const gl = this.gl;
    ['y','u','v'].forEach((plane, i) => {
      const tex = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      this.textures[plane] = tex;
    });
  }

  render(videoFrame) {
    const gl = this.gl;
    gl.useProgram(this.program);
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

    // 上传 YUV 三平面（VideoFrame 已在 GPU 内存，零拷贝）
    const planes = ['y','u','v'];
    planes.forEach((plane, i) => {
      gl.activeTexture(gl.TEXTURE0 + i);
      gl.bindTexture(gl.TEXTURE_2D, this.textures[plane]);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RED, 
        videoFrame.codedWidth >> (i?1:0),
        videoFrame.codedHeight >> (i?1:0),
        0, gl.RED, gl.UNSIGNED_BYTE, videoFrame);
    });

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    videoFrame.close(); // 释放 GPU 资源，极其重要
  }
}

flowchart TD
    A[尝试 AV1 硬解] -->|成功| B[正常播放]
    A -->|NotSupportedError| C[尝试 AV1 软解]
    C -->|性能达标| B
    C -->|CPU 过高| D[切换 H.264 硬解]
    D -->|成功| B
    D -->|失败| E[提示用户升级浏览器/客户端]

flowchart LR
    Main[主线程 UI/交互/ABR决策] <-- postMessage(Transferable) --> Net[网络拉流 Worker]
    Net <-- ArrayBuffer/ReadableStream --> Demux[解复用 Worker Wasm]
    Demux <-- EncodedVideoChunk (Structured Clone) --> Dec[解码 Worker VideoDecoder]
    Dec <-- VideoFrame (Transferable) --> Render[渲染 Worker OffscreenCanvas/WebGPU]
    Render -.-> Main[统计上报/错误熔断]

// demux-worker.js: 利用 Structured Clone 传输 EncodedVideoChunk 底层缓冲区
self.onmessage = async (e) => {
  if (e.data.type === 'DEMUX_SEGMENT') {
    const chunks = wasmDemuxer.parse(e.data.buffer); // 返回 EncodedChunk[]
    // 关键：直接 postMessage，浏览器自动零拷贝传输 ArrayBuffer
    self.postMessage({ type: 'CHUNKS_READY', chunks }, 
      chunks.flatMap(c => c.data.buffer)); // Transferable 列表
  }
};

// decoder-worker.js: 接收并喂给 VideoDecoder
const decoder = new VideoDecoder({ output: handleFrame, error: handleErr });
self.onmessage = (e) => {
  if (e.data.type === 'CHUNKS_READY') {
    e.data.chunks.forEach(chunk => {
      decoder.decode(new EncodedVideoChunk({
        type: chunk.is_key ? 'key' : 'delta',
        timestamp: chunk.timestamp,
        duration: chunk.duration,
        data: new Uint8Array(chunk.data) // 此处无拷贝，视图共享内存
      }));
    });
  }
};

// 统一背压信号：基于 decoder.decodeQueueSize 动态调节拉流速率
class BackpressureController {
  private targetQueue = 8; // 经验值：2帧缓冲 @ 60fps ≈ 33ms
  private minQueue = 3, maxQueue = 15;

  onDecodeQueueChange(size: number) {
    if (size > this.maxQueue) this.signalNetwork('PAUSE');
    else if (size < this.minQueue) this.signalNetwork('RESUME');
  }
}

// shaders/av1_render.wgsl
@group(0) @binding(0) var yTex: texture_external;
@group(0) @binding(1) var uTex: texture_external;
@group(0) @binding(2) var vTex: texture_external;
@group(0) @binding(3) var sampler: sampler;

struct Params {
  displayWidth: f32,
  displayHeight: f32,
  // HDR 元数据 (SMPTE ST 2086 / CTA-861-3)
  maxLuminance: f32,
  minLuminance: f32,
  whitePoint: vec2f,
}
@group(1) @binding(0) var<uniform> params: Params;

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  const pos = array(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
  return vec4f(pos[idx], 0, 1);
}

@fragment
fn fs_main(@builtin(position) frag: vec4f) -> @location(0) vec4f {
  let uv = frag.xy / vec2f(params.displayWidth, params.displayHeight);
  // 采样 YUV (BT.2020 / PQ)
  let y = textureSampleLevel(yTex, sampler, uv, 0).r;
  let u = textureSampleLevel(uTex, sampler, uv, 0).r;
  let v = textureSampleLevel(vTex, sampler, uv, 0).r;
  
  // BT.2020 YCbCr -> RGB (ITU-R BT.2100)
  let rgb = mat3x3f(
    1.0,       0.0,        1.4746,
    1.0,      -0.16455,   -0.57135,
    1.0,       1.8814,     0.0
  ) * (vec3f(y, u, v) - vec3f(0, 0.5, 0.5));
  
  // PQ EOTF (ST 2084) -> 线性光 -> Tone Map (Reinhard) -> sRGB OETF
  let linear = pq_eotf(rgb);           // 自定义函数
  let toned  = reinhard_tonemap(linear, params.maxLuminance);
  return vec4f(srgb_oetf(toned), 1.0);
}

// render-worker.js (WebGPU)
class GPURenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.device = null;
    this.pipeline = null;
    this.bindGroupLayout = null;
    this.frameId = 0;
  }

  async init() {
    const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
    this.device = await adapter.requestDevice({
      requiredFeatures: ['texture-external', 'shader-f16'], // 必须显式申请
      requiredLimits: { maxTextureDimension2D: 8192 }
    });
    this.context = this.canvas.getContext('webgpu');
    this.context.configure({
      device: this.device,
      format: navigator.gpu.getPreferredCanvasFormat(),
      alphaMode: 'premultiplied',
      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
    });
    await this.createPipeline();
  }

  async createPipeline() {
    const shader = this.device.createShaderModule({ code: await fetchShader() });
    this.bindGroupLayout = this.device.createBindGroupLayout({
      entries: [
        { binding: 0, visibility: GPUShaderStage.FRAGMENT, externalTexture: {} },
        { binding: 1, visibility: GPUShaderStage.FRAGMENT, externalTexture: {} },
        { binding: 2, visibility: GPUShaderStage.FRAGMENT, externalTexture: {} },
        { binding: 3, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
      ]
    });
    const pipelineLayout = this.device.createPipelineLayout({ bindGroupLayouts: [this.bindGroupLayout, uniformLayout] });
    this.pipeline = this.device.createRenderPipeline({
      layout: pipelineLayout,
      vertex: { module: shader, entryPoint: 'vs_main' },
      fragment: { module: shader, entryPoint: 'fs_main', targets: [{ format: this.context.format }] },
      primitive: { topology: 'triangle-strip' }
    });
  }

  // 每帧调用：VideoFrame 必须在同一帧内使用，否则失效
  render(videoFrame, hdrMeta) {
    if (!this.device) return;
    
    // 1. 导入外部纹理（零拷贝，绑定当前帧生命周期）
    const yTex = this.device.importExternalTexture({ source: videoFrame, colorSpace: 'bt2020', rotation: 'flip-y' });
    const uTex = this.device.importExternalTexture({ source: videoFrame, colorSpace: 'bt2020', rotation: 'flip-y', plane: 1 });
    const vTex = this.device.importExternalTexture({ source: videoFrame, colorSpace: 'bt2020', rotation: 'flip-y', plane: 2 });

    // 2. 更新 Uniform Buffer (HDR 元数据)
    this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([
      videoFrame.displayWidth, videoFrame.displayHeight,
      hdrMeta.maxLuminance, hdrMeta.minLuminance,
      hdrMeta.whitePoint[0], hdrMeta.whitePoint[1]
    ]));

    // 3. 录制 Command Buffer
    const bindGroup = this.device.createBindGroup({
      layout: this.bindGroupLayout,
      entries: [
        { binding: 0, resource: yTex },
        { binding: 1, resource: uTex },
        { binding: 2, resource: vTex },
        { binding: 3, resource: this.sampler }
      ]
    });

    const encoder = this.device.createCommandEncoder();
    const pass = encoder.beginRenderPass({
      colorAttachments: [{ view: this.context.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store' }]
    });
    pass.setPipeline(this.pipeline);
    pass.setBindGroup(0, bindGroup);
    pass.setBindGroup(1, this.uniformBindGroup);
    pass.draw(4);
    pass.end();
    this.device.queue.submit([encoder.finish()]);

    // 4. 释放 VideoFrame（归还给解码器池）
    videoFrame.close();
  }
}

interface QoEMetrics {
  // 网络层
  throughput: number;        // 实时吞吐 Mbps (EWMA 平滑)
  rtt: number;               // WebTransport/HTTP3 RTT
  // 解码层
  decodeTimeP50: number;     // ms
  decodeTimeP99: number;
  decodeQueueDepth: number;  // 实时队列长度
  droppedFrames: number;     // 累计丢帧
  // 渲染层
  gpuMemoryUsage: number;    // MB
  frameIntervalJitter: number; // ms
  // 业务层
  startupDelay: number;      // 首帧时间
  rebufferRatio: number;     // 卡顿占比
}

# 伪代码：每 2s 执行一次
def select_quality(metrics, manifest):
    # 1. 带宽预测 (指数加权移动平均 + 安全系数)
    bw_est = metrics.throughput * 0.85
    
    # 2. 缓冲健康度
    buffer_health = min(1.0, metrics.decodeQueueDepth / TARGET_QUEUE)
    
    # 3. 设备能力评分 (基于基准跑分)
    device_score = get_device_score() # 0.5 ~ 1.5
    
    # 4. 候选码率过滤
    candidates = [r for r in manifest.bitrates if r.bitrate < bw_est * buffer_health * device_score]
    
    # 5. 目标函数：最大化 QoE = Quality - λ1*Rebuffer - λ2*Switch
    best = max(candidates, key=lambda r: 
        r.quality_score 
        - 2.0 * predict_rebuffer(r.bitrate, bw_est) 
        - 0.5 * (r != current_quality)
    )
    return best

// 统一上报入口
function reportMetric(name: string, value: number, attributes: Record<string, string>) {
  const payload = {
    timestamp: Date.now(),
    metric: `webcodecs.av1.${name}`,
    value,
    tags: {
      browser: getBrowserName(),
      gpu_vendor: getGPUVendor(), // 关键：区分 NVIDIA/AMD/Intel/Qualcomm/Apple/国产GPU
      os: navigator.platform,
      is_hw_accel: videoDecoderConfig.hardwareAcceleration,
      profile: currentProfile, // av01.0.05M.08 等
      ...attributes
    }
  };
  // 批量发送至 ClickHouse / VictoriaMetrics
  beaconQueue.push(payload);
}

# .gitlab-ci.yml 片段
stages:
  - build_wasm
  - test_compat
  - deploy_cdn

build_wasm_x86:
  image: rust:1.78-slim
  script:
    - rustup target add wasm32-unknown-unknown
    - wasm-pack build --release --target web --out-dir pkg/x86
  artifacts:
    paths: [pkg/x86/]

build_wasm_arm64:
  image: arm64v8/rust:1.78-slim
  script:
    - wasm-pack build --release --target web --out-dir pkg/arm64
  artifacts:
    paths: [pkg/arm64/]

build_wasm_loongarch:
  image: loongnix/loongarch64-rust:1.78
  script:
    - wasm-pack build --release --target web --out-dir pkg/loongarch --no-simd
  artifacts:
    paths: [pkg/loongarch/]

test_compat:
  needs: [build_wasm_x86, build_wasm_arm64, build_wasm_loongarch]
  script:
    - python run_compat_matrix.py --matrix config/cnci_matrix.yaml
  # 产出：compat_report.html，自动评论 MR

def calculate_roi(dau, avg_watch_min, hw_decode_ratio):
    # 假设 H.264 码率 6Mbps, AV1 3.5Mbps (节省 42%)
    bandwidth_saving = (6 - 3.5) / 8 * 3600 * avg_watch_min / 60 * 0.12 # 元/用户/天
    transcode_extra = 3.5 / 8 * 3600 * avg_watch_min / 60 * 0.05 # 元/用户/天 (转码溢价)
    client_saving = hw_decode_ratio * 0.006 * avg_watch_min / 60 # 客户端省电折算
    
    daily_net = (bandwidth_saving - transcode_extra + client_saving) * dau
    return daily_net * 30 # 月度净收益