WebCodecs VideoFrame sík: Mélyreható betekintés a videóképkocka-adatok elérésébe

A WebCodecs paradigmaváltást jelent a webalapú médiafeldolgozásban. Alacsony szintű hozzáférést biztosít a média építőköveihez, lehetővé téve a fejlesztők számára, hogy kifinomult alkalmazásokat hozzanak létre közvetlenül a böngészőben. A WebCodecs egyik leghatékonyabb funkciója a VideoFrame objektum, és ezen belül a VideoFrame síkok, amelyek a videóképkockák nyers pixeladatait teszik elérhetővé. Ez a cikk átfogó útmutatót nyújt a VideoFrame síkok megértéséhez és felhasználásához a fejlett videómanipulációhoz.

A VideoFrame objektum megértése

Mielőtt belemerülnénk a síkokba, ismételjük át magát a VideoFrame objektumot. Egy VideoFrame egyetlen videóképkockát képvisel. Magába foglalja a dekódolt (vagy kódolt) videóadatokat, valamint a hozzájuk tartozó metaadatokat, mint az időbélyeg, időtartam és formátuminformációk. A VideoFrame API a következőkre kínál metódusokat:

• Pixeladatok olvasása: Itt jönnek képbe a síkok.
• Képkockák másolása: Új VideoFrame objektumok létrehozása meglévőkből.
• Képkockák lezárása: A képkocka által lefoglalt erőforrások felszabadítása.

A VideoFrame objektum a dekódolási folyamat során jön létre, általában egy VideoDecoder által, vagy manuálisan, egyedi képkocka létrehozásakor.

Mik azok a VideoFrame síkok?

Egy VideoFrame pixeladatai gyakran több síkba vannak rendezve, különösen az YUV-hoz hasonló formátumokban. Minden sík a kép egy másik komponensét képviseli. Például egy YUV420 formátumban három sík van:

• Y (Luma): A kép fényerejét (luminancia) képviseli. Ez a sík tartalmazza a szürkeárnyalatos információt.
• U (Cb): A kék-különbségi színkomponenst (kroma) képviseli.
• V (Cr): A vörös-különbségi színkomponenst (kroma) képviseli.

Az RGB formátumok, bár látszólag egyszerűbbek, bizonyos esetekben szintén használhatnak több síkot. A síkok száma és jelentésük teljes mértékben a VideoFrame VideoPixelFormat-jától függ.

A síkok használatának előnye, hogy lehetővé teszi a specifikus színkomponensek hatékony elérését és manipulálását. Például előfordulhat, hogy csak a fényerőt (Y sík) szeretné módosítani anélkül, hogy a színt (U és V síkok) befolyásolná.

A VideoFrame síkok elérése: Az API

A VideoFrame API a következő metódusokat biztosítja a síkok adatainak eléréséhez:

• copyTo(destination, options): A VideoFrame tartalmát egy célba másolja, amely lehet egy másik VideoFrame, egy CanvasImageBitmap vagy egy ArrayBufferView. Az options objektum szabályozza, hogy mely síkok és hogyan kerüljenek másolásra. Ez a síkok elérésének elsődleges mechanizmusa.

Az options objektum a copyTo metódusban lehetővé teszi, hogy meghatározza a videóképkocka adatainak elrendezését és célját. Kulcsfontosságú tulajdonságok:

• format: A másolt adatok kívánt pixelformátuma. Ez lehet ugyanaz, mint az eredeti VideoFrame formátuma, vagy egy másik formátum (pl. YUV-ból RGB-be konvertálás).
• codedWidth és codedHeight: A videóképkocka szélessége és magassága pixelekben.
• layout: Egy objektumokból álló tömb, amely leírja az egyes síkok memóriabeli elrendezését. A tömb minden objektuma meghatározza:
• offset: Az eltolás bájtban, az adatpuffer elejétől a sík adatainak kezdetéig.
• stride: A bájtok száma az egyes sorok kezdete között a síkban. Ez kulcsfontosságú a kitöltés (padding) kezeléséhez.

Nézzünk egy példát egy YUV420 VideoFrame nyers pufferbe másolására:

asynkron funkció copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // A YUV420 3 síkból áll: Y, U és V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

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

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

  videoFrame.close(); // Fontos az erőforrások felszabadítása
}

Magyarázat:

• Kiszámítjuk az egyes síkok méretét a width és height alapján. Az Y teljes felbontású, míg az U és V alulmintavételezett (4:2:0).
• A layout tömb definiálja a memóriakiosztást. Az offset megadja, hogy hol kezdődik az egyes sík a pufferben, a stride pedig azt, hogy hány bájtot kell ugrani a következő sorhoz az adott síkban.
• A format opció 'I420'-ra van állítva, ami egy gyakori YUV420 formátum.
• Kritikusan fontos, hogy a másolás után a videoFrame.close() meghívásra kerüljön az erőforrások felszabadítása érdekében.

Pixelformátumok: A lehetőségek világa

A pixelformátumok megértése elengedhetetlen a VideoFrame síkokkal való munkához. A VideoPixelFormat határozza meg, hogyan kódolódik a színinformáció a videóképkockán belül. Íme néhány gyakori pixelformátum, amellyel találkozhat:

• I420 (YUV420p): Egy síkbeli (planar) YUV formátum, ahol az Y, U és V komponensek külön síkokban tárolódnak. Az U és V komponensek mind vízszintes, mind függőleges irányban 2-es faktorral alulmintavételezettek. Ez egy nagyon gyakori és hatékony formátum.
• NV12 (YUV420sp): Egy félsíkbeli (semi-planar) YUV formátum, ahol az Y egy síkban, az U és V komponensek pedig összefésülve egy második síkban tárolódnak.
• RGBA: A vörös, zöld, kék és alfa komponensek egyetlen síkban tárolódnak, jellemzően 8 bittel komponensenként (32 bit pixelenként). A komponensek sorrendje változhat (pl. BGRA).
• RGB565: A vörös, zöld és kék komponensek egyetlen síkban tárolódnak 5 bittel a vörös, 6 bittel a zöld és 5 bittel a kék számára (16 bit pixelenként).
• GRAYSCALE: Szürkeárnyalatos képeket reprezentál, minden pixelhez egyetlen luma (fényerő) értékkel.

A VideoFrame.format tulajdonság megmondja egy adott képkocka pixelformátumát. Mielőtt megpróbálná elérni a síkokat, mindenképpen ellenőrizze ezt a tulajdonságot. A támogatott formátumok teljes listáját a WebCodecs specifikációjában találja.

Gyakorlati felhasználási esetek

A VideoFrame síkok elérése számos lehetőséget nyit meg a fejlett videófeldolgozás számára a böngészőben. Íme néhány példa:

1. Valós idejű videóeffektek

Valós idejű videóeffekteket alkalmazhat a VideoFrame pixeladatainak manipulálásával. Például implementálhat egy szürkeárnyalatos szűrőt úgy, hogy átlagolja egy RGBA képkocka minden pixelének R, G és B komponensét, majd mindhárom komponenst erre az átlagértékre állítja. Létrehozhat szépia tónusú effektet, vagy beállíthatja a fényerőt és a kontrasztot is.

asynkron funkció 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;       // Vörös
    rgba[i + 1] = gray;   // Zöld
    rgba[i + 2] = gray;   // Kék
  }

  // Új VideoFrame létrehozása a módosított adatokból.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Eredeti képkocka felszabadítása
  return newFrame;
}

2. Gépi látás alkalmazások

A VideoFrame síkok közvetlen hozzáférést biztosítanak a gépi látási feladatokhoz szükséges pixeladatokhoz. Ezeket az adatokat felhasználhatja objektumfelismerési, arcfelismerési, mozgáskövetési és egyéb algoritmusok implementálásához. A kód teljesítménykritikus részeihez használhatja a WebAssembly-t.

Például egy színes VideoFrame-et szürkeárnyalatossá konvertálhat, majd egy élfelismerő algoritmust (pl. Sobel-operátor) alkalmazhat a képen lévő élek azonosítására. Ez előfeldolgozási lépésként használható az objektumfelismeréshez.

3. Videószerkesztés és kompozitálás

A VideoFrame síkokat használhatja videószerkesztési funkciók, például vágás, méretezés, forgatás és kompozitálás implementálásához. A pixeladatok közvetlen manipulálásával egyedi átmeneteket és effekteket hozhat létre.

Például egy VideoFrame-et megvághat úgy, hogy csak a pixeladatok egy részét másolja át egy új VideoFrame-be. Ehhez megfelelően kell módosítania a layout eltolásait és lépésközeit.

4. Egyedi kodekek és átkódolás

Bár a WebCodecs beépített támogatást nyújt olyan gyakori kodekekhez, mint az AV1, VP9 és H.264, használhatja egyedi kodekek vagy átkódolási folyamatok implementálására is. A kódolási és dekódolási folyamatot saját magának kell kezelnie, de a VideoFrame síkok lehetővé teszik a nyers pixeladatok elérését és manipulálását. Ez hasznos lehet réspiacot célzó videóformátumok vagy speciális kódolási követelmények esetén.

5. Fejlett analitika

Az alapul szolgáló pixeladatok elérésével mélyrehatóan elemezheti a videótartalmat. Ez magában foglal olyan feladatokat, mint egy jelenet átlagos fényerejének mérése, a domináns színek azonosítása vagy a jelenet tartalmában bekövetkező változások észlelése. Ez lehetővé teszi fejlett videóanalitikai alkalmazások létrehozását biztonsági, megfigyelési vagy tartalomelemzési célokra.

Munka a Canvasszal és a WebGL-lel

Bár közvetlenül manipulálhatja a pixeladatokat a VideoFrame síkokban, gyakran szükség van az eredmény képernyőre renderelésére. A CanvasImageBitmap interfész hidat képez a VideoFrame és a <canvas> elem között. Létrehozhat egy CanvasImageBitmap-et egy VideoFrame-ből, majd a drawImage() metódussal a vászonra rajzolhatja.

asynkron funkció renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Bitmap erőforrások felszabadítása
  videoFrame.close(); // VideoFrame erőforrások felszabadítása
}

Fejlettebb rendereléshez használhatja a WebGL-t. Feltöltheti a pixeladatokat a VideoFrame síkokból a WebGL textúrákba, majd shadereket használhat effektek és transzformációk alkalmazására. Ez lehetővé teszi a GPU kihasználását a nagy teljesítményű videófeldolgozáshoz.

Teljesítménnyel kapcsolatos megfontolások

A nyers pixeladatokkal való munka számításigényes lehet, ezért kulcsfontosságú a teljesítményoptimalizálás figyelembevétele. Íme néhány tipp:

• Minimalizálja a másolásokat: Kerülje a pixeladatok felesleges másolását. Amikor csak lehetséges, próbálja meg a műveleteket helyben elvégezni.
• Használjon WebAssembly-t: A kód teljesítménykritikus részeihez fontolja meg a WebAssembly használatát. A WebAssembly közel natív teljesítményt nyújthat a számításigényes feladatokhoz.
• Optimalizálja a memóriakiosztást: Válassza ki az alkalmazásához megfelelő pixelformátumot és memóriakiosztást. Fontolja meg a tömörített formátumok (pl. RGBA) használatát, ha nincs szüksége az egyes színkomponensek gyakori elérésére.
• Használjon OffscreenCanvas-t: A háttérfeldolgozáshoz használjon OffscreenCanvas-t, hogy elkerülje a fő szál blokkolását.
• Profilozza a kódját: Használja a böngésző fejlesztői eszközeit a kód profilozásához és a teljesítménybeli szűk keresztmetszetek azonosításához.

Böngészőkompatibilitás

A WebCodecs és a VideoFrame API a legtöbb modern böngészőben támogatott, beleértve a Chrome-ot, a Firefoxot és a Safarit. A támogatás szintje azonban változhat a böngésző verziójától és az operációs rendszertől függően. Ellenőrizze a legfrissebb böngészőkompatibilitási táblázatokat olyan oldalakon, mint az MDN Web Docs, hogy megbizonyosodjon arról, hogy a használt funkciók támogatottak a célböngészőkben. A böngészők közötti kompatibilitás érdekében a funkcióészlelés (feature detection) ajánlott.

Gyakori buktatók és hibaelhárítás

Íme néhány gyakori buktató, amelyet érdemes elkerülni a VideoFrame síkokkal való munka során:

• Helytelen elrendezés: Győződjön meg arról, hogy a layout tömb pontosan leírja a pixeladatok memóriakiosztását. A helytelen eltolások vagy lépésközök sérült képekhez vezethetnek.
• Nem egyező pixelformátumok: Győződjön meg arról, hogy a copyTo metódusban megadott pixelformátum megegyezik a VideoFrame tényleges formátumával.
• Memóriaszivárgás: Mindig zárja le a VideoFrame és CanvasImageBitmap objektumokat, miután végzett velük, hogy felszabadítsa az alapul szolgáló erőforrásokat. Ennek elmulasztása memóriaszivárgáshoz vezethet.
• Aszinkron műveletek: Ne feledje, hogy a copyTo egy aszinkron művelet. Használja az await-et, hogy biztosítsa a másolási művelet befejeződését, mielőtt hozzáférne a pixeladatokhoz.
• Biztonsági korlátozások: Legyen tisztában a biztonsági korlátozásokkal, amelyek a más eredetű (cross-origin) videókból származó pixeladatok elérésekor érvényesülhetnek.

Példa: YUV-ból RGB-be konvertálás

Nézzünk egy összetettebb példát: egy YUV420 VideoFrame átalakítása RGB VideoFrame-mé. Ez magában foglalja az Y, U és V síkok olvasását, RGB értékekké konvertálását, majd egy új RGB VideoFrame létrehozását.

Ez a konverzió a következő képlettel valósítható meg:

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

Itt a kód:

asynkron funkció 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 sík
    { offset: yPlaneSize, stride: width / 2 }, // U sík
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V sík
  ];

  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; // Alfa
    }
  }

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

  videoFrame.close(); // Eredeti képkocka felszabadítása
  return newFrame;
}

Ez a példa bemutatja a VideoFrame síkokkal való munka erejét és összetettségét. Jó ismereteket igényel a pixelformátumokról, a memóriakiosztásról és a színtér-konverziókról.

Következtetés

A WebCodecs VideoFrame sík API új szintű vezérlést tesz lehetővé a videófeldolgozás felett a böngészőben. Annak megértésével, hogyan lehet közvetlenül hozzáférni és manipulálni a pixeladatokat, fejlett alkalmazásokat hozhat létre valós idejű videóeffektekhez, gépi látáshoz, videószerkesztéshez és még sok máshoz. Bár a VideoFrame síkokkal való munka kihívást jelenthet, a lehetséges jutalom jelentős. Ahogy a WebCodecs tovább fejlődik, kétségtelenül elengedhetetlen eszközzé válik a médiával dolgozó webfejlesztők számára.

Bátorítjuk Önt, hogy kísérletezzen a VideoFrame sík API-val és fedezze fel képességeit. Az alapelvek megértésével és a legjobb gyakorlatok alkalmazásával innovatív és nagy teljesítményű videóalkalmazásokat hozhat létre, amelyek feszegetik a böngészőben lehetséges határokat.

További tanulnivalók

• MDN Web Docs a WebCodecs-ról
• WebCodecs specifikáció
• WebCodecs mintakód gyűjtemények a GitHubon.