flowchart LR
    A[录制完成事件] --> B{文件 > 2 GB?}
    B -- 是 --> C[分片并行提取 I 帧时间戳 + 字节偏移]
    B -- 否 --> D[单进程 ffprobe 全量扫描]
    C --> E[合并生成 JSON/MessagePack 索引]
    D --> E
    E --> F[写入对象存储 + 元数据表]
    F --> G[CDN 预热 / 前端通知]

{
  "version": 2,
  "duration": 14400.0,
  "timescale": 90000,
  "keyframes": [
    { "t": 0.0, "o": 0 },
    { "t": 1.02, "o": 102400 },
    { "t": 2.04, "o": 205312 }
  ]
}

# Nginx 关键配置片段
location /recordings/ {
    alias /mnt/storage/recordings/;
    add_header Accept-Ranges bytes;
    add_header Cache-Control "public, max-age=31536000, immutable";
    # 关键：允许跨域 Range 请求
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Expose-Headers "Content-Range, Accept-Ranges, Content-Length";
}

const decoder = new VideoDecoder({
  output: frame => {
    // 仅渲染目标帧，其余丢弃
    if (frame.timestamp === targetPts) {
      drawFrame(frame); // canvas / VideoFrame -> bitmap
    }
    frame.close();
  },
  error: e => console.error(e)
});

decoder.configure({
  codec: 'avc1.640028', // H.264 High@L4.0
  codedWidth: 1920,
  codedHeight: 1080
});

// 精准拉取目标关键帧所在段
const { offset, size } = await fetchIndexRange(targetTime);
const chunk = await fetchVideoRange(offset, size);
decoder.decode(new EncodedVideoChunk({
  type: 'key',
  timestamp: targetPts,
  duration: 40000, // 1/25s * 1e6
  data: chunk
}));

// 伪代码：二分查找最近关键帧
function locateKeyframe(index: KeyframeIndex[], targetSec: number): Keyframe {
  let lo = 0, hi = index.length - 1;
  while (lo <= hi) {
    const mid = (lo + hi) >> 1;
    if (index[mid].t < targetSec) lo = mid + 1;
    else hi = mid - 1;
  }
  // hi 为 ≤ target 的最大关键帧
  return index[Math.max(0, hi)];
}

<!-- 服务端渲染注入 L0，零请求首屏定位 -->
<script id="idx-l0" type="application/index+l0">
{"v":2,"seg":["0-600","600-1200","1200-1800"],"kf":[[0,0],[30,1024000],[60,2053120]]}
</script>

// 前端路由：拖拽 → 秒级定位段 → 毫秒级定位帧
async function seek(ts) {
  const l0 = JSON.parse(document.getElementById('idx-l0').textContent);
  const segIdx = l0.seg.findIndex(([s, e]) => ts >= s && ts < e);
  if (segIdx === -1) return fallbackNativeSeek(ts);

  // L1 按需加载
  const l1 = await loadIndex(`idx-l1-${segIdx}.msgpack`);
  const keyframe = binarySearch(l1.keyframes, ts);
  return decodeTargetFrame(keyframe.offset, keyframe.pts);
}

{
  "version": 3,
  "tracks": {
    "video-screen": { "timescale": 90000, "keyframes": [...] },
    "video-camera": { "timescale": 90000, "keyframes": [...] },
    "audio-main":   { "timescale": 48000, "keyframes": [...] }  // 每帧 1024 样本
  },
  "syncMap": [   // 视频帧 → 音频帧映射，体积极小
    { "v": 0, "a": 0 },
    { "v": 1, "a": 47 },
    { "v": 2, "a": 94 }
  ]
}

// 双解码器同步启动，音频帧驱动时钟
const audioDecoder = new AudioDecoder({ output: pushAudioFrame });
const videoDecoder = new VideoDecoder({ output: pushVideoFrame });

// 拖拽求帧：先定位音频帧，再通过 syncMap 反查视频关键帧
const audioFrame = locateAudioFrame(targetTs);
const videoFrame = syncMap.find(m => m.a === audioFrame.idx).v;
await Promise.all([
  feedDecoder(audioDecoder, audioChunk),
  feedDecoder(videoDecoder, videoChunk)
]);

flowchart LR
    A[推流端 SRT/RTMP] --> B[MediaMTX / SRS 集群]
    B --> C[切片写入对象存储<br/>同时推送到 Kafka: media_segment]
    C --> D[边缘函数<br/>Cloudflare Workers / Aliyun FC]
    D --> E[ffprobe 仅解析新片段头部<br/>提取 I 帧 PTS + Offset]
    E --> F[Redis Sorted Set<br/>ZADD key pts offset]
    F --> G[合并生成 L0/L1 索引<br/>推送至 CDN 预热]

const gpuDevice = await navigator.gpu.requestDevice();
const canvasCtx = canvas.getContext('webgpu');
canvasCtx.configure({ device: gpuDevice, format: 'bgra8unorm' });

const decoder = new VideoDecoder({
  output: async (frame) => {
    // 零拷贝：直接导入 GPUTexture
    const gpuTex = gpuDevice.importExternalTexture({
      source: frame,
      colorSpace: 'srgb'
    });
    // 绘制命令
    const encoder = gpuDevice.createCommandEncoder();
    const pass = encoder.beginRenderPass({
      colorAttachments: [{ view: canvasCtx.getCurrentTexture().createView(), loadOp: 'clear', storeOp: 'store' }]
    });
    pass.setPipeline(renderPipeline);
    pass.setBindGroup(0, bindGroupLayout.createBindGroup({ entries: [{ binding: 0, resource: gpuTex }] }));
    pass.draw(3);
    pass.end();
    gpuDevice.queue.submit([encoder.finish()]);
    frame.close(); // 及时释放
  },
  error: console.error
});

// 统一上报工具
function reportSLI(name: string, value: number, tags: Record<string,string>={}) {
  const payload = { name, value, tags: { env: 'prod', ...tags }, ts: Date.now() };
  navigator.sendBeacon('/api/telemetry', JSON.stringify(payload));
}

// 拖拽结束埋点
seekBar.addEventListener('pointerup', () => {
  const latency = performance.now() - dragStartTs;
  reportSLI('preview_first_frame_latency_ms', latency, { codec: decoderType });
});

- name: 回放预览性能基准
  run: |
    npx playwright test preview-perf.spec.ts 
      --grep "@p99" 
      --reporter=line 
      --output=perf-report.json
- name: 校验 SLO
  run: |
    node scripts/check-slo.mjs perf-report.json 
      --p99-latency=300 
      --fallback-rate=0.001

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "会议录制秒级预览：从“能用”到“好用”的进阶工程实践",
  "author": { "@type": "Organization", "name": "[公司名] 音视频基础设施团队" },
  "datePublished": "2025-07-10",
  "dateModified": "2025-07-10",
  "description": "深度剖析层级索引、多轨同步、边缘实时索引、WebGPU零拷贝渲染、全链路SLO体系，助力会议回放体验迈入毫秒级。",
  "keywords": ["会议录制预览", "层级索引", "WebGPU视频渲染", "边缘计算索引", "音视频同步", "SLO体系"],
  "articleSection": "音视频技术",
  "wordCount": 1620
}

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "层级索引相比单层索引有何优势？", "acceptedAnswer": { "@type": "Answer", "text": "L0内联实现零请求首屏定位，L1按需加载降低弱网首包，L2精细索引支持放大预览，综合将拖拽主线程耗时从10ms降至1ms以内。" }},
    { "@type": "Question", "name": "直播转点播如何做到秒级可预览？", "acceptedAnswer": { "@type": "Answer", "text": "边缘函数消费Kafka切片流，仅解析fMP4头部增量写入Redis ZSET，合并生成L0/L1索引推送CDN，直播结束3-5秒即可拖拽。" }},
    { "@type": "Question", "name": "WebGPU零拷贝渲染需要什么前提？", "acceptedAnswer": { "@type": "Answer", "text": "Chrome 121+/Edge 121+，VideoDecoder输出VideoFrame直接importExternalTexture，需HTTPS部署并配置COOP/COEP响应头。" }}
  ]
}