# Dockerfile 示例
FROM emscripten/emsdk:3.1.50
WORKDIR /src
# 安装 OpenCV 依赖 (若需)
RUN apt-get update && apt-get install -y libopencv-dev

emcc src/effects.cpp -o dist/effects.js 
  -O3                           # 最高优化等级
  -msimd128                     # 启用 WASM SIMD (关键：向量化像素运算)
  -mbulk-memory                 # 启用 bulk memory operations (加速内存拷贝/初始化)
  -pthread                      # 启用 pthread 支持 (配合 Web Workers 多线程)
  -s MODULARIZE=1               # 输出 ES Module 格式
  -s EXPORT_ES6=1 
  -s ENVIRONMENT=worker         # 目标运行环境为 Worker
  -s EXPORTED_FUNCTIONS="['_process_frame', '_malloc', '_free', '_init_context']" 
  -s EXPORTED_RUNTIME_METHODS="['HEAPU8', 'HEAPF32']" 
  -s ALLOW_MEMORY_GROWTH=1      # 允许内存动态增长
  -s MAXIMUM_MEMORY=512MB       # 设置内存上限
  -s ERROR_ON_UNDEFINED_SYMBOLS=0 
  --bind                         # 启用 embind (简化 C++/JS 交互)

// effects.h
#pragma once
#include <emscripten/bind.h>
#include <vector>

class EffectContext {
public:
    // 初始化：分配输入/输出/临时缓冲区
    bool init(int width, int height);
    
    // 核心处理入口：输入输出均为线性内存偏移量
    // fmt: 0=RGBA, 1=NV12, 2=I420
    int process_frame(uint8_t* input_ptr, uint8_t* output_ptr, int fmt, float intensity);
    
    // 释放资源
    void destroy();

private:
    int width_ = 0, height_ = 0;
    std::vector<uint8_t> temp_buffer_; // 临时缓冲区复用，避免频繁 new/delete
    // 滤镜参数、查找表(LUT)等预计算数据
    std::vector<float> lut_3d_; 
};

// embind 绑定，暴露给 JS 为 Class
EMSCRIPTEN_BINDINGS(effects_module) {
    emscripten::class_<EffectContext>("EffectContext")
        .constructor<>()
        .function("init", &EffectContext::init)
        .function("processFrame", &EffectContext::process_frame)
        .function("destroy", &EffectContext::destroy);
}

// effects.cpp 片段
#include <wasm_simd128.h>

int EffectContext::process_frame(uint8_t* input, uint8_t* output, int fmt, float intensity) {
    if (fmt != 0) return -1; // 仅演示 RGBA
    
    const int pixel_count = width_ * height_;
    const int vec_count = pixel_count / 4; // 每次处理 4 像素
    
    // 预加载曲线查找表指针 (假设 lut_3d_ 大小为 256*3 或 256*4)
    float* lut = lut_3d_.data();

    for (int i = 0; i < vec_count; ++i) {
        // 1. 加载 16 字节 (4 pixels RGBA) 到 v128
        v128_t src = wasm_v128_load(input + i * 16);
        
        // 2. 解包为 4 个 32位整数 (R, G, B, A 交织)
        // 注意：SIMD 操作通常按通道分离效率更高，此处为演示简化逻辑
        // 实际工程建议：将 RGBA 转为 Planar (RRRR, GGGG, BBBB, AAAA) 布局处理
        
        // 伪代码：查表映射 (实际需用 wasm_i32x4_shuffle 或标量回退)
        // 此处演示标量等效逻辑，生产环境需写纯 SIMD 内联汇编或使用库
        uint8_t* p_in = input + i * 16;
        uint8_t* p_out = output + i * 16;
        for(int k=0; k<4; ++k) {
            int r = p_in[k*4+0];
            int g = p_in[k*4+1];
            int b = p_in[k*4+2];
            // 简单 Gamma + 对比度 模拟
            p_out[k*4+0] = std::min(255, int(pow(r/255.0, 0.9) * 255 * 1.1));
            p_out[k*4+1] = std::min(255, int(pow(g/255.0, 0.9) * 255 * 1.1));
            p_out[k*4+2] = std::min(255, int(pow(b/255.0, 1.1) * 255 * 0.95)); // 蓝色压暗
            p_out[k*4+3] = p_in[k*4+3];
        }
    }
    return 0;
}

graph LR
    A[主线程 UI] -->|控制指令/参数| B(Worker: Wasm Engine)
    C[摄像头/视频源] -->|VideoFrame| B
    B -->|处理后 VideoFrame| D[OffscreenCanvas / WebGL]
    D -->|Bitmap| A

// worker.js (Wasm Worker)
import EffectModule from './effects.js'; // Emscripten 输出的 ES Module

let effectContext = null;
let canvas = null;
let gl = null; // 或 WebGPU context
let animationFrameId = null;

// 1. 初始化 Wasm 模块
async function initWasm(width, height) {
    const module = await EffectModule();
    effectContext = new module.EffectContext();
    if (!effectContext.init(width, height)) {
        throw new Error('Wasm Context Init Failed');
    }
    console.log('[Worker] Wasm Module Ready');
}

// 2. 处理单帧核心逻辑
async function processVideoFrame(videoFrame) {
    const { width, height, format } = videoFrame; // format 通常为 'RGBA' 或 'I420'
    
    // 关键：获取像素数据视图 (零拷贝)
    // 注意：VideoFrame.copyTo() 会拷贝，需配合 readPixels 或直接访问 buffer (受限于浏览器实现)
    // 当前主流方案：VideoFrame -> drawImage(OffscreenCanvas) -> readPixels -> Wasm -> texSubImage2D
    // 期望方案 (Chrome 100+): VideoFrame 的 underlying buffer 直接映射 Wasm Memory (需 WebCodecs + Wasm Memory64/SharedArrayBuffer 支持)
    
    // 当前通用落地方案 (Canvas 中转):
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(videoFrame, 0, 0, width, height);
    const imageData = ctx.getImageData(0, 0, width, height); // 此处发生一次 CPU 拷贝
    
    // 3. 调用 Wasm 处理
    // 将 imageData.data 指针传入 Wasm (需确保 Wasm Memory 未增长导致指针失效)
    const ptrIn = module._malloc(imageData.data.length);
    const ptrOut = module._malloc(imageData.data.length);
    module.HEAPU8.set(imageData.data, ptrIn);
    
    effectContext.processFrame(ptrIn, ptrOut, 0, 1.0); // 0=RGBA
    
    // 4. 结果写回 ImageData
    const resultData = new Uint8ClampedArray(module.HEAPU8.buffer, ptrOut, imageData.data.length);
    imageData.data.set(resultData);
    
    // 5. 渲染到 OffscreenCanvas (WebGL 纹理上传更高效)
    ctx.putImageData(imageData, 0, 0);
    
    // 6. 内存清理
    module._free(ptrIn);
    module._free(ptrOut);
    videoFrame.close(); // 释放 VideoFrame 引用
}

// 3. 主循环 (配合 requestVideoFrameCallback 或 setTimeout)
function startLoop(track) {
    const processFrame = async (now, frame) => {
        if (!frame) return;
        await processVideoFrame(frame);
        // 请求下一帧
        track.requestVideoFrameCallback(processFrame);
    };
    track.requestVideoFrameCallback(processFrame);
}

// 4. 消息通信
self.onmessage = async (e) => {
    if (e.data.type === 'INIT') {
        canvas = e.data.canvas; // OffscreenCanvas transferred from main
        await initWasm(e.data.width, e.data.height);
    } else if (e.data.type === 'START') {
        const stream = new MediaStream([e.data.track]); // MediaStreamTrack transferred
        const track = stream.getVideoTracks()[0];
        startLoop(track);
    } else if (e.data.type === 'UPDATE_PARAMS') {
        // 更新 Wasm 内部参数 (如滤镜强度)
    }
};

// main.js (React/Vue/Svelte 组件中使用)
const videoRef = useRef(null);
const canvasRef = useRef(null);
const workerRef = useRef(null);

useEffect(() => {
    const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });
    workerRef.current = worker;

    // 传递 OffscreenCanvas 给 Worker
    const offscreen = canvasRef.current.transferControlToOffscreen();
    worker.postMessage({ 
        type: 'INIT', 
        canvas: offscreen, 
        width: 1280, 
        height: 720 
    }, [offscreen]);

    // 获取摄像头
    navigator.mediaDevices.getUserMedia({ video: { width: 1280, height: 720 } })
        .then(stream => {
            const track = stream.getVideoTracks()[0];
            // 将 Track 传递给 Worker (需浏览器支持 Transferable Track, 否则在主线程读帧再 postMessage)
            // 当前兼容性较好方案：主线程 requestVideoFrameCallback -> postMessage(frame) -> Worker
            // 但 postMessage VideoFrame 会序列化/拷贝，性能受损。
            // 进阶方案：使用 Insertable Streams (Breakout Box) 或 WebCodecs Encoder/Decoder 在 Worker 侧拉流。
            
            // 简易演示：主线程读帧发送
            const processFrame = (now, frame) => {
                worker.postMessage({ type: 'FRAME', frame }, [frame]); // 尝试转移所有权
                track.requestVideoFrameCallback(processFrame);
            };
            track.requestVideoFrameCallback(processFrame);
            
            worker.postMessage({ type: 'START', track }); // 视浏览器支持情况传递 track
        });
}, []);

// Worker 内部
const gpuDevice = await navigator.gpu.requestDevice();
// ... 创建 Pipeline, BindGroupLayout

async function renderFrame(videoFrame) {
    // 1. VideoFrame 直接导入为 GPUExternalTexture (零拷贝，YUV->RGB 由浏览器/驱动完成)
    const externalTexture = gpuDevice.importExternalTexture({ source: videoFrame });
    
    // 2. 绑定到 BindGroup
    const bindGroup = gpuDevice.createBindGroup({
        layout: pipeline.getBindGroupLayout(0),
        entries: [{ binding: 0, resource: externalTexture }]
    });
    
    // 3. 编码渲染/计算 Pass
    const encoder = gpuDevice.createCommandEncoder();
    const pass = encoder.beginRenderPass({ /* ... */ });
    pass.setPipeline(pipeline);
    pass.setBindGroup(0, bindGroup);
    pass.draw(3); // 全屏三角形
    pass.end();
    gpuDevice.queue.submit([encoder.finish()]);
    
    videoFrame.close(); // 及时释放
}

// C++ 侧：生成一个 512x512 的 Float32 参数纹理 (如: 变形网格 UV 偏移)
extern "C" void generate_warp_map(float* out_map, int w, int h, float time) {
    for(int y=0; y<h; ++y) for(int x=0; x<w; ++x) {
        // 复杂数学函数计算偏移...
        out_map[(y*w+x)*2] = offset_x; 
        out_map[(y*w+x)*2+1] = offset_y;
    }
}

// JS/Wasm 侧：上传到 GPU
const warpMapBuffer = module._malloc(512 * 512 * 2 * 4); // Float32 x 2
// ... Wasm 写入 warpMapBuffer ...
const gpuBuffer = gpuDevice.createBuffer({
    size: 512 * 512 * 2 * 4,
    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
    mappedAtCreation: true
});
new Float32Array(gpuBuffer.getMappedRange()).set(new Float32Array(module.HEAPF32.buffer, warpMapBuffer, 512*512*2));
gpuBuffer.unmap();
// Compute Shader 中以 storage buffer 形式读取 warpMapBuffer

// 1. Wasm 计算完成后，插入 CPU 侧 Fence (概念上)
// 实际通过 JS 同步执行顺序保证：await wasmPromise -> gpuQueue.writeBuffer -> submit

// 2. 跨队列/进程同步 (高级)：WebGPU Fence (Chrome 121+ 实验性)
const fence = gpuDevice.createFence({ exported: true });
// 导出 handle 传给视频编码器/显示合成器...
// encoder.insertFenceWait(fence, value);

// WGSL Fragment Shader - 硬件加速 3D LUT
@group(0) @binding(0) var lut_3d: texture_3d<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
    let color = textureSample(base_tex, samp, uv).rgb;
    // 归一化坐标 [0,1] 直接采样 3D Texture，GPU 硬件自动三线性插值
    return textureSample(lut_3d, samp, color); 
}

// Worker 内部初始化编码器
const encoder = new VideoEncoder({
    output: (chunk, metadata) => {
        // 1. 封装 MP4 (MP4Box.js / mp4-muxer) -> 本地下载
        // 2. 封装 FLV/TS -> WebSocket 推流服务器 (SRS / MediaMTX)
        // 3. WebRTC Insertable Streams -> RTCPeerConnection (超低延迟互动)
        muxer.addChunk(chunk, metadata);
    },
    error: (e) => console.error(e)
});

encoder.configure({
    codec: 'avc1.42001f', // H.264 Baseline/Main/High Profile
    width: 1280,
    height: 720,
    bitrate: 5_000_000, // 5 Mbps
    framerate: 30,
    hardwareAcceleration: 'prefer-hardware', // 关键：启用硬编
    // latencyMode: 'realtime' // 低延迟模式
});

// 渲染循环末尾塞入编码器
// 注意：encoder.encode() 需要 VideoFrame，且会消费该帧
// 策略：渲染到 OffscreenCanvas -> transferToImageBitmap() -> new VideoFrame(bitmap) -> encoder.encode(frame)
const bitmap = await canvas.transferToImageBitmap();
const frame = new VideoFrame(bitmap, { timestamp: performance.now() * 1000 });
encoder.encode(frame); // frame 会被 close，bitmap 所有权转移

// 同步控制器 (主线程或专用 Sync Worker)
class AVSyncController {
    constructor() {
        this.audioCtx = new AudioContext({ latencyHint: 'interactive' });
        this.masterClock = 0; // 基于 AudioContext.currentTime
        this.videoQueue = []; // 存放 { frame, timestamp }
        this.maxQueueSize = 5; // 缓冲 5 帧 ~ 166ms
    }

    // 音频回调驱动主时钟 (ScriptProcessorNode / AudioWorklet)
    onAudioProcess(outputBuffer) {
        this.masterClock = this.audioCtx.currentTime;
        this.drainVideoQueue();
    }

    pushVideoFrame(frame) {
        this.videoQueue.push(frame);
        if (this.videoQueue.length > this.maxQueueSize) {
            // 丢帧策略：丢弃最旧的非关键帧，或直接丢最旧
            this.videoQueue.shift().close(); 
        }
    }

    drainVideoQueue() {
        while (this.videoQueue.length > 0) {
            const frame = this.videoQueue[0];
            const delay = frame.timestamp / 1e6 - this.masterClock; // 单位秒
            
            if (delay < -0.05) { // 晚了 50ms 以上，丢帧追赶
                this.videoQueue.shift().close();
            } else if (delay > 0.02) { // 太早，等待
                break;
            } else {
                // 正常渲染窗口
                this.renderFrame(this.videoQueue.shift());
            }
        }
    }
}

// 主线程
const processedStream = canvas.captureStream(30); // 30fps
const pc = new RTCPeerConnection();
// ... 信令交换 ...
processedStream.getVideoTracks().forEach(track => pc.addTrack(track, processedStream));
// 对端即可收到带特效的视频流

EM_ASM_({ performance.mark($0); }, "wasm_process_start");
// ... 核心计算 ...
EM_ASM_({ performance.mark($0); performance.measure('wasm_process', 'wasm_process_start', $0); }, "wasm_process_end");

# .github/workflows/visual-regression.yml
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node & Emscripten
        uses: myrepo/setup-emcc@v1
      - name: Build Wasm & App
        run: npm run build:prod
      - name: Run Playwright Visual Tests
        run: |
          npx playwright install --with-deps chromium
          npx playwright test --project=chromium-headless

// tests/visual.spec.ts
import { test, expect } from '@playwright/test';

test('Beauty filter regression @1080p', async ({ page }) => {
  await page.goto('/demo.html');
  // 模拟摄像头输入 (使用视频文件或合成图案)
  await page.evaluate(() => window.mockCameraInput('assets/test_pattern.yuv'));
  await page.waitForTimeout(2000); // 稳定几帧
  
  const screenshot = await page.screenshot({ fullPage: false });
  expect(screenshot).toMatchSnapshot('beauty_1080p_baseline.png', {
    threshold: 0.001, // 0.1% 像素差异容忍度
    maxDiffPixels: 100
  });
});