WebCodecs API
注意：此功能在 專用 Web Workers 中可用。
WebCodecs API 為 Web 開發者提供了對影片流的單個幀以及音訊塊的底層訪問。它對於需要完全控制媒體處理方式的 Web 應用程式非常有用。例如，影片或音訊編輯器，以及視訊會議。
概念與用法
許多 Web API 在內部使用媒體編解碼器。例如，Web Audio API 和 WebRTC API。但是，這些 API 不允許開發者處理影片流的單個幀以及未混合的編碼音訊或影片塊。
Web 開發者通常使用 WebAssembly 來繞過此限制，並在瀏覽器中處理媒體編解碼器。但是，這需要額外的頻寬來下載瀏覽器中已存在的編解碼器，從而降低效能和功耗效率，並增加額外的開發開銷。
WebCodecs API 提供了對瀏覽器中已有的編解碼器的訪問。它允許訪問原始影片幀、音訊資料塊、影像解碼器、音訊和影片編碼器及解碼器。
處理模型
WebCodecs API 使用非同步 處理模型。每個編碼器或解碼器例項都維護一個內部的、獨立的處理佇列。在佇列化大量工作時，牢記此模型很重要。
名為 configure()、encode()、decode() 和 flush() 的方法透過將控制訊息追加到佇列末尾來非同步操作，而名為 reset() 和 close() 的方法則同步中止所有待處理的工作並清除處理佇列。在呼叫 reset() 後，可以在呼叫 configure() 後繼續佇列化更多工作，但 close() 是一個永久性操作。
名為 flush() 的方法可用於等待呼叫 flush() 時所有待處理的工作完成。但是，通常只應在佇列化完所有期望的工作後呼叫它。它無意於以固定的時間間隔強制進度。不必要地呼叫它會影響編碼器質量，並導致解碼器要求下一個輸入是關鍵幀。
解複用
目前沒有用於解複用媒體容器的 API。處理容器化媒體的開發者需要自己實現或使用第三方庫。例如，可以使用 MP4Box.js 或 jswebm 分別將音訊和影片資料解複用到 EncodedAudioChunk 和 EncodedVideoChunk 物件。
介面
AudioDecoder-
解碼
EncodedAudioChunk物件。 VideoDecoder-
解碼
EncodedVideoChunk物件。 AudioEncoder-
編碼
AudioData物件。 VideoEncoder-
編碼
VideoFrame物件。 EncodedAudioChunk-
表示特定於編解碼器的編碼音訊位元組。
EncodedVideoChunk-
表示特定於編解碼器的編碼影片位元組。
AudioData-
表示未編碼的音訊資料。
VideoFrame-
表示未編碼影片資料的幀。
VideoColorSpace-
表示影片幀的顏色空間。
ImageDecoder-
解包和解碼影像資料，從而可以訪問動畫影像中的幀序列。
ImageTrackList-
表示影像中可用軌道的列表。
ImageTrack-
表示單個影像軌道。
示例
在以下示例中，幀從 MediaStreamTrackProcessor 返回，然後進行編碼。請參閱完整示例，並在文章 使用 WebCodecs 進行影片處理 中瞭解更多資訊。
let frame_counter = 0;
const track = stream.getVideoTracks()[0];
const media_processor = new MediaStreamTrackProcessor(track);
const reader = media_processor.readable.getReader();
while (true) {
const result = await reader.read();
if (result.done) break;
let frame = result.value;
if (encoder.encodeQueueSize > 2) {
// Too many frames in flight, encoder is overwhelmed
// let's drop this frame.
frame.close();
} else {
frame_counter++;
const insert_keyframe = frame_counter % 150 === 0;
encoder.encode(frame, { keyFrame: insert_keyframe });
frame.close();
}
}