graph LR
    A[采集设备] --> B(MediaStreamTrack)
    B --> C{分流决策}
    C -->|低延迟/高画质| D[VideoEncoder 硬编]
    C -->|兼容兜底| E[RTCPeerConnection 内置编码器]
    D --> F[EncodedVideoChunk]
    F --> G[RTCRtpSender.insertableStreams]
    G --> H[网络传输]
    H --> I[RTCRtpReceiver.insertableStreams]
    I --> J[EncodedVideoChunk]
    J --> K[VideoDecoder 硬解]
    K --> L[VideoFrame]
    L --> M[VideoFrameProcessor / Canvas/WebGL 渲染]

async function probeEncoderSupport() {
  const configs = [
    { codec: 'avc1.42001f', hardwareAcceleration: 'prefer-hardware' }, // H.264 High@L3.1
    { codec: 'av01.0.05M.08', hardwareAcceleration: 'prefer-hardware' }, // AV1 Main@L5.0
    { codec: 'vp09.00.10.08', hardwareAccellation: 'prefer-hardware' }  // VP9 Profile 0
  ];

  const results = await Promise.all(
    configs.map(cfg => VideoEncoder.isConfigSupported(cfg))
  );

  // 选取首个 supported: true 且 hardwareAcceleration 不为 'no' 的配置
  return configs.find((_, i) => results[i].supported && results[i].hardwareAcceleration !== 'no');
}

class RateController {
  constructor(encoder, bandwidthEstimator) {
    this.encoder = encoder;
    this.bwe = bandwidthEstimator;
    this.currentBitrate = 1_500_000; // 1.5 Mbps 起步
    this.keyFrameInterval = 3000;    // 3s 一个 IDR
  }

  onBandwidthChange(availableBps) {
    // 留 20% 余量给音频/重传
    const target = Math.floor(availableBps * 0.8);
    // 平滑变化，避免码率剧烈跳动导致画质闪烁
    this.currentBitrate = this.currentBitrate * 0.7 + target * 0.3;
    this.encoder.encode({ bitrate: this.currentBitrate });
  }

  onPacketLoss(plr) {
    if (plr > 0.05) {
      // 丢包 >5%：缩短关键帧间隔 + 请求 FIR
      this.keyFrameInterval = 1000;
      this.requestKeyFrame();
    } else if (plr < 0.01) {
      this.keyFrameInterval = 3000;
    }
  }

  requestKeyFrame() {
    // 通过 insertable streams 发送 RTCP PLI/FIR
    this.sender.sendPlI();
  }
}

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2', { alpha: false, preserveDrawingBuffer: false });
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
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);

const decoder = new VideoDecoder({
  output: (frame) => {
    // 零拷贝上传：YUV420P -> 3 个纹理或单纹理 + 片元着色器转换
    uploadYUV420ToGL(frame);
    frame.close(); // 及时释放内存
    scheduleRender(frame.timestamp);
  },
  error: (e) => console.error('Decoder error:', e)
});

function uploadYUV420ToGL(frame) {
  const yPlane = new Uint8Array(frame.buffer, 0, frame.codedWidth * frame.codedHeight);
  const uPlane = new Uint8Array(frame.buffer, yPlane.length, yPlane.length / 4);
  const vPlane = new Uint8Array(frame.buffer, yPlane.length + uPlane.length, yPlane.length / 4);
  // 绑定 3 个纹理单元，片元着色器做 YUV->RGB
  gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, yTex); gl.texSubImage2D(...);
  gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, uTex); gl.texSubImage2D(...);
  gl.activeTexture(gl.TEXTURE2); gl.bindTexture(gl.TEXTURE_2D, vTex); gl.texSubImage2D(...);
}

function scheduleRender(timestamp) {
  // 与显示器刷新率对齐，避免撕裂
  requestVideoFrameCallback((now, metadata) => {
    drawScene();
    scheduleRender(timestamp);
  });
}

class JitterBuffer {
  constructor(maxDelayMs = 200) {
    this.queue = new Map(); // timestamp -> EncodedVideoChunk
    this.maxDelay = maxDelayMs;
    this.playoutTime = 0;
  }

  push(chunk) {
    this.queue.set(chunk.timestamp, chunk);
    this.maybeDecode();
  }

  maybeDecode() {
    const now = performance.now();
    // 计算目标播放时间 = 最早到达时间 + 当前抖动估算
    const target = this.playoutTime + this.estimateJitter();
    const chunk = this.queue.get(target);
    if (chunk) {
      this.queue.delete(target);
      this.decoder.decode(chunk);
      this.playoutTime = target + (chunk.duration || 33333); // 微秒
    } else if (this.queue.size > 60) {
      // 缓冲区过大，丢弃最旧帧，请求关键帧
      this.dropOldest();
      this.requestKeyFrame();
    }
  }

  estimateJitter() {
    // 简化：取最近 10 帧到达时间方差的 2 倍
    return Math.min(this.maxDelay, this.jitterEstimator.get() * 2);
  }
}

const processor = new VideoFrameProcessor({
  async process(frame, controller) {
    // 1. 将 VideoFrame 拷贝至 OffscreenCanvas
    const ctx = offscreenCanvas.getContext('2d');
    ctx.drawImage(frame, 0, 0);
    const imgData = ctx.getImageData(0, 0, frame.codedWidth, frame.codedHeight);
    
    // 2. WASM 降噪（仅演示 Y 平面）
    const denoisedY = await rnnoiseModule.denoise(imgData.data, frame.codedWidth, frame.codedHeight);
    
    // 3. 写回新 VideoFrame
    const newFrame = new VideoFrame(offscreenCanvas, { timestamp: frame.timestamp });
    controller.enqueue(newFrame);
    frame.close();
  }
});

// WebGPU Compute Shader 片段
@group(0) @binding(0) var<storage, read> input: array<vec4<f32>>;
@group(0) @binding(1) var<storage, write> output: array<vec4<f32>>;
@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  // 简化：双线性插值 + 锐化
  let uv = vec2<f32>(id.xy) / vec2<f32>(textureDimensions(input));
  output[id.x + id.y * 1920] = textureSampleLevel(input, sampler, uv, 0.0);
}

const svcConfig = {
  codec: 'vp09.00.10.08', // VP9 Profile 0
  width: 1920,
  height: 1080,
  bitrate: 3_000_000,      // 目标总码率
  framerate: 30,
  hardwareAcceleration: 'prefer-hardware',
  scalabilityMode: 'L3T3_KEY' // 标准化可伸缩模式标识
};

// 编码器配置：显式声明分层结构
await encoder.configure({
  ...svcConfig,
  // 关键：通过 scalabilityMode 告知编码器内部 GOP 结构
  // 兼容性兜底：若编码器不支持 scalabilityMode，需手动构造 GOP
  avc: { format: 'annexb' } // 或 avc: { format: 'avc' } 视信令协商而定
});

// 发送端：在 Insertable Streams 中注入层标识
const senderTransform = new TransformStream({
  transform(encodedFrame, controller) {
    // 1. 解析 VP9/AV1 Payload Descriptor 获取 S, T, U, D, P, B 等字段
    const layerInfo = parsePayloadDescriptor(encodedFrame.data);
    
    // 2. 挂载至 metadata，供 SFU 路由决策使用（通过 RTP Header Extension 传递）
    controller.enqueue(encodedFrame, {
      spatialLayer: layerInfo.spatialId,
      temporalLayer: layerInfo.temporalId,
      frameId: encodedFrame.timestamp // 关联端到端追踪
    });
  }
});

class ScreenContentAnalyzer {
  constructor() {
    this.canvas = new OffscreenCanvas(1920, 1080);
    this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
    this.lastFrameHash = null;
  }

  analyze(frame) {
    this.ctx.drawImage(frame, 0, 0, 320, 180); // 降采样分析
    const data = this.ctx.getImageData(0, 0, 320, 180).data;
    
    // 1. 变化率检测（感知哈希 / 均方差）
    const diffRatio = this.calcDiffRatio(data);
    
    // 2. 高频边缘密度（Sobel 算子近似）
    const edgeDensity = this.calcEdgeDensity(data);
    
    // 3. 色彩熵（判断是否为 PPT/代码/纯色背景）
    const colorEntropy = this.calcColorEntropy(data);
    
    return { diffRatio, edgeDensity, colorEntropy };
  }

  getEncodingHint(metrics) {
    if (metrics.diffRatio < 0.001) return 'FREEZE';           // 静止：停止编码，发送帧冻结指令
    if (metrics.edgeDensity > 0.15 && metrics.colorEntropy < 3.5) return 'TEXT_OPTIMIZED'; // 文本/代码
    if (metrics.colorEntropy > 5.5) return 'PHOTO_VIDEO';     // 图片/视频回放
    return 'DEFAULT';
  }
}

// 发送端
if (hint === 'FREEZE') {
  // 发送一个长度为 0 的 EncodedVideoChunk，仅携带 timestamp 与 freezeFlag
  controller.enqueue(new EncodedVideoChunk({
    type: 'delta', timestamp: now, duration: 100_000_000, // 100s 超长 duration
    data: new Uint8Array(0)
  }), { freeze: true });
}

// 接收端解码器回调
decoder = new VideoDecoder({
  output: (frame) => {
    if (frame.metadata?.freeze) {
      // 渲染层持有上一帧纹理，直接复用，不触发解码/上传
      renderer.holdFrame(frame.timestamp);
      frame.close();
      return;
    }
    renderer.enqueue(frame);
  }
});

// 1. 密钥派生：每帧唯一 Nonce = BaseNonce || FrameID (64bit)
class FrameCrypter {
  constructor(baseKey, baseNonce) {
    this.baseKey = baseKey; // CryptoKey (AES-GCM)
    this.baseNonce = baseNonce; // Uint8Array(12)
    this.frameCounter = 0n;
  }

  async encrypt(clearChunk) {
    const nonce = this.deriveNonce(this.frameCounter++);
    const aad = this.buildAAD(clearChunk); // 绑定 timestamp, layerId, ssrc
    const ciphertext = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv: nonce, additionalData: aad, tagLength: 128 },
      this.baseKey,
      clearChunk.data
    );
    return new EncodedVideoChunk({
      type: clearChunk.type,
      timestamp: clearChunk.timestamp,
      duration: clearChunk.duration,
      data: new Uint8Array(ciphertext) // 密文 = 密文体 + 16B Tag
    });
  }

  deriveNonce(counter) {
    const nonce = new Uint8Array(this.baseNonce);
    const view = new DataView(nonce.buffer);
    view.setBigUint64(4, counter, false); // 后 8 字节作计数器
    return nonce;
  }
}

sequenceDiagram
    participant App as 应用层
    participant Enc as VideoEncoder
    participant EncTrans as Encrypt TransformStream
    participant Net as 网络传输
    participant DecTrans as Decrypt TransformStream
    participant Dec as VideoDecoder
    participant Render as 渲染器

    App->>Enc: VideoFrame
    Enc->>EncTrans: EncodedVideoChunk (明文)
    EncTrans->>EncTrans: AES-GCM 加密 (帧级并行)
    EncTrans->>Net: EncodedVideoChunk (密文)
    Net->>DecTrans: EncodedVideoChunk (密文)
    DecTrans->>DecTrans: AES-GCM 解密 & 完整性校验
    alt 校验失败
        DecTrans->>App: 触发 KeyFrameRequest / 密钥轮换
    else 校验通过
        DecTrans->>Dec: EncodedVideoChunk (明文)
        Dec->>Render: VideoFrame
    end

{
  "deviceId": "hash_of_fingerprint",
  "encoders": [
    {"codec": "av01.0.05M.08", "hw": true, "maxRes": "3840x2160", "maxFps": 60, "svcModes": ["L3T3", "L2T3"]},
    {"codec": "vp09.00.10.08", "hw": true, "maxRes": "1920x1080", "maxFps": 30, "svcModes": ["L3T3"]},
    {"codec": "avc1.42001f", "hw": true, "maxRes": "1920x1080", "maxFps": 60, "svcModes": ["L1T1"]}
  ],
  "decoders": [ ... ],
  "gpu": {"vendor": "NVIDIA", "renderer": "RTX 3060", "driver": "550.90"},
  "preferences": {"preferCodec": "av1", "preferHw": true, "maxRecvBitrate": 8_000_000}
}

# SFU 伪代码：选流决策引擎
def select_layer(sender_profile, receiver_profile, available_bw):
    # 1. 编解码器交集
    common_codecs = set(sender_profile.encoders) & set(receiver_profile.decoders)
    if not common_codecs:
        return FALLBACK_TRANSCODE # 强制转码兜底
    
    # 2. 优先选硬件加速交集
    hw_codecs = [c for c in common_codecs if c.hw_enc and c.hw_dec]
    target_codec = hw_codecs[0] if hw_codecs else common_codecs[0]
    
    # 3. SVC 模式匹配
    svc_mode = max(set(sender_profile.svcModes) & set(receiver_profile.svcModes), key=layer_count)
    
    # 4. 带宽约束下的层裁剪
    target_layers = svc_mode.fit_bandwidth(available_bw * 0.9)
    
    return StreamSpec(codec=target_codec, svcMode=svc_mode, layers=target_layers)

const CodecState = { HEALTHY: 0, DEGRADED: 1, BROKEN: 2, RECOVERING: 3 };

class ResilientCodecPipeline {
  constructor() {
    this.state = CodecState.HEALTHY;
    this.failureCount = 0;
    this.watchdogTimer = null;
  }

  // 编码侧熔断
  async safeEncode(frame) {
    if (this.state === CodecState.BROKEN) throw new Error('Pipeline broken');
    
    try {
      this.resetWatchdog();
      await this.encoder.encode(frame);
      this.failureCount = 0; // 成功重置计数
    } catch (e) {
      this.handleEncodeFailure(e);
    }
  }

  handleEncodeFailure(error) {
    this.failureCount++;
    if (this.failureCount >= 3) {
      this.transitionTo(CodecState.DEGRADED);
      // 策略1：切换编码器实例 (同配置重建)
      this.recreateEncoder().then(() => this.transitionTo(CodecState.HEALTHY));
      
      // 策略2：降级到软编 / 降分辨率 / 降帧率
      if (this.retryCount > 2) this.downgradeConfig();
    }
  }

  // 解码侧看门狗：检测“卡顿假死”
  resetWatchdog() {
    clearTimeout(this.watchdogTimer);
    this.watchdogTimer = setTimeout(() => {
      console.error('Decoder stall detected, forcing reset');
      this.decoder.flush(); // 尝试刷新
      setTimeout(() => this.decoder.reset(), 500); // 强制重置
      this.requestKeyFrame(); // 请求上游 IDR
    }, 2000); // 2秒无帧输出触发
  }
}

// 未来标准：零拷贝导入解码帧至 WebGPU
const gpuTexture = await device.importExternalTexture({
  source: videoFrame, // 直接传入 VideoFrame
  colorSpace: 'bt709',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING
});

// WebGPU Compute Shader 直接读写 YUV 平面
@group(0) @binding(0) var yTex: texture_2d<f32>;
@group(0) @binding(1) var uTex: texture_2d<f32>;
@group(0) @binding(2) var vTex: texture_2d<f32>;
@group(0) @binding(3) var outTex: texture_storage_2d<rgba8unorm, write>;

// 超分/降噪/虚拟背景 全在 GPU 完成，零拷贝回显