WebCodecs VideoFrame-tasot: Syväsukellus videokehysten datan käsittelyyn

WebCodecs edustaa paradigman muutosta verkkopohjaisessa mediankäsittelyssä. Se tarjoaa matalan tason pääsyn median perusrakenteisiin, mahdollistaen kehittäjille hienostuneiden sovellusten luomisen suoraan selaimessa. Yksi WebCodecsin tehokkaimmista ominaisuuksista on VideoFrame-olio ja sen sisällä olevat VideoFrame-tasot, jotka paljastavat videokehysten raa'an pikselidatan. Tämä artikkeli tarjoaa kattavan oppaan VideoFrame-tasojen ymmärtämiseen ja hyödyntämiseen edistyneessä videonmuokkauksessa.

VideoFrame-olion ymmärtäminen

Ennen tasoihin sukeltamista, kerrataanpa itse VideoFrame-olio. VideoFrame edustaa yhtä videon kehystä. Se kapseloi puretun (tai koodatun) videodatan sekä siihen liittyvät metatiedot, kuten aikaleiman, keston ja formaattitiedot. VideoFrame-API tarjoaa menetelmiä:

• Pikselidatan lukeminen: Tässä tasot tulevat kuvaan.
• Kehysten kopioiminen: Uusien VideoFrame-olioiden luominen olemassa olevista.
• Kehysten sulkeminen: Kehyksen varaamien resurssien vapauttaminen.

VideoFrame-olio luodaan purkuprosessin aikana, tyypillisesti VideoDecoder-olion toimesta, tai manuaalisesti, kun luodaan mukautettua kehystä.

Mitä ovat VideoFrame-tasot?

VideoFrame-olion pikselidata on usein järjestetty useisiin tasoihin, erityisesti YUV-kaltaisissa formaateissa. Jokainen taso edustaa kuvan eri komponenttia. Esimerkiksi YUV420-formaatissa on kolme tasoa:

• Y (Luma): Edustaa kuvan kirkkautta (luminanssia). Tämä taso sisältää harmaasävytiedon.
• U (Cb): Edustaa sinisen eron värikomponenttia (kroma).
• V (Cr): Edustaa punaisen eron värikomponenttia (kroma).

RGB-formaatit, vaikka ne vaikuttavat yksinkertaisemmilta, voivat myös joissain tapauksissa käyttää useita tasoja. Tasojen määrä ja niiden merkitys riippuu täysin VideoFrame-olion VideoPixelFormat-arvosta.

Tasojen käytön etuna on, että ne mahdollistavat tehokkaan pääsyn tiettyihin värikomponentteihin ja niiden muokkaamisen. Voit esimerkiksi haluta säätää vain luminanssia (Y-taso) vaikuttamatta väriin (U- ja V-tasot).

VideoFrame-tasojen käyttö: API

VideoFrame-API tarjoaa seuraavat menetelmät tasodatan käsittelyyn:

• copyTo(destination, options): Kopioi VideoFrame-olion sisällön kohteeseen, joka voi olla toinen VideoFrame, CanvasImageBitmap tai ArrayBufferView. options-olio hallitsee, mitkä tasot kopioidaan ja miten. Tämä on ensisijainen mekanismi tasojen käsittelyyn.

copyTo-metodin options-olio antaa sinun määrittää videokehysdatan asettelun ja kohteen. Tärkeitä ominaisuuksia ovat:

• format: Kopioidun datan haluttu pikseliformaatti. Tämä voi olla sama kuin alkuperäisessä VideoFrame-oliossa tai eri formaatti (esim. muunnos YUV:sta RGB:hen).
• codedWidth ja codedHeight: Videokehyksen leveys ja korkeus pikseleinä.
• layout: Taulukko olioita, jotka kuvaavat kunkin tason asettelun muistissa. Jokainen taulukon olio määrittää:
• offset: Siirtymä tavuina datapuskurin alusta tason datan alkuun.
• stride: Tavujen määrä kunkin rivin alun välillä tasossa. Tämä on ratkaisevan tärkeää täytteen käsittelyssä.

Katsotaan esimerkkiä YUV420 VideoFrame -olion kopioimisesta raakapuskuriin:

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

  // YUV420 has 3 planes: Y, U, and 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(); // Important to release resources
}

Selitys:

• Laskemme kunkin tason koon width- ja height-arvojen perusteella. Y on täydellä resoluutiolla, kun taas U ja V on alinäytteistetty (4:2:0).
• layout-taulukko määrittelee muistiasettelun. offset määrittää, mistä kukin taso alkaa puskurissa, ja stride määrittää, kuinka monta tavua on hypättävä päästäkseen seuraavalle riville kyseisessä tasossa.
• format-asetukseksi on määritetty 'I420', joka on yleinen YUV420-formaatti.
• On kriittistä, että kopioinnin jälkeen kutsutaan videoFrame.close() resurssien vapauttamiseksi.

Pikseliformaatit: Mahdollisuuksien maailma

Pikseliformaattien ymmärtäminen on olennaista VideoFrame-tasojen kanssa työskenneltäessä. VideoPixelFormat määrittelee, miten väritieto on koodattu videokehyksen sisällä. Tässä on joitakin yleisiä pikseliformaatteja, joihin saatat törmätä:

• I420 (YUV420p): Planar YUV-formaatti, jossa Y-, U- ja V-komponentit tallennetaan erillisiin tasoihin. U ja V on alinäytteistetty kertoimella 2 sekä vaaka- että pystysuunnassa. Se on erittäin yleinen ja tehokas formaatti.
• NV12 (YUV420sp): Semi-planar YUV-formaatti, jossa Y tallennetaan yhteen tasoon ja U- ja V-komponentit ovat lomitettuina toisessa tasossa.
• RGBA: Punainen, vihreä, sininen ja alfa-komponentit tallennetaan yhteen tasoon, tyypillisesti 8 bitillä per komponentti (32 bittiä per pikseli). Komponenttien järjestys voi vaihdella (esim. BGRA).
• RGB565: Punainen, vihreä ja sininen komponentit tallennetaan yhteen tasoon, jossa on 5 bittiä punaiselle, 6 bittiä vihreälle ja 5 bittiä siniselle (16 bittiä per pikseli).
• GRAYSCALE: Edustaa harmaasävykuvia yhdellä luma-arvolla (kirkkaus) kutakin pikseliä kohti.

VideoFrame.format-ominaisuus kertoo annetun kehyksen pikseliformaatin. Muista tarkistaa tämä ominaisuus ennen kuin yrität käyttää tasoja. Voit tarkistaa tuettujen formaattien täydellisen luettelon WebCodecs-spesifikaatiosta.

Käytännön sovellukset

VideoFrame-tasojen käyttö avaa laajan valikoiman mahdollisuuksia edistyneeseen videonkäsittelyyn selaimessa. Tässä on joitakin esimerkkejä:

1. Reaaliaikaiset videoefektit

Voit soveltaa reaaliaikaisia videoefektejä manipuloimalla pikselidataa VideoFrame-oliossa. Voit esimerkiksi toteuttaa harmaasävysuodattimen laskemalla RGBA-kehyksen kunkin pikselin R-, G- ja B-komponenttien keskiarvon ja asettamalla sitten kaikki kolme komponenttia tähän keskiarvoon. Voisit myös luoda seepiasävyefektin tai säätää kirkkautta ja kontrastia.

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;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. Konenäkösovellukset

VideoFrame-tasot tarjoavat suoran pääsyn pikselidataan, jota tarvitaan konenäkötehtävissä. Voit käyttää tätä dataa toteuttaaksesi algoritmeja esineentunnistukseen, kasvojentunnistukseen, liikkeenseurantaan ja muuhun. Voit hyödyntää WebAssemblya koodisi suorituskykykriittisissä osissa.

Voit esimerkiksi muuntaa värillisen VideoFrame-olion harmaasävyiseksi ja soveltaa sitten reunantunnistusalgoritmia (esim. Sobel-operaattori) reunojen tunnistamiseksi kuvasta. Tätä voitaisiin käyttää esikäsittelyvaiheena esineentunnistuksessa.

3. Videoeditointi ja kompositointi

Voit käyttää VideoFrame-tasoja toteuttaaksesi videoeditointiominaisuuksia, kuten rajausta, skaalausta, kiertoa ja kompositointia. Manipuloimalla pikselidataa suoraan voit luoda mukautettuja siirtymiä ja tehosteita.

Voit esimerkiksi rajata VideoFrame-olion kopioimalla vain osan pikselidatasta uuteen VideoFrame-olioon. Sinun tulisi säätää layout-asetuksen siirtymiä ja askelpituuksia vastaavasti.

4. Mukautetut koodekit ja transkoodaus

Vaikka WebCodecs tarjoaa sisäänrakennetun tuen yleisille koodekeille, kuten AV1, VP9 ja H.264, voit myös käyttää sitä mukautettujen koodekkien tai transkoodausputkien toteuttamiseen. Sinun tulisi itse hoitaa koodaus- ja purkuprosessi, mutta VideoFrame-tasot antavat sinun käyttää ja manipuloida raakaa pikselidataa. Tämä voi olla hyödyllistä erikoisille videoformaateille tai erityisille koodausvaatimuksille.

5. Edistynyt analytiikka

Käsittelemällä taustalla olevaa pikselidataa voit suorittaa syvällistä analyysia videosisällöstä. Tämä sisältää tehtäviä, kuten kohtauksen keskimääräisen kirkkauden mittaamisen, hallitsevien värien tunnistamisen tai muutosten havaitsemisen kohtauksen sisällössä. Tämä voi mahdollistaa edistyneitä videoanalytiikkasovelluksia turvallisuuteen, valvontaan tai sisältöanalyysiin.

Työskentely Canvasin ja WebGL:n kanssa

Vaikka voit suoraan manipuloida pikselidataa VideoFrame-tasoissa, sinun on usein renderöitävä tulos näytölle. CanvasImageBitmap-rajapinta toimii siltana VideoFrame-olion ja <canvas>-elementin välillä. Voit luoda CanvasImageBitmap-olion VideoFrame-oliosta ja sitten piirtää sen canvakselle käyttämällä drawImage()-metodia.

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(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

Edistyneempää renderöintiä varten voit käyttää WebGL:ää. Voit ladata pikselidatan VideoFrame-tasoista WebGL-tekstuureihin ja käyttää sitten varjostimia (shadereita) tehosteiden ja muunnosten soveltamiseen. Tämä antaa sinun hyödyntää grafiikkasuoritinta (GPU) korkean suorituskyvyn videonkäsittelyyn.

Suorituskykyyn liittyviä huomioita

Raakapikselidatan kanssa työskentely voi olla laskennallisesti raskasta, joten on tärkeää ottaa huomioon suorituskyvyn optimointi. Tässä on muutamia vinkkejä:

• Minimoi kopioinnit: Vältä tarpeetonta pikselidatan kopiointia. Yritä suorittaa operaatiot paikallaan aina kun mahdollista.
• Käytä WebAssemblya: Koodisi suorituskykykriittisissä osissa harkitse WebAssemblyn käyttöä. WebAssembly voi tarjota lähes natiivin suorituskyvyn laskennallisesti intensiivisille tehtäville.
• Optimoi muistiasettelu: Valitse oikea pikseliformaatti ja muistiasettelu sovelluksellesi. Harkitse pakattujen formaattien (esim. RGBA) käyttöä, jos sinun ei tarvitse usein käsitellä yksittäisiä värikomponentteja.
• Käytä OffscreenCanvasia: Taustakäsittelyä varten käytä OffscreenCanvasia välttääksesi pääsäikeen tukkimista.
• Profiloi koodisi: Käytä selaimen kehittäjätyökaluja koodisi profilointiin ja suorituskyvyn pullonkaulojen tunnistamiseen.

Selainyhteensopivuus

WebCodecs ja VideoFrame-API ovat tuettuja useimmissa nykyaikaisissa selaimissa, mukaan lukien Chrome, Firefox ja Safari. Tuen taso voi kuitenkin vaihdella selainversion ja käyttöjärjestelmän mukaan. Tarkista uusimmat selainyhteensopivuustaulukot sivustoilta, kuten MDN Web Docs, varmistaaksesi, että käyttämäsi ominaisuudet ovat tuettuja kohdeselaimissasi. Selainten välisen yhteensopivuuden varmistamiseksi suositellaan ominaisuuksien tunnistamista (feature detection).

Yleiset sudenkuopat ja vianmääritys

Tässä on joitakin yleisiä sudenkuoppia, joita kannattaa välttää työskennellessäsi VideoFrame-tasojen kanssa:

• Väärä asettelu: Varmista, että layout-taulukko kuvaa tarkasti pikselidatan muistiasettelun. Väärät siirtymät tai askelpituudet voivat johtaa vioittuneisiin kuviin.
• Yhteensopimattomat pikseliformaatit: Varmista, että copyTo-metodissa määrittämäsi pikseliformaatti vastaa VideoFrame-olion todellista formaattia.
• Muistivuodot: Sulje aina VideoFrame- ja CanvasImageBitmap-oliot, kun olet valmis niiden kanssa, vapauttaaksesi niiden varaamat resurssit. Tämän laiminlyönti voi johtaa muistivuotoihin.
• Asynkroniset operaatiot: Muista, että copyTo on asynkroninen operaatio. Käytä await-avainsanaa varmistaaksesi, että kopiointitoiminto on valmis, ennen kuin käsittelet pikselidataa.
• Turvallisuusrajoitukset: Ole tietoinen turvallisuusrajoituksista, joita voidaan soveltaa, kun käsitellään pikselidataa eri alkuperää olevista videoista (cross-origin).

Esimerkki: YUV-RGB-muunnos

Tarkastellaan monimutkaisempaa esimerkkiä: YUV420 VideoFrame -olion muuntaminen RGB VideoFrame -olioksi. Tämä sisältää Y-, U- ja V-tasojen lukemisen, niiden muuntamisen RGB-arvoiksi ja sitten uuden RGB VideoFrame -olion luomisen.

Tämä muunnos voidaan toteuttaa seuraavalla kaavalla:

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

Tässä on koodi:

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(); // Release original frame
  return newFrame;
}

Tämä esimerkki osoittaa VideoFrame-tasojen kanssa työskentelyn tehokkuuden ja monimutkaisuuden. Se vaatii hyvää ymmärrystä pikseliformaateista, muistiasettelusta ja väriavaruusmuunnoksista.

Yhteenveto

WebCodecsin VideoFrame-taso-API avaa uuden tason hallintaa videonkäsittelyyn selaimessa. Ymmärtämällä, miten pikselidataa käytetään ja manipuloidaan suoraan, voit luoda edistyneitä sovelluksia reaaliaikaisiin videoefekteihin, konenäköön, videoeditointiin ja muuhun. Vaikka VideoFrame-tasojen kanssa työskentely voi olla haastavaa, mahdolliset hyödyt ovat merkittäviä. WebCodecsin kehittyessä siitä tulee epäilemättä olennainen työkalu median parissa työskenteleville verkkokehittäjille.

Kannustamme sinua kokeilemaan VideoFrame-taso-APIa ja tutkimaan sen ominaisuuksia. Ymmärtämällä taustalla olevat periaatteet ja soveltamalla parhaita käytäntöjä voit luoda innovatiivisia ja suorituskykyisiä videosovelluksia, jotka rikkovat selaimessa mahdollisten asioiden rajoja.

Lisätietoa

• MDN Web Docs WebCodecsista
• WebCodecs-spesifikaatio
• WebCodecs-esimerkkikoodivarastot GitHubissa.