<!-- 允许摄像头与全屏，防止 iframe 嵌入受限 -->
<iframe allow="camera; fullscreen" src="your-app.html"></iframe>

// main.js
async function setupPipeline() {
  const stream = await navigator.mediaDevices.getUserMedia({ 
    video: { width: 1280, height: 720, frameRate: 30 }, 
    audio: true 
  });

  const pc = new RTCPeerConnection();
  const sender = pc.addTrack(stream.getVideoTracks()[0], stream);

  // 1. 创建 Worker
  const worker = new Worker('video-processor.js', { type: 'module' });

  // 2. 创建 Insertable Streams (发送端，编码前处理)
  // 注意：createEncodedStreams 操作压缩帧；createDecodedStreams 操作原始像素帧
  // 滤镜/水印需操作像素，故使用 createDecodedStreams (或 sender.createEncodedStreams 配合 WebCodecs 解码，但前者更直接)
  // 修正：发送端通常用 createEncodedStreams 配合 WebCodecs 解码器，或直接用 createDecodedStreams (Chrome 实现中 sender 暂不支持 createDecodedStreams)
  // 标准做法：发送端使用 sender.createEncodedStreams() -> 在 Worker 中解码 -> 处理 -> 编码 -> 写回
  // 为简化教程，演示 接收端 处理 (receiver.createDecodedStreams) 与 发送端 处理逻辑一致，此处以接收端为例。
  
  // 假设已建立连接并有 receiver
  // const receiver = pc.getReceivers().find(r => r.track.kind === 'video');
  // const { readable, writable } = receiver.createDecodedStreams();
  // readable.pipeTo(worker.writable); // 需配合 MessageChannel 传递流
}

// video-processor.js (Web Worker Module)
import { VideoDecoder, VideoEncoder } from 'webcodecs'; // 原生支持，无需引包

// 1. 接收主线程传来的 ReadableStream / WritableStream
// 通过 MessageChannel 传递流端口
self.onmessage = async (event) => {
  const { readable, writable, config } = event.data;
  
  // 配置参数：水印图片、滤镜类型、编码参数等
  const { watermarkImageBitmap, filterType = 'none', encoderConfig } = config;

  // 2. 初始化解码器
  const decoder = new VideoDecoder({
    output: handleDecodedFrame,
    error: (e) => console.error('Decoder Error:', e)
  });
  decoder.configure({
    codec: 'vp8', // 或 vp9, h264, av1 需根据 SDP 协商结果动态确定
    codedWidth: 1280,
    codedHeight: 720
  });

  // 3. 初始化编码器
  const encoder = new VideoEncoder({
    output: handleEncodedChunk,
    error: (e) => console.error('Encoder Error:', e)
  });
  encoder.configure(encoderConfig); // { codec: 'vp8', width: 1280, height: 720, bitrate: 2_500_000, framerate: 30 }

  // 4. 构建 TransformStream 管道
  // 读取 RTC 传来的 EncodedVideoChunk -> 解码 -> 处理 -> 编码 -> 写回 RTC
  const transformStream = new TransformStream({
    async transform(chunk, controller) {
      // chunk 是 EncodedVideoChunk
      decoder.decode(chunk);
      // 解码是异步的，handleDecodedFrame 会在稍后回调
      // 此处无需 await，依靠背压机制自动调节
    },
    flush() {
      decoder.flush();
      encoder.flush();
    }
  });

  // 连接管道：RTC Readable -> Transform -> RTC Writable
  await readable.pipeThrough(transformStream).pipeTo(writable);
};

// video-processor.js (续)

let canvas = new OffscreenCanvas(1280, 720);
let ctx = canvas.getContext('2d', { willReadFrequently: false, alpha: true }); // 关闭 willReadFrequently 走 GPU 路径
let watermarkBitmap = null; // 预加载的 ImageBitmap

// 预加载水印资源 (从主线程传入或 Worker 内 fetch + createImageBitmap)
function initWatermark(bitmap) {
  watermarkBitmap = bitmap;
}

// 解码回调：拿到原始 VideoFrame
async function handleDecodedFrame(frame) {
  try {
    // 1. 绘制原始帧到 OffscreenCanvas
    // 使用 drawImage(VideoFrame) 直接上传纹理，零拷贝
    ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);

    // 2. 应用滤镜
    applyFilter(ctx, canvas.width, canvas.height, filterType);

    // 3. 绘制水印 (右下角，保持比例)
    if (watermarkBitmap) {
      drawWatermark(ctx, watermarkBitmap, canvas.width, canvas.height);
    }

    // 4. 从 Canvas 创建新 VideoFrame
    // 关键：使用 { source: canvas } 构造，浏览器会尝试零拷贝共享 GPU 内存
    const newFrame = new VideoFrame(canvas, { 
      timestamp: frame.timestamp, // 必须保留原时间戳，保证音视频同步
      format: 'RGBA' // Canvas 默认 RGBA
    });

    // 5. 送入编码器
    encoder.encode(newFrame, { keyFrame: frame.type === 'key' }); // 保持关键帧属性

    // 6. 释放原帧与新帧 (极其重要，防止内存泄漏)
    frame.close();
    // newFrame 编码完成后会在 output 回调中 close，或手动 close
    // 注意：VideoFrame 构造函数如果传入 canvas，close() 仅释放引用，不销毁 canvas 像素
  } catch (err) {
    console.error('Frame process error:', err);
    frame.close();
  }
}

// 编码输出回调：写回 RTC WritableStream
function handleEncodedChunk(chunk, metadata) {
  // chunk 是 EncodedVideoChunk
  // 我们需要将其推送给 controller
  // 但 TransformStream 的 transform 是同步的，这里是异步回调
  // 解决方案：使用外部队列或将 encoder.output 设为一个 WritableStream
  
  // 更优雅的架构：encoder.output 直接连接到一个 WritableStream，该流再接入管道
  // 为简化示例，假设我们有一个全局 controller 引用 (实际应用请用 ReadableStream 配对)
  if (window.outputController) {
    window.outputController.enqueue(chunk);
  }
  // chunk 会被 RTC 内部引用，无需手动 close
}

function applyFilter(ctx, w, h, type) {
  switch(type) {
    case 'grayscale':
      ctx.filter = 'grayscale(100%)';
      ctx.drawImage(ctx.canvas, 0, 0); // 自绘应用滤镜
      ctx.filter = 'none';
      break;
    case 'sepia':
      ctx.filter = 'sepia(80%)';
      ctx.drawImage(ctx.canvas, 0, 0);
      ctx.filter = 'none';
      break;
    case 'blur':
      ctx.filter = 'blur(4px)';
      ctx.drawImage(ctx.canvas, 0, 0);
      ctx.filter = 'none';
      break;
    case 'custom_lut': // 3D LUT 查表滤镜 (需 WebGL/WebGPU 实现)
      // 此处省略 WebGL Shader 代码，建议引入 gl-matrix 或 twgl.js
      break;
  }
}

function drawWatermark(ctx, bitmap, canvasW, canvasH) {
  const margin = 20;
  const maxW = canvasW * 0.2; // 水印宽度不超过画面 20%
  const ratio = bitmap.width / bitmap.height;
  let drawW = maxW;
  let drawH = maxW / ratio;

  if (drawH > canvasH * 0.15) { // 高度限制
    drawH = canvasH * 0.15;
    drawW = drawH * ratio;
  }

  const x = canvasW - drawW - margin;
  const y = canvasH - drawH - margin;

  // 半透明度保护 (可选)
  ctx.globalAlpha = 0.85;
  ctx.drawImage(bitmap, x, y, drawW, drawH);
  ctx.globalAlpha = 1.0;
  
  // 防篡改隐形水印 (可选)：在像素最低有效位 (LSB) 写入用户 ID
  // 需使用 getImageData/putImageData 或 WebGL 读回像素，性能开销大，建议仅在关键帧执行
}

// 在 transform 中增加背压检查
transform(chunk, controller) {
  if (encoder.encodeQueueSize > 8) {
    // 丢帧策略：仅保留关键帧
    if (chunk.type !== 'key') {
      chunk.close(); // 释放资源
      return; 
    }
  }
  decoder.decode(chunk);
}

graph LR
    Network[网络层] --> Decoder[浏览器内部解码器]
    Decoder --> DecodedStream[receiver.createDecodedStreams readable]
    DecodedStream --> Worker[Video Processor Worker]
    Worker --> ProcessedStream[TransformStream]
    ProcessedStream --> Writable[receiver.createDecodedStreams writable]
    Writable --> Renderer[Video Element / Canvas]

// receiver-processor.js (Web Worker)
class ReceiverProcessor {
  constructor(config) {
    this.userId = config.userId; // 当前登录用户 ID
    this.watermarkTemplate = config.template; // 水印模板配置
    this.canvas = new OffscreenCanvas(1920, 1080); // 最大分辨率预分配
    this.ctx = this.canvas.getContext('2d', { alpha: true, willReadFrequently: false });
    this.frameCount = 0;
  }

  // 核心 Transform 回调
  async transform(frame, controller) {
    try {
      // 1. 动态调整 Canvas 尺寸 (适应分辨率变更)
      if (frame.codedWidth !== this.canvas.width || frame.codedHeight !== this.canvas.height) {
        this.canvas.width = frame.codedWidth;
        this.canvas.height = frame.codedHeight;
      }

      // 2. 绘制原始帧 (零拷贝上传纹理)
      this.ctx.drawImage(frame, 0, 0);

      // 3. 绘制动态溯源水印 (每帧唯一，防截屏溯源)
      this.drawDynamicWatermark(frame.timestamp);

      // 4. 合规遮挡层 (如: 直播间右上角礼物栏区域打码)
      this.applyComplianceMask();

      // 5. 构造新帧写回管道
      // 注意: receiver 端 writable 接受 VideoFrame, 必须保留 timestamp
      const newFrame = new VideoFrame(this.canvas, { 
        timestamp: frame.timestamp,
        format: 'RGBA' 
      });
      
      controller.enqueue(newFrame);
      
    } catch (err) {
      console.error('Receiver process error:', err);
      // 降级: 直接透传原帧, 保证流不中断
      controller.enqueue(frame);
      return;
    } finally {
      frame.close(); // 必须释放输入帧
    }
  }

  drawDynamicWatermark(timestamp) {
    // 算法: 基于用户ID + 时间戳 生成唯一噪点/二维码/不可见水印
    // 此处演示可见文本水印 + 不可见数字水印 (LSB)
    const text = `UID:${this.userId} | ${new Date(timestamp / 1000).toLocaleTimeString()}`;
    
    // 可见层
    this.ctx.save();
    this.ctx.font = '18px PingFang SC, sans-serif';
    this.ctx.fillStyle = 'rgba(255,255,255,0.3)';
    this.ctx.textAlign = 'right';
    this.ctx.fillText(text, this.canvas.width - 20, this.canvas.height - 20);
    this.ctx.restore();

    // 不可见层 (LSB 隐写术 - 仅演示红色通道最低位)
    // 生产环境建议使用 WebGL Shader 在 GPU 端完成, 避免 readPixels 同步阻塞
    if (this.frameCount % 30 === 0) { // 仅关键帧或低频嵌入, 降低性能损耗
      this.embedInvisibleWatermark(this.userId);
    }
    this.frameCount++;
  }

  embedInvisibleWatermark(userId) {
    // 简易示例: 实际应使用扩频/调制技术对抗压缩/截屏
    const imageData = this.ctx.getImageData(0, 0, 256, 256); // 仅取左上角小区域
    const data = imageData.data;
    const bits = userId.toString(2).padStart(32, '0');
    for (let i = 0; i < bits.length; i++) {
      const pixelIndex = i * 4; // R channel
      data[pixelIndex] = (data[pixelIndex] & 0xFE) | parseInt(bits[i]);
    }
    this.ctx.putImageData(imageData, 0, 0);
  }

  applyComplianceMask() {
    // 示例: 遮挡右上角 200x100 区域 (礼物榜/敏感信息)
    this.ctx.save();
    this.ctx.fillStyle = 'rgba(0,0,0,0.8)';
    this.ctx.fillRect(this.canvas.width - 220, 20, 200, 100);
    this.ctx.restore();
  }
}

// 注册 TransformStream
const processor = new ReceiverProcessor(config);
new TransformStream({
  transform: (frame, controller) => processor.transform(frame, controller)
});

// gpu-filter.js (Worker Module)
class GPUFilterPipeline {
  constructor(canvasWidth, canvasHeight) {
    this.width = canvasWidth;
    this.height = canvasHeight;
    this.device = null;
    this.pipeline = null;
    this.bindGroup = null;
    this.inputTexture = null;
    this.outputTexture = null;
    this.uniformBuffer = null;
  }

  async init() {
    if (!navigator.gpu) throw new Error('WebGPU not supported');
    const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
    this.device = await adapter.requestDevice();
    
    // 1. 创建纹理 (R8G8B8A8Unorm 兼容 VideoFrame RGBA)
    this.inputTexture = this.device.createTexture({
      size: [this.width, this.height],
      format: 'rgba8unorm',
      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
    });
    this.outputTexture = this.device.createTexture({
      size: [this.width, this.height],
      format: 'rgba8unorm',
      usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_SRC
    });

    // 2. 编译 WGSL 着色器 (示例: 伪彩色/热力图/自定义 LUT)
    const shaderModule = this.device.createShaderModule({
      code: `
        @group(0) @binding(0) var inputTex: texture_2d<f32>;
        @group(0) @binding(1) var outputTex: texture_storage_2d<rgba8unorm, write>;
        @group(0) @binding(2) var<uniform> params: vec4<f32>; // intensity, time, etc.

        @compute @workgroup_size(16, 16)
        fn main(@builtin(global_invocation_id) pos: vec3<u32>) {
          if (pos.x >= textureDimensions(inputTex).x || pos.y >= textureDimensions(inputTex).y) { return; }
          
          let color = textureLoad(inputTex, vec2<i32>(pos.xy), 0);
          
          // 示例: 伪彩色映射 (热力图)
          let gray = dot(color.rgb, vec3<f32>(0.299, 0.587, 0.114));
          let heat = vec3<f32>(
            smoothstep(0.0, 0.5, gray) * smoothstep(1.0, 0.5, gray), // R
            smoothstep(0.25, 0.75, gray),                             // G
            smoothstep(0.5, 1.0, gray)                                // B
          );
          
          textureStore(outputTex, vec2<i32>(pos.xy), vec4<f32>(heat, color.a));
        }
      `
    });

    // 3. 创建 Pipeline & BindGroup
    this.pipeline = this.device.createComputePipeline({
      layout: 'auto',
      compute: { module: shaderModule, entryPoint: 'main' }
    });

    this.uniformBuffer = this.device.createBuffer({
      size: 16, // vec4<f32>
      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
    });

    this.bindGroup = this.device.createBindGroup({
      layout: this.pipeline.getBindGroupLayout(0),
      entries: [
        { binding: 0, resource: this.inputTexture.createView() },
        { binding: 1, resource: this.outputTexture.createView() },
        { binding: 2, resource: { buffer: this.uniformBuffer } }
      ]
    });
  }

  // 核心处理函数: 接收 VideoFrame, 返回 Promise<VideoFrame>
  async process(frame) {
    // 1. 上传 VideoFrame 到 GPU 纹理 (零拷贝: copyExternalImageToTexture)
    // 需要 Chrome 104+ / Firefox 115+ 支持 copyExternalImageToTexture
    this.device.queue.copyExternalImageToTexture(
      { source: frame }, // VideoFrame 或 ImageBitmap
      { texture: this.inputTexture },
      [this.width, this.height]
    );

    // 2. 更新 Uniform 参数 (如滤镜强度、时间)
    this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([1.0, performance.now() / 1000, 0, 0]));

    // 3. 编码 Compute Pass
    const commandEncoder = this.device.createCommandEncoder();
    const passEncoder = commandEncoder.beginComputePass();
    passEncoder.setPipeline(this.pipeline);
    passEncoder.setBindGroup(0, this.bindGroup);
    const workgroupCountX = Math.ceil(this.width / 16);
    const workgroupCountY = Math.ceil(this.height / 16);
    passEncoder.dispatchWorkgroups(workgroupCountX, workgroupCountY);
    passEncoder.end();
    
    // 4. 提交命令
    this.device.queue.submit([commandEncoder.finish()]);

    // 5. 从输出纹理创建新 VideoFrame
    // 关键: 使用 VideoFrame 构造函数的 { source: GPUTexture } (实验性) 
    // 或 readback 到 OffscreenCanvas 再创建 (兼容性更好)
    // 此处演示 readback 方案 (异步, 不阻塞主线程)
    const readbackBuffer = this.device.createBuffer({
      size: this.width * this.height * 4,
      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
    });
    commandEncoder.copyTextureToBuffer(
      { texture: this.outputTexture },
      { buffer: readbackBuffer, bytesPerRow: this.width * 4 },
      [this.width, this.height]
    );
    this.device.queue.submit([commandEncoder.finish()]);

    await readbackBuffer.mapAsync(GPUMapMode.READ);
    const arrayBuffer = readbackBuffer.getMappedRange();
    const pixels = new Uint8ClampedArray(arrayBuffer);
    readbackBuffer.unmap();

    // 6. 构造新 VideoFrame (使用 OffscreenCanvas 中转或直接 new VideoFrame(pixels...))
    const newFrame = new VideoFrame(new ImageData(pixels, this.width, this.height), {
      timestamp: frame.timestamp,
      format: 'RGBA'
    });
    
    return newFrame;
  }
}

// tests/visual-regression.spec.ts
import { test, expect } from '@playwright/test';
import { pixelmatch } from 'pixelmatch';
import { PNG } from 'pngjs';

test('Watermark position and style regression', async ({ page }) => {
  // 1. 启动测试页面 (包含模拟 MediaStream 的测试源)
  await page.goto('http://localhost:3000/test-harness.html');
  
  // 2. 注入 Insertable Streams 处理器
  await page.evaluate(() => window.startTestPipeline('watermark'));

  // 3. 等待视频流稳定 (关键帧间隔通常 2s)
  await page.waitForTimeout(3000);

  // 4. 截取 Video 元素当前帧
  const screenshot = await page.locator('video').screenshot();
  
  // 5. 对比基准图
  const baseline = PNG.sync.read(require('fs').readFileSync('./baselines/watermark_720p.png'));
  const current = PNG.sync.read(screenshot);
  const diff = new PNG({ width: baseline.width, height: baseline.height });
  
  const diffPixels = pixelmatch(baseline.data, current.data, diff.data, baseline.width, baseline.height, {
    threshold: 0.05, // 允许 5% 像素差异 (抗锯齿/编码噪声)
    includeAA: true
  });
  
  expect(diffPixels / (baseline.width * baseline.height)).toBeLessThan(0.01); // 差异率 < 1%
  
  // 失败时输出 Diff 图供人工复核
  if (diffPixels > 0) {
    require('fs').writeFileSync('./artifacts/diff_watermark.png', PNG.sync.write(diff));
  }
});

# .github/workflows/chaos-test.yml
jobs:
  chaos-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup tc (Traffic Control)
        run: |
          sudo tc qdisc add dev eth0 root netem loss 5% delay 200ms 50ms duplicate 1% corrupt 0.1%
      - name: Run Headless Chrome Stress Test
        run: |
          xvfb-run -a node scripts/stress-test.mjs --duration 60s --concurrency 5
      - name: Teardown tc
        if: always()
        run: sudo tc qdisc del dev eth0 root

// feature-flags.ts
interface VideoProcessingFlags {
  insertableStreamsEnabled: boolean;      // 总开关
  gpuAccelerationEnabled: boolean;        // WebGPU 开关
  receiverWatermarkEnabled: boolean;      // 接收端水印
  maxResolution: '720p' | '1080p' | '4K'; // 分辨率上限
  fallbackToCanvas2D: boolean;            // 降级兜底
}

// 运行时决策逻辑
async function createProcessor(flags: VideoProcessingFlags, deviceInfo: DeviceInfo) {
  // 1. 硬件能力探测
  const hasWebGPU = !!navigator.gpu;
  const isLowEndDevice = deviceInfo.cpuCores < 4 || deviceInfo.memory < 4; // GB
  
  // 2. 策略决策树
  if (!flags.insertableStreamsEnabled) return new Canvas2DFallbackProcessor();
  
  if (flags.gpuAccelerationEnabled && hasWebGPU && !isLowEndDevice) {
    try {
      return await GPUFilterPipeline.create(); // 尝试初始化
    } catch (e) {
      console.warn('WebGPU init failed, fallback to Canvas2D', e);
    }
  }
  
  // 3. 兜底: 高性能 Canvas2D (OffscreenCanvas + Worker)
  return new Canvas2DWorkerProcessor();
}

// error-handler.ts
enum ErrorSeverity { FATAL, RECOVERABLE, DEGRADED }

class RTCErrorHandler {
  handle(error: Error, context: ProcessingContext) {
    const severity = this.classify(error);
    
    switch(severity) {
      case ErrorSeverity.FATAL: // 如: Encoder configure failed, WebGPU device lost
        this.reportToSentry(error, { level: 'fatal', ...context });
        this.triggerFullReconnect(); // 重建 PeerConnection
        break;
        
      case ErrorSeverity.RECOVERABLE: // 如: Single frame encode timeout, OOM (单帧)
        this.reportToSentry(error, { level: 'warning' });
        this.dropCurrentFrame(); // 丢弃当前帧，请求下一帧关键帧
        context.sender.sendKeyFrame?.();
        break;
        
      case ErrorSeverity.DEGRADED: // 如: High CPU, Thermal throttling
        this.downgradeQuality(context); // 降低分辨率/帧率/关闭复杂滤镜
        break;
    }
  }

  private downgradeQuality(ctx: ProcessingContext) {
    // 1. 关闭 WebGPU 滤镜 -> 切 Canvas2D
    // 2. 通知 Sender 降低编码分辨率 (RTCRtpSender.setParameters)
    // 3. 上报降级事件，供运营分析低端机占比
  }
}

// 合成逻辑伪代码 (在 Worker 内)
async function compositeFrames(cameraFrame, screenFrame, backgroundFrame) {
  // 1. 绘制背景
  ctx.drawImage(backgroundFrame, 0, 0, w, h);
  
  // 2. 绘制屏幕共享 (主画面)
  ctx.drawImage(screenFrame, 0, 0, w, h);
  
  // 3. 绘制摄像头 (画中画, 右下角)
  const pipW = w * 0.25;
  const pipH = h * 0.25;
  ctx.drawImage(cameraFrame, w - pipW - 10, h - pipH - 10, pipW, pipH);
  
  // 4. 输出合成帧
  return new VideoFrame(canvas, { timestamp: cameraFrame.timestamp });
}