WebCodecs API

Hinweis: Diese Funktion ist in Dedicated Web Workers verfgbar.

Die WebCodecs-API ermglicht es Webentwicklern, Video- und Audiomaterial im Browser effizient zu kodieren und zu dekodieren (unter Verwendung der Hardwarebeschleunigung) und bietet sehr detaillierte Steuerungsmglichkeiten (Verarbeitung auf Frame-Basis).

Sie ist ntzlich fr Webanwendungen, die eine umfangreiche Medienverarbeitung durchfhren oder die eine detaillierte Kontrolle darber erfordern, wie Medien kodiert werden. Dies schliet browserbasierte Video- und Audiobearbeitung sowie Livestreaming und Videokonferenzen ein.

Konzepte

Die WebCodecs-API stellt browsernative Schnittstellen bereit, um rohe Videoframes, kodierte Videoframes sowie rohe und kodierte Audiodaten zu reprsentieren.

	Video	Audio
Roh	`VideoFrame`	`AudioData`
Kodiert	`EncodedVideoChunk`	`EncodedAudioChunk`

Die WebCodecs-API fhrt auch die Schnittstellen VideoDecoder und VideoEncoder ein, die EncodedVideoChunk-Objekte in VideoFrame-Objekte und umgekehrt transformieren.

[VideoEncoder und VideoDecoder]

Ebenso fhrt die WebCodecs-API auch die Schnittstellen AudioDecoder und AudioEncoder ein, die EncodedAudioChunk-Objekte in AudioData-Objekte und umgekehrt transformieren.

[AudioEncoder und AudioDecoder]

Normalerweise gibt es eine 1:1-Entsprechung zwischen den rohen und kodierten Versionen jedes Medientyps. Das Dekodieren einer Anzahl von EncodedVideoChunk-Objekten ergibt die gleiche Anzahl von VideoFrame-Objekten (und dies gilt auch fr Audio).

Video

Ein VideoFrame reprsentiert ein Videoframe und ist mit den tatschlichen Pixel-Daten im Grafikspeicher des Gerts sowie Metadaten wie dem Zeitstempel und der Dauer (in Mikrosekunden), Format und Auflsung verknpft. Ein VideoFrame kann aus jeder Bildquelle erstellt werden und kann auch mit jeder der Canvas-Rendering-Methoden auf eine Canvas gerendert werden.

EncodedVideoChunk reprsentiert die kodierte (komprimierte) Version desselben Frames, verknpft mit Binrdaten im regulren Speicher und denselben Metadaten. Der einzige Unterschied besteht darin, dass es ein zustzliches Feld hat: type, das "key" oder "delta" sein kann und darstellt, ob es einem Keyframe entspricht oder nicht. Ein EncodedVideoChunk speichert typischerweise 10 bis 100 Mal weniger Daten als sein entsprechendes rohes VideoFrame.

[VideoFrame und EncodedVideoChunk]

Audio

Ein AudioData-Objekt reprsentiert eine Anzahl von individuellen Audiosamples (1024 ist eine typische Anzahl). Audiosample-Daten knnen ber die copyTo-Methode als Float32Array extrahiert werden. Es gibt keine direkte Integration mit der Web Audio API; jedoch knnen die extrahierten Float32Array-Samples direkt in einen AudioBuffer fr die Wiedergabe kopiert werden.

Ebenso reprsentiert EncodedAudioChunk die kodierte (komprimierte) Version eines AudioData-Objekts, die komprimierte Audiosample-Daten enthlt.

[AudioData und EncodedAudioChunk]

Verarbeitungsmodell

Die WebCodecs-API verwendet ein asynchrones Verarbeitungsmodell. Jede Instanz eines Encoders oder Decoders unterhlt eine interne, unabhngige Verarbeitungswarteschlange. Wenn eine betrchtliche Anzahl von kodierten Chunks zum Dekodieren oder Frames/Samples zum Kodieren in die Warteschlange gestellt wird, ist es wichtig, dieses Modell im Auge zu behalten.

Methoden mit den Namen configure(), encode(), decode() und flush() arbeiten asynchron, indem sie Kontrollnachrichten ans Ende der Warteschlange anhngen, whrend Methoden mit den Namen reset() und close() synchron alle anstehenden Arbeiten abbrechen und die Verarbeitungswarteschlange lschen. Nach reset() kann mehr Arbeit nach einem Aufruf von configure() in die Warteschlange gestellt werden, aber close() ist eine dauerhafte Operation. Diese Methoden funktionieren sowohl fr Audio- als auch fr Video-Encoder/Decoder.

Die flush()-Methode kann verwendet werden, um auf den Abschluss aller Arbeiten zu warten, die zum Zeitpunkt des Aufrufs von flush() ausstanden. Sie sollte jedoch im Allgemeinen nur aufgerufen werden, wenn alle gewnschten Arbeiten in die Warteschlange gestellt sind sie ist nicht dazu gedacht, den Fortschritt in regelmigen Abstnden zu erzwingen. Ein unntiger Aufruf wird die Qualitt des Encoders beeintrchtigen und dazu fhren, dass Decoder das nchste Eingangsmaterial als Keyframe bentigen.

Codecs

Ein Codec ist ein spezifischer Algorithmus zum Kodieren (Komprimieren) und Dekodieren (Dekomprimieren) von Video- und Audiodaten. Es gibt mehrere Industriestandards fr Videocodecs und ein separates Set von Codecs fr Audio. Hier sind die Haupt-Codecs, die von der WebCodecs-API untersttzt werden:

Video-Codecs

H.264 (AVC): Der am weitesten verbreitete Videocodec. Die meisten MP4-Dateien verwenden H.264.
VP9: Open Source, entwickelt von Google. Bessere Kompression als H.264. Hufig auf YouTube und in WebM-Dateien genutzt.
AV1: Der neueste Open-Source-Codec mit besserer Kompression als VP9. Breite Decoder-Untersttzung; Hardware-Encoder-Untersttzung ist noch begrenzt.
H.265 (HEVC): Bessere Kompression als H.264, jedoch mit erheblichen Lcken in der Browseruntersttzung auerhalb von Apple-Plattformen.

Audio-Codecs

Opus: Open Source, niedrige Latenz. Die empfohlene Wahl fr die meisten WebCodecs-Audiokodierungen.
AAC: Weit verbreitet. Hufig in MP4-Dateien anzutreffen.
MP3: Weit verbreitet fr das Dekodieren, aber nicht als Encoder in WebCodecs verfgbar.
PCM: Unkomprimiertes Audio. Kein Qualittsverlust, aber groe Dateigren.

Die WebCodecs-Spezifikation untersttzt eine bestimmte Reihe von Codecs, und einzelne Gerte und Browser untersttzen mglicherweise nur eine Teilmenge davon. Encoder und Decoder mssen mit vollstndig angegebenen Codec-Strings (wie "vp09.00.40.08.00" fr VP9 oder "avc1.4d0034" fr H.264) konfiguriert werden, anstatt mit vagen Codec-Namen wie "vp9" oder "h264". Der Codec-Auswahl-Leitfaden bietet Anleitungen zur Auswahl eines geeigneten Codec-Strings (siehe die Codec Support Table (webcodecsfundamentals.org) fr eine vollstndige Liste der Codec-Strings und ihrer Browseruntersttzung).

Multiplexen und Demultiplexen

Die WebCodecs-API befasst sich nur mit dem Kodieren und Dekodieren, wobei kodierte Chunks lediglich Binrdaten darstellen. Sie bietet keine integrierte Mglichkeit, EncodedVideoChunk-Objekte aus einer Videodatei zu lesen oder sie in eine abspielbare Videodatei zu schreiben.

Das Lesen kodierter Chunks aus einer Videodatei ist ein vllig anderer Prozess, der als Demultiplexen bezeichnet wird. Um EncodedVideoChunk-Objekte aus einer Videodatei zu extrahieren, mssen Sie eine Demultiplexing-Bibliothek wie Mediabunny oder web-demuxer verwenden.

[Demultiplexer]

Diese Bibliotheken folgen den Videocontainer-Spezifikationen (z. B. webm, mp4), um die Trackdaten und Byte-Offsets fr jeden kodierten Chunk zu extrahieren und bieten Methoden zum Extrahieren der tatschlichen Chunks aus der Rohdatei.

Ebenso bentigen Sie eine Multiplexing-Bibliothek, um in eine abspielbare Videodatei zu schreiben, wobei Mediabunny die primre Wahl ist. Multiplexing-Bibliotheken kmmern sich um die Formatierung der binren kodierten Daten und deren Platzierung an der richtigen Byte-Position im Ausgabedatenstrom gem der Containerspezifikation, sodass das Ausgabevideo abspielbar ist.

Weitere Informationen zum Multiplexen und Demultiplexen finden Sie im Multiplexing- und Demultiplexing-Leitfaden (webcodecsfundamentals.org).

Leitfden

Videoprozessierungskonzepte: Ein kurzer berblick ber die Videoverarbeitung, einschlielich Codecs und Container, Multiplexing und Demultiplexing sowie konzeptionelle Informationen, die erklren, wie die WebCodecs-API diese Konzepte umsetzt.
Verwendung der WebCodecs-API: Ein ausfhrlicher Leitfaden zur eigentlichen Verwendung der WebCodecs-API, einschlielich der Instanziierung und Konfiguration von Encodern und Decodern, der Erstellung und Nutzung von Videoframes sowie der Extraktion von Samples aus AudioData.
Codecauswahl: Die WebCodecs-API erfordert Codec-Strings przise Bezeichner, die nicht nur die Codec-Familie, sondern auch das Profil, Level und andere Parameter spezifizieren. Dieser Leitfaden erklrt, wie Codec-Strings funktionieren und wie man den richtigen Codec fr gngige Anwendungsflle auswhlt.

Schnittstellen

AudioDecoder: Dekodiert EncodedAudioChunk-Objekte.
VideoDecoder: Dekodiert EncodedVideoChunk-Objekte.
AudioEncoder: Kodiert AudioData-Objekte.
VideoEncoder: Kodiert VideoFrame-Objekte.
EncodedAudioChunk: Reprsentiert codec-spezifische kodierte Audio-Bytes.
EncodedVideoChunk: Reprsentiert codec-spezifische kodierte Video-Bytes.
AudioData: Reprsentiert unkodierte Audiodaten.
VideoFrame: Reprsentiert ein Frame von unkodierten Videodaten.
VideoColorSpace: Reprsentiert den Farbraum eines Videoframes.
ImageDecoder: Entpackt und dekodiert Bilddaten und ermglicht den Zugriff auf die Sequenz von Frames in einem animierten Bild.
ImageTrackList: Reprsentiert die Liste der in einem Bild verfgbaren Tracks.
ImageTrack: Reprsentiert einen einzelnen Bildtrack.

Beispiele

Grundlegende Verwendung

Um einen VideoEncoder zu instanziieren, bergeben wir ein Objekt, das eine Callback-Funktion angibt, die aufgerufen wird, wenn EncodedVideoChunk-Instanzen zur Verarbeitung bereitstehen, und eine Fehlerfunktion, die aufgerufen wird, wenn Fehler auftreten. Dies wird im folgenden Code gezeigt:

const encoder = new VideoEncoder({
  output(chunk, meta) {
    // Do something with chunk, typically send to muxing library
  },
  error(e) {
    console.warn(e);
  },
});

Sie mssen dann den Encoder mit dem Codec-Parameter und verschiedenen anderen Feldern konfigurieren.

encoder.configure({
  codec: "vp09.00.40.08.00", // See codec selection guide
  width: 1280,
  height: 720,
  bitrate: 1_000_000, // 1 Mbps
  framerate: 30,
});

Sie knnen dann beginnen, Frames an den Encoder zu kodieren. Sie knnen ein VideoFrame aus einer Canvas erstellen.

for (let i = 0; i < 60; i++) {
  const frame = new VideoFrame(canvas, { timestamp: (i * 1e6) / 30 }); // 30 fps, in microseconds
  encoder.encode(frame, { keyFrame: i % 60 === 0 });
}

Weitere Beispiele finden Sie unter Verwendung der WebCodecs-API.

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden