WebCodecs視訊處理實戰：瀏覽器原生視訊編解碼的5個核心模式

WebCodecs視訊處理：瀏覽器原生的視訊編解碼能力

FFmpeg.wasm體積大載入慢、Canvas逐幀處理效能差、WebRTC黑盒無法自訂——瀏覽器視訊處理長期受限。WebCodecs API提供底層視訊編解碼能力，支援H.264/H.265/VP9/AV1，零拷貝存取原始幀資料，效能接近原生應用。2026年，WebCodecs已在Chrome和Edge全面支援，瀏覽器視訊編輯和即時編碼成為現實。

本文將從5種核心模式出發，帶你完成VideoDecoder→VideoEncoder→幀處理→即時轉碼→視訊錄製的全鏈路實戰。

核心概念

概念	說明
WebCodecs	瀏覽器原生視訊/音訊編解碼API
VideoDecoder	視訊解碼器，將編碼資料轉為原始幀
VideoEncoder	視訊編碼器，將原始幀轉為編碼資料
VideoFrame	視訊幀物件，包含像素資料和中繼資料
EncodedVideoChunk	編碼後的視訊資料區塊
hardwareAcceleration	硬體加速配置

問題分析：WebCodecs的5大挑戰

API底層抽象：需要手動管理幀生命週期和記憶體
編解碼器支援差異：不同瀏覽器/平台支援的codec不同
關鍵幀管理：解碼需要正確的關鍵幀序列
效能調優：硬體加速配置和幀率控制
除錯困難：編解碼錯誤資訊不夠友善

分步實操：5種WebCodecs模式

模式1：VideoDecoder視訊解碼

const decoder = new VideoDecoder({
  output: (frame: VideoFrame) => {
    processFrame(frame);
    frame.close();
  },
  error: (e: Error) => console.error(e),
});

decoder.configure({
  codec: "avc1.64001f",
  codedWidth: 1920,
  codedHeight: 1080,
  hardwareAcceleration: "prefer-hardware",
});

模式2：VideoEncoder視訊編碼

const encoder = new VideoEncoder({
  output: (chunk) => encodedChunks.push(chunk),
  error: (e) => console.error(e),
});

encoder.configure({
  codec: "avc1.64001f",
  width: 1920, height: 1080,
  bitrate: 5_000_000,
  framerate: 30,
  keyInterval: 30,
});

模式3：即時幀處理與濾鏡

private onDecodedFrame(frame: VideoFrame) {
  this.ctx.drawImage(frame, 0, 0);
  frame.close();
  const processedFrame = new VideoFrame(this.canvas, { timestamp: frame.timestamp });
  this.encoder.encode(processedFrame);
  processedFrame.close();
}

模式4：視訊格式轉碼

async function transcodeVideo(inputChunks, inputCodec, outputCodec, width, height) {
  const decoder = new VideoDecoder({
    output: (frame) => { encoder.encode(frame); frame.close(); },
    error: (e) => console.error(e),
  });
  const encoder = new VideoEncoder({
    output: (chunk) => outputChunks.push(chunk),
    error: (e) => console.error(e),
  });
  decoder.configure({ codec: inputCodec, codedWidth: width, codedHeight: height });
  encoder.configure({ codec: outputCodec, width, height, bitrate: 4_000_000, framerate: 30 });
}

模式5：MediaStream即時錄製

async function recordScreen() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { width: 1920, height: 1080, frameRate: 30 },
  });
  const processor = new MediaStreamTrackProcessor({ track: stream.getVideoTracks()[0] });
  const reader = processor.readable.getReader();
  while (true) {
    const { done, value: frame } = await reader.read();
    if (done) break;
    encoder.encode(frame);
    frame.close();
  }
}

避坑指南

坑1：未關閉VideoFrame導致記憶體洩漏

// ✅ 正確：使用後立即關閉
output: (frame) => { processFrame(frame); frame.close(); }

坑2：編解碼器不支援

const support = await VideoDecoder.isConfigSupported({ codec: "avc1.64001f" });
if (!support.supported) throw new Error("Codec not supported");

坑3：首幀不是關鍵幀

const chunk = new EncodedVideoChunk({ type: "key", timestamp: 0, data });

坑4：編碼器bitrate設定過低

encoder.configure({ bitrate: 5_000_000 }); // 5Mbps for 1080p

坑5：在主執行緒處理大量幀

const worker = new Worker("video-processor.js");
worker.postMessage({ frame }, [frame]);

報錯排查

序號	報錯資訊	原因	解決方法
1	`NotSupportedError`	編解碼器不支援	使用isConfigSupported檢查
2	`InvalidStateError`	編碼器/解碼器狀態錯誤	確保configure後再encode/decode
3	`OutOfMemoryError`	幀未關閉導致記憶體洩漏	每次使用後呼叫frame.close()
4	`EncodingError`	編碼參數不合法	檢查bitrate、解析度、framerate
5	`Hardware acceleration unavailable`	硬體加速不可用	降級到software模式
6	`Key frame required`	缺少關鍵幀	確保首幀和定期傳送關鍵幀
7	`Timestamp discontinuity`	時間戳不連續	確保幀時間戳單調遞增
8	`Codec string invalid`	codec字串格式錯誤	使用標準codec字串

進階最佳化

Web Worker並行編解碼：將編解碼操作移至Worker避免主執行緒阻塞
硬體加速優先：prefer-hardware配置利用GPU編解碼
關鍵幀間隔調優：根據場景調整keyInterval
自適應碼率ABR：根據網路狀況動態調整bitrate
WebGPU加速濾鏡：用Compute Shader處理視訊幀效果

對比分析

維度	WebCodecs	FFmpeg.wasm	Canvas逐幀	WebRTC
編解碼效能	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
格式支援	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
自訂能力	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐
載入體積	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
瀏覽器支援	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

總結：WebCodecs讓瀏覽器擁有了原生級視訊編解碼能力，效能遠超FFmpeg.wasm和Canvas方案。WebCodecs適合需要瀏覽器端視訊處理的應用，尤其是視訊編輯器、即時轉碼和螢幕錄製。2026年Chrome/Edge已全面支援，是構建下一代Web視訊應用的基礎。

線上工具推薦

JSON格式化：/zh-TW/json/format
Hash計算：/zh-TW/encode/hash
cURL轉程式碼：/zh-TW/dev/curl-to-code