WebCodecs VideoFrame'i Tasand: Sügavuti Videokaadri Andmetele Juurdepääsuga

WebCodecs kujutab endast paradigma muutust veebipõhises meediatöötluses. See pakub madala taseme juurdepääsu meedia ehituskividele, võimaldades arendajatel luua keerukaid rakendusi otse brauseris. Üks WebCodecsi võimsamaid funktsioone on VideoFrame objekt ja selle sees olevad VideoFrame'i tasandid, mis paljastavad videokaadrite toorpikslite andmed. See artikkel pakub põhjalikku juhendit VideoFrame'i tasandite mõistmiseks ja kasutamiseks täiustatud video manipuleerimisel.

VideoFrame'i Objekti Mõistmine

Enne tasanditesse süvenemist vaatame üle VideoFrame'i objekti enda. VideoFrame esindab ühte videokaadrit. See kapseldab dekodeeritud (või kodeeritud) videoandmed koos seotud metaandmetega nagu ajatempel, kestus ja vorminguteave. VideoFrame API pakub meetodeid:

• Pikslite andmete lugemine: Siin tulevad mängu tasandid.
• Kaadrite kopeerimine: Uute VideoFrame'i objektide loomine olemasolevatest.
• Kaadrite sulgemine: Kaadri all olevate ressursside vabastamine.

VideoFrame'i objekt luuakse dekodeerimisprotsessi käigus, tavaliselt VideoDecoder'i poolt, või käsitsi kohandatud kaadri loomisel.

Mis on VideoFrame'i Tasandid?

VideoFrame'i piksliandmed on sageli organiseeritud mitmeks tasandiks, eriti vormingutes nagu YUV. Iga tasand esindab pildi erinevat komponenti. Näiteks YUV420 vormingus on kolm tasandit:

• Y (Luma): Esindab pildi heledust (luminantsi). See tasand sisaldab hallskaala teavet.
• U (Cb): Esindab sinise erinevuse krooma komponenti.
• V (Cr): Esindab punase erinevuse krooma komponenti.

RGB-vormingud, kuigi pealtnäha lihtsamad, võivad samuti mõnel juhul kasutada mitut tasandit. Tasandite arv ja nende tähendus sõltub täielikult VideoFrame'i VideoPixelFormat'ist.

Tasandite kasutamise eelis on see, et see võimaldab tõhusat juurdepääsu ja spetsiifiliste värvikomponentide manipuleerimist. Näiteks võiksite soovida reguleerida ainult heledust (Y-tasand) ilma värvi (U- ja V-tasandid) mõjutamata.

Juurdepääs VideoFrame'i Tasanditele: API

VideoFrame API pakub järgmisi meetodeid tasandi andmetele juurdepääsuks:

• copyTo(destination, options): Kopeerib VideoFrame'i sisu sihtkohta, mis võib olla teine VideoFrame, CanvasImageBitmap või ArrayBufferView. options objekt kontrollib, milliseid tasandeid ja kuidas kopeeritakse. See on peamine mehhanism tasanditele juurdepääsuks.

options objekt copyTo meetodis võimaldab teil määrata videokaadri andmete paigutuse ja sihtmärgi. Peamised omadused hõlmavad:

• format: Kopeeritud andmete soovitud pikslivorming. See võib olla sama mis algsel VideoFrame'il või erinev vorming (nt YUV-st RGB-ks teisendamine).
• codedWidth ja codedHeight: Videokaadri laius ja kõrgus pikslites.
• layout: Objektide massiiv, mis kirjeldab iga tasandi paigutust mälus. Iga objekt massiivis määrab:
• offset: Nihe baitides andmepuhvri algusest tasandi andmete alguseni.
• stride: Baitide arv iga rea alguse vahel tasandil. See on oluline polsterduse käsitlemiseks.

Vaatame näidet YUV420 VideoFrame'i kopeerimisest toorpuhvrisse:

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

  // YUV420-l on 3 tasandit: Y, U ja V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

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

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

  videoFrame.close(); // Oluline ressursside vabastamiseks
}

Selgitus:

• Arvutame iga tasandi suuruse width ja height põhjal. Y on täisresolutsiooniga, samas kui U ja V on aladiskreeditud (4:2:0).
• layout massiiv määratleb mälu paigutuse. offset määrab, kust iga tasand puhvris algab, ja stride määrab baitide arvu, mida tuleb hüpata, et jõuda selle tasandi järgmise reani.
• format suvand on seatud väärtusele 'I420', mis on levinud YUV420 vorming.
• Kriitiliselt oluline on, et pärast kopeerimist kutsutakse ressursside vabastamiseks välja videoFrame.close().

Pikslivormingud: Võimaluste Maailm

Pikslivormingute mõistmine on VideoFrame'i tasanditega töötamisel hädavajalik. VideoPixelFormat määratleb, kuidas värviteave on videokaadris kodeeritud. Siin on mõned levinumad pikslivormingud, millega võite kokku puutuda:

• I420 (YUV420p): Planaarne YUV-vorming, kus Y, U ja V komponendid on salvestatud eraldi tasanditesse. U ja V on nii horisontaalses kui ka vertikaalses mõõtmes aladiskreeditud teguriga 2. See on väga levinud ja tõhus vorming.
• NV12 (YUV420sp): Poolplanaarne YUV-vorming, kus Y on salvestatud ühte tasandisse ning U ja V komponendid on põimitud teise tasandisse.
• RGBA: Punane, roheline, sinine ja alfa komponendid on salvestatud ühte tasandisse, tavaliselt 8 bitti komponendi kohta (32 bitti piksli kohta). Komponentide järjekord võib varieeruda (nt BGRA).
• RGB565: Punane, roheline ja sinine komponendid on salvestatud ühte tasandisse 5 bitiga punase, 6 bitiga rohelise ja 5 bitiga sinise jaoks (16 bitti piksli kohta).
• GRAYSCALE: Esindab hallskaala pilte ühe luma (heleduse) väärtusega iga piksli kohta.

VideoFrame.format omadus ütleb teile antud kaadri pikslivormingu. Kontrollige kindlasti seda omadust enne tasanditele juurdepääsu katsetamist. Toetatud vormingute täieliku loendi leiate WebCodecsi spetsifikatsioonist.

Praktilised Kasutusjuhud

Juurdepääs VideoFrame'i tasanditele avab laia valiku võimalusi täiustatud videotöötluseks brauseris. Siin on mõned näited:

1. Reaalajas Videoefektid

Saate rakendada reaalajas videoefekte, manipuleerides VideoFrame'i pikslite andmetega. Näiteks võiksite rakendada hallskaala filtri, arvutades RGBA-kaadri iga piksli R, G ja B komponentide keskmise ning seejärel seades kõik kolm komponenti sellele keskmisele väärtusele. Samuti võiksite luua seepia tooni efekti või reguleerida heledust ja kontrasti.

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;       // Punane
    rgba[i + 1] = gray;   // Roheline
    rgba[i + 2] = gray;   // Sinine
  }

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

  videoFrame.close(); // Vabastage algne kaader
  return newFrame;
}

2. Arvutinägemise Rakendused

VideoFrame'i tasandid pakuvad otsejuurdepääsu arvutinägemise ülesanneteks vajalikele piksliandmetele. Saate neid andmeid kasutada algoritmide rakendamiseks objektituvastuseks, näotuvastuseks, liikumise jälgimiseks ja muuks. Saate kasutada WebAssemblyt oma koodi jõudluskriitiliste osade jaoks.

Näiteks võiksite teisendada värvilise VideoFrame'i hallskaalaks ja seejärel rakendada servatuvastuse algoritmi (nt Sobeli operaatorit), et tuvastada pildil servi. Seda saaks kasutada eeltöötlusetapina objektituvastuseks.

3. Videomontaaž ja Kompositsioon

Saate kasutada VideoFrame'i tasandeid videomontaaži funktsioonide, nagu kärpimine, skaleerimine, pööramine ja kompositsioon, rakendamiseks. Pikslite andmeid otse manipuleerides saate luua kohandatud üleminekuid ja efekte.

Näiteks võiksite kärpida VideoFrame'i, kopeerides ainult osa piksliandmetest uude VideoFrame'i. Peaksite vastavalt kohandama layout'i nihkeid ja sammude pikkusi.

4. Kohandatud Kodekid ja Transkodeerimine

Kuigi WebCodecs pakub sisseehitatud tuge levinud kodekitele nagu AV1, VP9 ja H.264, saate seda kasutada ka kohandatud kodekite või transkodeerimise konveierite rakendamiseks. Peaksite ise tegelema kodeerimise ja dekodeerimise protsessiga, kuid VideoFrame'i tasandid võimaldavad teil juurde pääseda ja manipuleerida toorpikslite andmetega. See võib olla kasulik nišivideovormingute või spetsialiseeritud kodeerimisnõuete jaoks.

5. Täiustatud Analüütika

Aluseks olevatele piksliandmetele juurde pääsedes saate teostada videosi sisu süvaanalüüsi. See hõlmab ülesandeid nagu stseeni keskmise heleduse mõõtmine, domineerivate värvide tuvastamine või stseeni sisu muutuste tuvastamine. See võib võimaldada täiustatud videoanalüütika rakendusi turvalisuse, jälgimise või sisu analüüsi jaoks.

Töötamine Canvas'e ja WebGL'iga

Kuigi saate otse manipuleerida piksliandmeid VideoFrame'i tasandites, peate sageli tulemuse ekraanile renderdama. CanvasImageBitmap liides pakub silda VideoFrame'i ja <canvas> elemendi vahel. Saate luua CanvasImageBitmap'i VideoFrame'ist ja seejärel joonistada selle lõuendile, kasutades drawImage() meetodit.

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(); // Vabastage bitmap'i ressursid
  videoFrame.close(); // Vabastage VideoFrame'i ressursid
}

Täiustatumaks renderdamiseks saate kasutada WebGL-i. Saate laadida piksliandmed VideoFrame'i tasanditest WebGL-i tekstuuridesse ja seejärel kasutada varjutajaid efektide ja teisenduste rakendamiseks. See võimaldab teil kasutada GPU-d suure jõudlusega videotöötluseks.

Jõudlusega Seotud Kaalutlused

Toorpikslite andmetega töötamine võib olla arvutusmahukas, seega on oluline arvestada jõudluse optimeerimisega. Siin on mõned näpunäited:

• Minimeerige kopeerimisi: Vältige piksliandmete tarbetut kopeerimist. Proovige teostada toiminguid võimaluse korral kohapeal.
• Kasutage WebAssemblyt: Oma koodi jõudluskriitiliste osade jaoks kaaluge WebAssembly kasutamist. WebAssembly suudab pakkuda peaaegu natiivset jõudlust arvutusmahukate ülesannete jaoks.
• Optimeerige mälu paigutust: Valige oma rakenduse jaoks õige pikslivorming ja mälu paigutus. Kaaluge pakitud vormingute (nt RGBA) kasutamist, kui te ei pea sageli üksikutele värvikomponentidele juurde pääsema.
• Kasutage OffscreenCanvast: Taustatöötluseks kasutage OffscreenCanvast, et vältida peamise lõime blokeerimist.
• Profileerige oma koodi: Kasutage brauseri arendaja tööriistu oma koodi profileerimiseks ja jõudluse kitsaskohtade tuvastamiseks.

Brauserite Ühilduvus

WebCodecs ja VideoFrame API on toetatud enamikus kaasaegsetes brauserites, sealhulgas Chrome, Firefox ja Safari. Siiski võib toe tase erineda sõltuvalt brauseri versioonist ja operatsioonisüsteemist. Kontrollige uusimaid brauserite ühilduvustabeleid saitidelt nagu MDN Web Docs, et veenduda, et teie kasutatavad funktsioonid on teie sihtbrauserites toetatud. Brauseriteülese ühilduvuse tagamiseks on soovitatav funktsioonide tuvastamine.

Levinud Lõksud ja Tõrkeotsing

Siin on mõned levinud lõksud, mida vältida VideoFrame'i tasanditega töötamisel:

• Vale paigutus: Veenduge, et layout massiiv kirjeldab täpselt piksliandmete mälu paigutust. Valed nihked või sammude pikkused võivad põhjustada rikutud pilte.
• Mittevastavad pikslivormingud: Veenduge, et pikslivorming, mille te copyTo meetodis määrate, vastab VideoFrame'i tegelikule vormingule.
• Mälulekked: Sulgege alati VideoFrame ja CanvasImageBitmap objektid pärast nende kasutamise lõpetamist, et vabastada aluseks olevad ressursid. Selle tegemata jätmine võib põhjustada mälulekkeid.
• Asünkroonsed toimingud: Pidage meeles, et copyTo on asünkroonne toiming. Kasutage await, et tagada kopeerimisoperatsiooni lõpuleviimine enne piksliandmetele juurdepääsu.
• Turvapiirangud: Olge teadlik turvapiirangutest, mis võivad kehtida piksliandmetele juurdepääsemisel ristpäritoluga videotest.

Näide: YUV-st RGB-ks Teisendamine

Vaatleme keerukamat näidet: YUV420 VideoFrame'i teisendamine RGB VideoFrame'iks. See hõlmab Y, U ja V tasandite lugemist, nende teisendamist RGB väärtusteks ja seejärel uue RGB VideoFrame'i loomist.

Seda teisendust saab rakendada järgmise valemi abil:

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

Siin on kood:

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

  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(); // Vabastage algne kaader
  return newFrame;
}

See näide demonstreerib VideoFrame'i tasanditega töötamise võimsust ja keerukust. See nõuab head arusaamist pikslivormingutest, mälu paigutusest ja värviruumide teisendustest.

Kokkuvõte

VideoFrame'i tasandi API WebCodecsis avab uue kontrollitaseme videotöötluses brauseris. Mõistes, kuidas otse piksliandmetele juurde pääseda ja neid manipuleerida, saate luua täiustatud rakendusi reaalajas videoefektide, arvutinägemise, videomontaaži ja muu jaoks. Kuigi VideoFrame'i tasanditega töötamine võib olla väljakutsuv, on potentsiaalsed hüved märkimisväärsed. Kuna WebCodecs areneb edasi, saab sellest kahtlemata oluline tööriist meediaga töötavatele veebiarendajatele.

Soovitame teil katsetada VideoFrame'i tasandi API-ga ja uurida selle võimekusi. Mõistes aluspõhimõtteid ja rakendades parimaid tavasid, saate luua uuenduslikke ja jõudsaid videorakendusi, mis nihutavad brauseris võimaliku piire.

Lisalugemist

• MDN Web Docs WebCodecsi kohta
• WebCodecsi spetsifikatsioon
• WebCodecsi näidiskoodi repositooriumid GitHubis.