WebCodecs VideoFrame Plane: Een Diepgaande Blik op Toegang tot Videoframe-Data

WebCodecs vertegenwoordigt een paradigmaverschuiving in webgebaseerde mediaverwerking. Het biedt laag-niveau toegang tot de bouwstenen van media, waardoor ontwikkelaars geavanceerde applicaties direct in de browser kunnen bouwen. Een van de krachtigste functies van WebCodecs is het VideoFrame-object, en daarbinnen de VideoFrame-planes die de ruwe pixeldata van videoframes blootleggen. Dit artikel biedt een uitgebreide gids voor het begrijpen en gebruiken van VideoFrame-planes voor geavanceerde videomanipulatie.

Het VideoFrame-object Begrijpen

Voordat we dieper ingaan op planes, laten we het VideoFrame-object zelf even samenvatten. Een VideoFrame vertegenwoordigt een enkel frame van een video. Het omvat de gedecodeerde (of gecodeerde) videodata, samen met bijbehorende metadata zoals timestamp, duur en formaatinformatie. De VideoFrame API biedt methoden voor:

• Het lezen van pixeldata: Hier komen de planes om de hoek kijken.
• Het kopiëren van frames: Nieuwe VideoFrame-objecten maken van bestaande.
• Het sluiten van frames: De onderliggende bronnen die door het frame worden gebruikt, vrijgeven.

Het VideoFrame-object wordt gecreëerd tijdens het decoderingsproces, meestal door een VideoDecoder, of handmatig wanneer een aangepast frame wordt gemaakt.

Wat zijn VideoFrame Planes?

De pixeldata van een VideoFrame is vaak georganiseerd in meerdere planes, vooral in formaten zoals YUV. Elke plane vertegenwoordigt een ander component van het beeld. Bijvoorbeeld, in een YUV420-formaat zijn er drie planes:

• Y (Luma): Vertegenwoordigt de helderheid (luminantie) van het beeld. Deze plane bevat de grijswaardeninformatie.
• U (Cb): Vertegenwoordigt de blauw-verschil chromacomponent.
• V (Cr): Vertegenwoordigt de rood-verschil chromacomponent.

RGB-formaten, hoewel ogenschijnlijk eenvoudiger, kunnen in sommige gevallen ook meerdere planes gebruiken. Het aantal planes en hun betekenis hangt volledig af van de VideoPixelFormat van de VideoFrame.

Het voordeel van het gebruik van planes is dat het efficiënte toegang tot en manipulatie van specifieke kleurcomponenten mogelijk maakt. U kunt bijvoorbeeld alleen de luminantie (Y-plane) aanpassen zonder de kleur (U- en V-planes) te beïnvloeden.

Toegang tot VideoFrame Planes: De API

De VideoFrame API biedt de volgende methoden om toegang te krijgen tot plane-data:

• copyTo(destination, options): Kopieert de inhoud van de VideoFrame naar een bestemming, die een andere VideoFrame, een CanvasImageBitmap of een ArrayBufferView kan zijn. Het options-object bepaalt welke planes worden gekopieerd en hoe. Dit is het primaire mechanisme voor toegang tot planes.

Het options-object in de copyTo-methode stelt u in staat om de layout en het doel voor de videoframe-data te specificeren. Belangrijke eigenschappen zijn:

• format: Het gewenste pixelformaat van de gekopieerde data. Dit kan hetzelfde zijn als de originele VideoFrame of een ander formaat (bv. converteren van YUV naar RGB).
• codedWidth en codedHeight: De breedte en hoogte van het videoframe in pixels.
• layout: Een array van objecten die de layout van elke plane in het geheugen beschrijven. Elk object in de array specificeert:
• offset: De offset, in bytes, vanaf het begin van de databuffer tot het begin van de data van de plane.
• stride: Het aantal bytes tussen het begin van elke rij in de plane. Dit is cruciaal voor het omgaan met padding.

Laten we kijken naar een voorbeeld van het kopiëren van een YUV420 VideoFrame naar een ruwe buffer:

async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 heeft 3 planes: Y, U en V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Belangrijk om bronnen vrij te geven
}

Uitleg:

• We berekenen de grootte van elke plane op basis van de width en height. Y heeft de volledige resolutie, terwijl U en V gesubsampled zijn (4:2:0).
• De layout-array definieert de geheugenlayout. De offset specificeert waar elke plane begint in de buffer, en de stride specificeert het aantal bytes dat moet worden overgeslagen om naar de volgende rij in die plane te gaan.
• De format-optie is ingesteld op 'I420', wat een veelgebruikt YUV420-formaat is.
• Cruciaal is dat na het kopiëren videoFrame.close() wordt aangeroepen om bronnen vrij te geven.

Pixelformaten: Een Wereld van Mogelijkheden

Het begrijpen van pixelformaten is essentieel voor het werken met VideoFrame-planes. De VideoPixelFormat definieert hoe de kleurinformatie binnen het videoframe wordt gecodeerd. Hier zijn enkele veelvoorkomende pixelformaten die u kunt tegenkomen:

• I420 (YUV420p): Een planair YUV-formaat waarbij de Y-, U- en V-componenten in afzonderlijke planes worden opgeslagen. U en V zijn gesubsampled met een factor 2 in zowel de horizontale als verticale dimensies. Het is een zeer gebruikelijk en efficiënt formaat.
• NV12 (YUV420sp): Een semi-planair YUV-formaat waarbij Y in één plane wordt opgeslagen, en de U- en V-componenten geïnterleaved zijn in een tweede plane.
• RGBA: Rode, Groene, Blauwe en Alpha-componenten worden opgeslagen in een enkele plane, meestal met 8 bits per component (32 bits per pixel). De volgorde van de componenten kan variëren (bv. BGRA).
• RGB565: Rode, Groene en Blauwe componenten worden opgeslagen in een enkele plane met 5 bits voor Rood, 6 bits voor Groen en 5 bits voor Blauw (16 bits per pixel).
• GRAYSCALE: Vertegenwoordigt grijswaardenafbeeldingen met een enkele luma (helderheid) waarde voor elke pixel.

De eigenschap VideoFrame.format vertelt u het pixelformaat van een bepaald frame. Zorg ervoor dat u deze eigenschap controleert voordat u probeert toegang te krijgen tot de planes. U kunt de WebCodecs-specificatie raadplegen voor een volledige lijst van ondersteunde formaten.

Praktische Toepassingen

Toegang tot VideoFrame-planes opent een breed scala aan mogelijkheden voor geavanceerde videoverwerking in de browser. Hier zijn enkele voorbeelden:

1. Real-time Video-effecten

U kunt real-time video-effecten toepassen door de pixeldata in de VideoFrame te manipuleren. U kunt bijvoorbeeld een grijswaardenfilter implementeren door de R-, G- en B-componenten van elke pixel in een RGBA-frame te middelen en vervolgens alle drie de componenten op die gemiddelde waarde in te stellen. U kunt ook een sepia-effect creëren of de helderheid en het contrast aanpassen.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Rood
    rgba[i + 1] = gray;   // Groen
    rgba[i + 2] = gray;   // Blauw
  }

  // Maak een nieuwe VideoFrame van de gewijzigde data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Geef het originele frame vrij
  return newFrame;
}

2. Computer Vision-toepassingen

VideoFrame-planes bieden directe toegang tot de pixeldata die nodig is voor computer vision-taken. U kunt deze data gebruiken om algoritmen voor objectdetectie, gezichtsherkenning, bewegingsregistratie en meer te implementeren. U kunt WebAssembly gebruiken voor prestatiekritieke delen van uw code.

U kunt bijvoorbeeld een gekleurde VideoFrame omzetten naar grijswaarden en vervolgens een randdetectie-algoritme (bv. Sobel-operator) toepassen om randen in het beeld te identificeren. Dit kan worden gebruikt als een voorbewerkingsstap voor objectherkenning.

3. Videobewerking en Compositing

U kunt VideoFrame-planes gebruiken om videobewerkingsfuncties zoals bijsnijden, schalen, roteren en compositing te implementeren. Door de pixeldata rechtstreeks te manipuleren, kunt u aangepaste overgangen en effecten creëren.

U kunt bijvoorbeeld een VideoFrame bijsnijden door slechts een deel van de pixeldata naar een nieuwe VideoFrame te kopiëren. U zou de layout-offsets en strides dienovereenkomstig aanpassen.

4. Aangepaste Codecs en Transcodering

Hoewel WebCodecs ingebouwde ondersteuning biedt voor veelgebruikte codecs zoals AV1, VP9 en H.264, kunt u het ook gebruiken om aangepaste codecs of transcodering-pipelines te implementeren. U moet het coderings- en decoderingsproces zelf afhandelen, maar VideoFrame-planes stellen u in staat om toegang te krijgen tot de ruwe pixeldata en deze te manipuleren. Dit kan nuttig zijn voor niche videoformaten of gespecialiseerde coderingsvereisten.

5. Geavanceerde Analyse

Door toegang te krijgen tot de onderliggende pixeldata, kunt u diepgaande analyses van video-inhoud uitvoeren. Dit omvat taken zoals het meten van de gemiddelde helderheid van een scène, het identificeren van dominante kleuren of het detecteren van veranderingen in de scène-inhoud. Dit kan geavanceerde video-analyseapplicaties voor beveiliging, bewaking of inhoudsanalyse mogelijk maken.

Werken met Canvas en WebGL

Hoewel u de pixeldata in VideoFrame-planes direct kunt manipuleren, moet u het resultaat vaak op het scherm renderen. De CanvasImageBitmap-interface biedt een brug tussen VideoFrame en het <canvas>-element. U kunt een CanvasImageBitmap maken van een VideoFrame en deze vervolgens op het canvas tekenen met de drawImage()-methode.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Geef bitmap-bronnen vrij
  videoFrame.close(); // Geef VideoFrame-bronnen vrij
}

Voor geavanceerdere rendering kunt u WebGL gebruiken. U kunt de pixeldata van VideoFrame-planes uploaden naar WebGL-texturen en vervolgens shaders gebruiken om effecten en transformaties toe te passen. Hierdoor kunt u de GPU benutten voor high-performance videoverwerking.

Prestatieoverwegingen

Het werken met ruwe pixeldata kan rekenintensief zijn, dus het is cruciaal om rekening te houden met prestatie-optimalisatie. Hier zijn enkele tips:

• Minimaliseer kopieën: Vermijd onnodig kopiëren van pixeldata. Probeer bewerkingen waar mogelijk 'in-place' uit te voeren.
• Gebruik WebAssembly: Overweeg voor prestatiekritieke delen van uw code het gebruik van WebAssembly. WebAssembly kan bijna-native prestaties leveren voor rekenintensieve taken.
• Optimaliseer geheugenlayout: Kies het juiste pixelformaat en de juiste geheugenlayout voor uw toepassing. Overweeg het gebruik van 'packed' formaten (bv. RGBA) als u niet vaak toegang nodig heeft tot individuele kleurcomponenten.
• Gebruik OffscreenCanvas: Gebruik voor achtergrondverwerking OffscreenCanvas om te voorkomen dat de hoofdthread wordt geblokkeerd.
• Profileer uw code: Gebruik de ontwikkelaarstools van de browser om uw code te profileren en prestatieknelpunten te identificeren.

Browsercompatibiliteit

WebCodecs en de VideoFrame API worden ondersteund in de meeste moderne browsers, waaronder Chrome, Firefox en Safari. Het ondersteuningsniveau kan echter variëren afhankelijk van de browserversie en het besturingssysteem. Controleer de nieuwste browsercompatibiliteitstabellen op sites zoals MDN Web Docs om er zeker van te zijn dat de functies die u gebruikt, worden ondersteund in uw doelbrowsers. Voor cross-browser compatibiliteit wordt feature-detectie aanbevolen.

Veelvoorkomende Valkuilen en Probleemoplossing

Hier zijn enkele veelvoorkomende valkuilen die u moet vermijden bij het werken met VideoFrame-planes:

• Onjuiste layout: Zorg ervoor dat de layout-array de geheugenlayout van de pixeldata nauwkeurig beschrijft. Onjuiste offsets of strides kunnen leiden tot corrupte beelden.
• Niet-overeenkomende pixelformaten: Zorg ervoor dat het pixelformaat dat u opgeeft in de copyTo-methode overeenkomt met het daadwerkelijke formaat van de VideoFrame.
• Geheugenlekken: Sluit VideoFrame- en CanvasImageBitmap-objecten altijd af nadat u klaar bent om de onderliggende bronnen vrij te geven. Als u dit niet doet, kan dit leiden tot geheugenlekken.
• Asynchrone operaties: Onthoud dat copyTo een asynchrone operatie is. Gebruik await om ervoor te zorgen dat de kopieeroperatie is voltooid voordat u toegang krijgt tot de pixeldata.
• Beveiligingsbeperkingen: Wees u bewust van beveiligingsbeperkingen die van toepassing kunnen zijn bij het openen van pixeldata van cross-origin video's.

Voorbeeld: YUV naar RGB Conversie

Laten we een complexer voorbeeld bekijken: het converteren van een YUV420 VideoFrame naar een RGB VideoFrame. Dit omvat het lezen van de Y-, U- en V-planes, het converteren ervan naar RGB-waarden en vervolgens het maken van een nieuwe RGB VideoFrame.

Deze conversie kan worden geïmplementeerd met de volgende formule:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Hier is de code:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Geef het originele frame vrij
  return newFrame;
}

Dit voorbeeld demonstreert de kracht en complexiteit van het werken met VideoFrame-planes. Het vereist een goed begrip van pixelformaten, geheugenlayout en kleurruimteconversies.

Conclusie

De VideoFrame plane API in WebCodecs ontgrendelt een nieuw niveau van controle over videoverwerking in de browser. Door te begrijpen hoe u direct toegang krijgt tot pixeldata en deze kunt manipuleren, kunt u geavanceerde applicaties maken voor real-time video-effecten, computer vision, videobewerking en meer. Hoewel het werken met VideoFrame-planes een uitdaging kan zijn, zijn de potentiële voordelen aanzienlijk. Naarmate WebCodecs zich verder ontwikkelt, zal het ongetwijfeld een essentieel hulpmiddel worden voor webontwikkelaars die met media werken.

We moedigen u aan om te experimenteren met de VideoFrame plane API en de mogelijkheden ervan te verkennen. Door de onderliggende principes te begrijpen en best practices toe te passen, kunt u innovatieve en performante videoapplicaties maken die de grenzen verleggen van wat mogelijk is in de browser.

Verder Leren

• MDN Web Docs over WebCodecs
• WebCodecs-specificatie
• WebCodecs voorbeeldcode-repositories op GitHub.