WebCodecs VideoFrame Plane: En Dybdeanalyse av Tilgang til Videobildedata

WebCodecs representerer et paradigmeskifte innen nettbasert mediebehandling. Det gir lavnivåtilgang til mediets byggeklosser, noe som gjør det mulig for utviklere å lage sofistikerte applikasjoner direkte i nettleseren. En av de kraftigste funksjonene i WebCodecs er VideoFrame-objektet, og innenfor det, VideoFrame-planene som eksponerer de rå pikseldataene til videobilder. Denne artikkelen gir en omfattende guide til å forstå og bruke VideoFrame-plan for avansert videomanipulering.

Forstå VideoFrame-objektet

Før vi dykker ned i planene, la oss repetere selve VideoFrame-objektet. En VideoFrame representerer ett enkelt bilde i en video. Den innkapsler de dekodede (eller kodede) videodataene, sammen med tilhørende metadata som tidsstempel, varighet og formatinformasjon. VideoFrame-API-et tilbyr metoder for:

• Å lese pikseldata: Det er her planene kommer inn.
• Å kopiere bilder: Opprette nye VideoFrame-objekter fra eksisterende.
• Å lukke bilder: Frigjøre de underliggende ressursene som bildet holder på.

VideoFrame-objektet opprettes under dekodingsprosessen, vanligvis av en VideoDecoder, eller manuelt når man lager et tilpasset bilde.

Hva er VideoFrame-plan?

En VideoFrames pikseldata er ofte organisert i flere plan, spesielt i formater som YUV. Hvert plan representerer en ulik komponent av bildet. For eksempel, i et YUV420-format, er det tre plan:

• Y (Luma): Representerer lysstyrken (luminans) til bildet. Dette planet inneholder gråskalainformasjonen.
• U (Cb): Representerer den blå-differanse chroma-komponenten.
• V (Cr): Representerer den rød-differanse chroma-komponenten.

RGB-formater, selv om de kan virke enklere, kan også bruke flere plan i noen tilfeller. Antallet plan og deres betydning avhenger helt av VideoPixelFormat for VideoFrame.

Fordelen med å bruke plan er at det gir effektiv tilgang og manipulering av spesifikke fargekomponenter. For eksempel kan det være at du kun vil justere luminansen (Y-planet) uten å påvirke fargen (U- og V-planene).

Tilgang til VideoFrame-plan: API-et

VideoFrame-API-et gir følgende metoder for å få tilgang til plandata:

• copyTo(destination, options): Kopierer innholdet i VideoFrame til en destinasjon, som kan være en annen VideoFrame, en CanvasImageBitmap eller en ArrayBufferView. options-objektet kontrollerer hvilke plan som kopieres og hvordan. Dette er den primære mekanismen for å få tilgang til plan.

options-objektet i copyTo-metoden lar deg spesifisere layout og mål for videobildedataene. Nøkkelegenskaper inkluderer:

• format: Ønsket pikselformat for de kopierte dataene. Dette kan være det samme som den originale VideoFrame eller et annet format (f.eks. konvertering fra YUV til RGB).
• codedWidth og codedHeight: Bredden og høyden på videobildet i piksler.
• layout: En array av objekter som beskriver layouten til hvert plan i minnet. Hvert objekt i arrayen spesifiserer:
• offset: Forskyvningen, i bytes, fra begynnelsen av databufferet til starten av planets data.
• stride: Antall bytes mellom starten av hver rad i planet. Dette er avgjørende for å håndtere padding.

La oss se på et eksempel der vi kopierer en YUV420 VideoFrame til en rå buffer:

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

  // YUV420 har 3 plan: Y, U og V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

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

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

  videoFrame.close(); // Viktig for å frigjøre ressurser
}

Forklaring:

• Vi beregner størrelsen på hvert plan basert på width og height. Y har full oppløsning, mens U og V er sub-samplet (4:2:0).
• layout-arrayen definerer minneoppsettet. offset spesifiserer hvor hvert plan starter i bufferen, og stride spesifiserer antall bytes man må hoppe for å komme til neste rad i det planet.
• format-alternativet er satt til 'I420', som er et vanlig YUV420-format.
• Avgjørende er at videoFrame.close() kalles etter kopieringen for å frigjøre ressurser.

Pikselformater: En Verden av Muligheter

Å forstå pikselformater er essensielt for å jobbe med VideoFrame-plan. VideoPixelFormat definerer hvordan fargeinformasjonen er kodet i videobildet. Her er noen vanlige pikselformater du kan støte på:

• I420 (YUV420p): Et planart YUV-format der Y-, U- og V-komponentene lagres i separate plan. U og V er sub-samplet med en faktor på 2 i både horisontal og vertikal retning. Det er et veldig vanlig og effektivt format.
• NV12 (YUV420sp): Et semi-planart YUV-format der Y lagres i ett plan, og U- og V-komponentene er sammenflettet i et andre plan.
• RGBA: Rød-, Grønn-, Blå- og Alpha-komponenter lagres i et enkelt plan, vanligvis med 8 bits per komponent (32 bits per piksel). Rekkefølgen på komponentene kan variere (f.eks. BGRA).
• RGB565: Rød-, Grønn- og Blå-komponenter lagres i et enkelt plan med 5 bits for Rød, 6 bits for Grønn og 5 bits for Blå (16 bits per piksel).
• GRAYSCALE: Representerer gråskalabilder med en enkelt luma-verdi (lysstyrke) for hver piksel.

Egenskapen VideoFrame.format vil fortelle deg pikselformatet til et gitt bilde. Sørg for å sjekke denne egenskapen før du prøver å få tilgang til planene. Du kan konsultere WebCodecs-spesifikasjonen for en komplett liste over støttede formater.

Praktiske Bruksområder

Tilgang til VideoFrame-plan åpner opp et bredt spekter av muligheter for avansert videobehandling i nettleseren. Her er noen eksempler:

1. Sanntids Videoeffekter

Du kan bruke sanntids videoeffekter ved å manipulere pikseldataene i VideoFrame. For eksempel kan du implementere et gråskalafilter ved å beregne gjennomsnittet av R-, G- og B-komponentene for hver piksel i et RGBA-bilde og deretter sette alle tre komponentene til den gjennomsnittsverdien. Du kan også lage en sepia-tone-effekt eller justere lysstyrke og kontrast.

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;       // Rød
    rgba[i + 1] = gray;   // Grønn
    rgba[i + 2] = gray;   // Blå
  }

  // Lag en ny VideoFrame fra de modifiserte dataene.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Frigjør den originale rammen
  return newFrame;
}

2. Anvendelser innen Datasyn

VideoFrame-plan gir direkte tilgang til pikseldataene som trengs for datasynsoppgaver. Du kan bruke disse dataene til å implementere algoritmer for objektgjenkjenning, ansiktsgjenkjenning, bevegelsessporing og mer. Du kan utnytte WebAssembly for ytelseskritiske deler av koden din.

For eksempel kan du konvertere en farge-VideoFrame til gråskala og deretter bruke en kantdeteksjonsalgoritme (f.eks. Sobel-operatør) for å identifisere kanter i bildet. Dette kan brukes som et forbehandlingstrinn for objektgjenkjenning.

3. Videoredigering og Komposisjon

Du kan bruke VideoFrame-plan til å implementere videoredigeringsfunksjoner som beskjæring, skalering, rotasjon og komposisjon. Ved å manipulere pikseldataene direkte kan du lage tilpassede overganger og effekter.

For eksempel kan du beskjære en VideoFrame ved å kopiere bare en del av pikseldataene til en ny VideoFrame. Du må da justere layout-offset og strides tilsvarende.

4. Egendefinerte Kodeker og Transkoding

Selv om WebCodecs gir innebygd støtte for vanlige kodeker som AV1, VP9 og H.264, kan du også bruke det til å implementere egendefinerte kodeker eller transkodingspipelines. Du må håndtere koding- og dekodingsprosessen selv, men VideoFrame-plan lar deg få tilgang til og manipulere de rå pikseldataene. Dette kan være nyttig for nisjevideoformater или spesialiserte kodingskrav.

5. Avansert Analyse

Ved å få tilgang til de underliggende pikseldataene, kan du utføre dyp analyse av videoinnhold. Dette inkluderer oppgaver som å måle gjennomsnittlig lysstyrke i en scene, identifisere dominerende farger eller oppdage endringer i sceneinnhold. Dette kan muliggjøre avanserte videoanalyseapplikasjoner for sikkerhet, overvåking eller innholdsanalyse.

Arbeid med Canvas og WebGL

Selv om du kan manipulere pikseldataene i VideoFrame-plan direkte, må du ofte gjengi resultatet på skjermen. Grensesnittet CanvasImageBitmap bygger bro mellom VideoFrame og <canvas>-elementet. Du kan lage en CanvasImageBitmap fra en VideoFrame og deretter tegne den på lerretet ved hjelp av drawImage()-metoden.

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(); // Frigjør bitmap-ressurser
  videoFrame.close(); // Frigjør VideoFrame-ressurser
}

For mer avansert gjengivelse kan du bruke WebGL. Du kan laste opp pikseldata fra VideoFrame-plan til WebGL-teksturer og deretter bruke shadere til å bruke effekter og transformasjoner. Dette lar deg utnytte GPU-en for høyytelses videobehandling.

Ytelseshensyn

Å jobbe med rå pikseldata kan være beregningsintensivt, så det er avgjørende å vurdere ytelsesoptimalisering. Her er noen tips:

• Minimer kopiering: Unngå unødvendig kopiering av pikseldata. Prøv å utføre operasjoner på stedet når det er mulig.
• Bruk WebAssembly: For ytelseskritiske deler av koden din, vurder å bruke WebAssembly. WebAssembly kan gi nesten-native ytelse for beregningsintensive oppgaver.
• Optimaliser minneoppsett: Velg riktig pikselformat og minneoppsett for din applikasjon. Vurder å bruke pakkede formater (f.eks. RGBA) hvis du ikke trenger å få tilgang til individuelle fargekomponenter ofte.
• Bruk OffscreenCanvas: For bakgrunnsbehandling, bruk OffscreenCanvas for å unngå å blokkere hovedtråden.
• Profiler koden din: Bruk nettleserens utviklerverktøy for å profilere koden din og identifisere ytelsesflaskehalser.

Nettleserkompatibilitet

WebCodecs og VideoFrame-API-et støttes i de fleste moderne nettlesere, inkludert Chrome, Firefox og Safari. Imidlertid kan støttenivået variere avhengig av nettleserversjon og operativsystem. Sjekk de nyeste nettleserkompatibilitetstabellene på sider som MDN Web Docs for å sikre at funksjonene du bruker støttes i dine målgruppenettlesere. For kryss-nettleser-kompatibilitet anbefales funksjonsdeteksjon.

Vanlige Fallgruver og Feilsøking

Her er noen vanlige fallgruver du bør unngå når du jobber med VideoFrame-plan:

• Feil layout: Sørg for at layout-arrayen nøyaktig beskriver minneoppsettet til pikseldataene. Feil offset eller strides kan føre til korrupte bilder.
• Uoverensstemmende pikselformater: Pass på at pikselformatet du spesifiserer i copyTo-metoden samsvarer med det faktiske formatet til VideoFrame.
• Minnelekkasjer: Lukk alltid VideoFrame- og CanvasImageBitmap-objekter etter at du er ferdig med dem for å frigjøre de underliggende ressursene. Hvis du ikke gjør det, kan det føre til minnelekkasjer.
• Asynkrone operasjoner: Husk at copyTo er en asynkron operasjon. Bruk await for å sikre at kopieringsoperasjonen fullføres før du får tilgang til pikseldataene.
• Sikkerhetsbegrensninger: Vær oppmerksom på sikkerhetsbegrensninger som kan gjelde når du får tilgang til pikseldata fra videoer med kryss-opprinnelse.

Eksempel: YUV til RGB-konvertering

La oss vurdere et mer komplekst eksempel: konvertering av en YUV420 VideoFrame til en RGB VideoFrame. Dette innebærer å lese Y-, U- og V-planene, konvertere dem til RGB-verdier, og deretter lage en ny RGB VideoFrame.

Denne konverteringen kan implementeres ved hjelp av følgende formel:

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

Her er koden:

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-plan
    { offset: yPlaneSize, stride: width / 2 }, // U-plan
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V-plan
  ];

  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(); // Frigjør den originale rammen
  return newFrame;
}

Dette eksempelet demonstrerer kraften og kompleksiteten ved å jobbe med VideoFrame-plan. Det krever en god forståelse av pikselformater, minneoppsett og fargeromskonverteringer.

Konklusjon

VideoFrame-plan-API-et i WebCodecs låser opp et nytt nivå av kontroll over videobehandling i nettleseren. Ved å forstå hvordan du får tilgang til og manipulerer pikseldata direkte, kan du lage avanserte applikasjoner for sanntids videoeffekter, datasyn, videoredigering og mer. Selv om det kan være utfordrende å jobbe med VideoFrame-plan, er de potensielle gevinstene betydelige. Etter hvert som WebCodecs fortsetter å utvikle seg, vil det utvilsomt bli et essensielt verktøy for webutviklere som jobber med media.

Vi oppfordrer deg til å eksperimentere med VideoFrame-plan-API-et og utforske dets muligheter. Ved å forstå de underliggende prinsippene og anvende beste praksis, kan du lage innovative og ytelsessterke videoapplikasjoner som flytter grensene for hva som er mulig i nettleseren.

Videre Læring

• MDN Web Docs om WebCodecs
• WebCodecs-spesifikasjonen
• WebCodecs eksempelkode-arkiver på GitHub.