WebCodecs VideoFrame Plani: Video Kadr Ma'lumotlariga Kirishni Chuqur O'rganish

WebCodecs veb-asosidagi media qayta ishlashda paradigma o'zgarishini anglatadi. U ishlab chiquvchilarga murakkab ilovalarni to'g'ridan-to'g'ri brauzerda yaratish imkonini berib, media qurilish bloklariga past darajadagi kirishni ta'minlaydi. WebCodecs'ning eng kuchli xususiyatlaridan biri bu VideoFrame obyekti va uning ichida video kadrlarning xom piksel ma'lumotlarini ochib beruvchi VideoFrame planlaridir. Ushbu maqola ilg'or video manipulyatsiyasi uchun VideoFrame planlarini tushunish va ulardan foydalanish bo'yicha to'liq qo'llanmani taqdim etadi.

VideoFrame Obyektini Tushunish

Planlarga sho'ng'ishdan oldin, keling, VideoFrame obyektining o'zini eslab o'tamiz. VideoFrame videoning bitta kadrini ifodalaydi. U dekodlangan (yoki kodlangan) video ma'lumotlarini, shuningdek, vaqt belgisi, davomiyligi va format ma'lumotlari kabi bog'liq metama'lumotlarni o'z ichiga oladi. VideoFrame API quyidagi usullarni taklif qiladi:

• Piksel ma'lumotlarini o'qish: Bu yerda planlar ishga tushadi.
• Kadrlarni nusxalash: Mavjudlaridan yangi VideoFrame obyektlarini yaratish.
• Kadrlarni yopish: Kadr tomonidan ushlab turilgan asosiy resurslarni bo'shatish.

VideoFrame obyekti dekodlash jarayonida, odatda VideoDecoder tomonidan yoki maxsus kadr yaratilganda qo'lda yaratiladi.

VideoFrame Planlari Nima?

VideoFrame'ning piksel ma'lumotlari ko'pincha bir nechta planlarga, ayniqsa YUV kabi formatlarda, tashkil etilgan bo'ladi. Har bir plan tasvirning turli komponentini ifodalaydi. Masalan, YUV420 formatida uchta plan mavjud:

• Y (Luma): Tasvirning yorqinligini (luminans) ifodalaydi. Ushbu plan kulrang tusdagi ma'lumotlarni o'z ichiga oladi.
• U (Cb): Moviy-farq xroma komponentini ifodalaydi.
• V (Cr): Qizil-farq xroma komponentini ifodalaydi.

RGB formatlari, garchi soddaroq ko'rinsa ham, ba'zi hollarda bir nechta planlardan foydalanishi mumkin. Planlar soni va ularning ma'nosi to'liq VideoFrame'ning VideoPixelFormat'iga bog'liq.

Planlardan foydalanishning afzalligi shundaki, u ma'lum rang komponentlariga samarali kirish va ularni boshqarish imkonini beradi. Masalan, siz rangga (U va V planlari) ta'sir qilmasdan faqat yorqinlikni (Y plani) sozlashni xohlashingiz mumkin.

VideoFrame Planlariga Kirish: API

VideoFrame API plan ma'lumotlariga kirish uchun quyidagi usullarni taqdim etadi:

• copyTo(destination, options): VideoFrame tarkibini manzilga nusxalaydi, bu boshqa VideoFrame, CanvasImageBitmap yoki ArrayBufferView bo'lishi mumkin. options obyekti qaysi planlar va qanday nusxalanishini boshqaradi. Bu planlarga kirishning asosiy mexanizmidir.

copyTo metodidagi options obyekti sizga video kadr ma'lumotlari uchun joylashuv va maqsadni belgilash imkonini beradi. Asosiy xususiyatlar quyidagilardan iborat:

• format: Nusxalangan ma'lumotlarning kerakli piksel formati. Bu asl VideoFrame bilan bir xil yoki boshqa format bo'lishi mumkin (masalan, YUV dan RGB ga o'tkazish).
• codedWidth va codedHeight: Video kadrning piksellardagi kengligi va balandligi.
• layout: Har bir turning xotiradagi joylashuvini tavsiflovchi obyektlar massivi. Massivdagi har bir obyekt quyidagilarni belgilaydi:
• offset: Ma'lumotlar buferining boshidan plan ma'lumotlarining boshigacha bo'lgan baytlardagi siljish.
• stride: Plandagi har bir qatorning boshi orasidagi baytlar soni. Bu to'ldirishni (padding) boshqarish uchun juda muhim.

Keling, YUV420 VideoFrame'ni xom buferga nusxalash misolini ko'rib chiqaylik:

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

  // YUV420 da 3 ta plan bor: Y, U, va V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

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

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

  videoFrame.close(); // Resurslarni bo'shatish muhim
}

Tushuntirish:

• Biz har bir turning hajmini width va height asosida hisoblaymiz. Y to'liq o'lchamda, U va V esa pastga namuna olingan (4:2:0).
• layout massivi xotira joylashuvini belgilaydi. offset har bir turning buferda qayerdan boshlanishini, stride esa o'sha turdagi keyingi qatorga o'tish uchun sakrash kerak bo'lgan baytlar sonini belgilaydi.
• format opsiyasi 'I420' ga o'rnatilgan, bu keng tarqalgan YUV420 formatidir.
• Eng muhimi, nusxalashdan so'ng resurslarni bo'shatish uchun videoFrame.close() chaqiriladi.

Piksel Formatlari: Imkoniyatlar Dunyosi

VideoFrame planlari bilan ishlash uchun piksel formatlarini tushunish juda muhim. VideoPixelFormat rang ma'lumotlari video kadr ichida qanday kodlanganligini belgilaydi. Quyida siz duch kelishingiz mumkin bo'lgan ba'zi umumiy piksel formatlari keltirilgan:

• I420 (YUV420p): Y, U va V komponentlari alohida planlarda saqlanadigan planar YUV formati. U va V ham gorizontal, ham vertikal o'lchamlarda 2 baravar kamaytirilgan. Bu juda keng tarqalgan va samarali format.
• NV12 (YUV420sp): Y bir planda, U va V komponentlari esa ikkinchi planda aralash holda saqlanadigan yarim planar YUV formati.
• RGBA: Qizil, Yashil, Ko'k va Alfa komponentlari bitta planda saqlanadi, odatda har bir komponent uchun 8 bit (har bir piksel uchun 32 bit). Komponentlarning tartibi farq qilishi mumkin (masalan, BGRA).
• RGB565: Qizil, Yashil va Ko'k komponentlari bitta planda Qizil uchun 5 bit, Yashil uchun 6 bit va Ko'k uchun 5 bit bilan saqlanadi (har bir piksel uchun 16 bit).
• GRAYSCALE: Har bir piksel uchun bitta luma (yorqinlik) qiymatiga ega kulrang tusdagi tasvirlarni ifodalaydi.

VideoFrame.format xususiyati sizga berilgan kadrning piksel formatini aytib beradi. Planlarga kirishga urinishdan oldin ushbu xususiyatni tekshirib ko'ring. Qo'llab-quvvatlanadigan formatlarning to'liq ro'yxati uchun WebCodecs spetsifikatsiyasiga murojaat qilishingiz mumkin.

Amaliy Qo'llanilish Holatlari

VideoFrame planlariga kirish brauzerda ilg'or video qayta ishlash uchun keng imkoniyatlarni ochadi. Quyida ba'zi misollar keltirilgan:

1. Real Vaqtdagi Video Effektlar

Siz VideoFrame'dagi piksel ma'lumotlarini o'zgartirish orqali real vaqtdagi video effektlarni qo'llashingiz mumkin. Masalan, siz RGBA kadrining har bir pikselining R, G va B komponentlarini o'rtachasini olib, so'ngra barcha uch komponentni o'sha o'rtacha qiymatga o'rnatish orqali kulrang tus filtri joriy qilishingiz mumkin. Shuningdek, siz sepia ton effekti yaratishingiz yoki yorqinlik va kontrastni sozlashingiz mumkin.

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;       // Qizil
    rgba[i + 1] = gray;   // Yashil
    rgba[i + 2] = gray;   // Ko'k
  }

  // O'zgartirilgan ma'lumotlardan yangi VideoFrame yaratish.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Asl kadrni bo'shatish
  return newFrame;
}

2. Kompyuter Ko'rishi Ilovalari

VideoFrame planlari kompyuter ko'rishi vazifalari uchun zarur bo'lgan piksel ma'lumotlariga to'g'ridan-to'g'ri kirishni ta'minlaydi. Siz ushbu ma'lumotlardan obyektlarni aniqlash, yuzni tanib olish, harakatni kuzatish va boshqalar uchun algoritmlarni amalga oshirishda foydalanishingiz mumkin. Kodingizning ishlash uchun muhim qismlari uchun WebAssembly'dan foydalanishingiz mumkin.

Masalan, siz rangli VideoFrame'ni kulrang tusga o'tkazib, so'ngra tasvirdagi qirralarni aniqlash uchun qirralarni aniqlash algoritmini (masalan, Sobel operatori) qo'llashingiz mumkin. Bu obyektni tanib olish uchun oldindan ishlov berish bosqichi sifatida ishlatilishi mumkin.

3. Video Tahrirlash va Kompozitsiyalash

Siz VideoFrame planlaridan kesish, masshtablash, aylantirish va kompozitsiyalash kabi video tahrirlash xususiyatlarini amalga oshirish uchun foydalanishingiz mumkin. Piksel ma'lumotlarini to'g'ridan-to'g'ri boshqarish orqali siz maxsus o'tishlar va effektlar yaratishingiz mumkin.

Masalan, siz piksel ma'lumotlarining faqat bir qismini yangi VideoFrame'ga nusxalash orqali VideoFrame'ni kesishingiz mumkin. Buning uchun layout siljishlari va qadamlarini mos ravishda sozlashingiz kerak bo'ladi.

4. Maxsus Kodeklar va Transkodlash

WebCodecs AV1, VP9 va H.264 kabi umumiy kodeklarni o'rnatilgan holda qo'llab-quvvatlasa-da, siz uni maxsus kodeklar yoki transkodlash quvurlarini amalga oshirish uchun ham ishlatishingiz mumkin. Siz kodlash va dekodlash jarayonini o'zingiz boshqarishingiz kerak bo'ladi, lekin VideoFrame planlari sizga xom piksel ma'lumotlariga kirish va ularni boshqarish imkonini beradi. Bu maxsus video formatlari yoki ixtisoslashtirilgan kodlash talablari uchun foydali bo'lishi mumkin.

5. Ilg'or Analitika

Asosiy piksel ma'lumotlariga kirish orqali siz video kontentini chuqur tahlil qilishingiz mumkin. Bunga sahna o'rtacha yorqinligini o'lchash, dominant ranglarni aniqlash yoki sahna tarkibidagi o'zgarishlarni aniqlash kabi vazifalar kiradi. Bu xavfsizlik, kuzatuv yoki kontent tahlili uchun ilg'or video analitikasi ilovalarini yaratish imkonini beradi.

Canvas va WebGL bilan Ishlash

Siz VideoFrame planlaridagi piksel ma'lumotlarini to'g'ridan-to'g'ri boshqarishingiz mumkin bo'lsa-da, ko'pincha natijani ekranga chiqarish kerak bo'ladi. CanvasImageBitmap interfeysi VideoFrame va <canvas> elementi o'rtasida ko'prik vazifasini bajaradi. Siz VideoFrame'dan CanvasImageBitmap yaratishingiz va so'ngra uni drawImage() metodi yordamida canvasga chizishingiz mumkin.

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(); // Bitmap resurslarini bo'shatish
  videoFrame.close(); // VideoFrame resurslarini bo'shatish
}

Yanada ilg'or renderlash uchun siz WebGL'dan foydalanishingiz mumkin. Siz VideoFrame planlaridan piksel ma'lumotlarini WebGL teksturalariga yuklashingiz va so'ngra effektlar va o'zgartirishlarni qo'llash uchun sheyderlardan foydalanishingiz mumkin. Bu sizga yuqori samarali video qayta ishlash uchun GPU'dan foydalanish imkonini beradi.

Ishlash Samaradorligini Hisobga Olish

Xom piksel ma'lumotlari bilan ishlash hisoblash jihatidan intensiv bo'lishi mumkin, shuning uchun ishlash samaradorligini optimallashtirishni ko'rib chiqish juda muhim. Quyida ba'zi maslahatlar keltirilgan:

• Nusxalashni minimallashtirish: Piksel ma'lumotlarini keraksiz nusxalashdan saqlaning. Iloji boricha operatsiyalarni joyida bajarishga harakat qiling.
• WebAssembly'dan foydalaning: Kodingizning ishlash uchun muhim qismlari uchun WebAssembly'dan foydalanishni ko'rib chiqing. WebAssembly hisoblash jihatidan intensiv vazifalar uchun deyarli mahalliy ishlash samaradorligini ta'minlay oladi.
• Xotira joylashuvini optimallashtirish: Ilovangiz uchun to'g'ri piksel formati va xotira joylashuvini tanlang. Agar alohida rang komponentlariga tez-tez kirish kerak bo'lmasa, siqilgan formatlardan (masalan, RGBA) foydalanishni ko'rib chiqing.
• OffscreenCanvas'dan foydalaning: Fon rejimida qayta ishlash uchun asosiy ish zarrachasini bloklamaslik uchun OffscreenCanvas'dan foydalaning.
• Kodingizni profillang: Kodingizni profillash va ishlashdagi to'siqlarni aniqlash uchun brauzer ishlab chiquvchi vositalaridan foydalaning.

Brauzer Muvofiqligi

WebCodecs va VideoFrame API ko'pchilik zamonaviy brauzerlarda, jumladan Chrome, Firefox va Safari'da qo'llab-quvvatlanadi. Biroq, qo'llab-quvvatlash darajasi brauzer versiyasi va operatsion tizimga qarab farq qilishi mumkin. Siz foydalanayotgan xususiyatlar maqsadli brauzerlaringizda qo'llab-quvvatlanishiga ishonch hosil qilish uchun MDN Web Docs kabi saytlardagi so'nggi brauzer muvofiqligi jadvallarini tekshiring. Brauzerlararo muvofiqlik uchun xususiyatlarni aniqlash tavsiya etiladi.

Umumiy Xatolar va Muammolarni Bartaraf Etish

VideoFrame planlari bilan ishlashda oldini olish kerak bo'lgan ba'zi umumiy xatolar:

• Noto'g'ri joylashuv: layout massivi piksel ma'lumotlarining xotira joylashuvini aniq tavsiflashiga ishonch hosil qiling. Noto'g'ri siljishlar yoki qadamlar buzilgan tasvirlarga olib kelishi mumkin.
• Mos kelmaydigan piksel formatlari: copyTo metodida belgilagan piksel formatingiz VideoFrame'ning haqiqiy formatiga mos kelishiga ishonch hosil qiling.
• Xotira sizib chiqishi: Ishingiz tugagandan so'ng asosiy resurslarni bo'shatish uchun har doim VideoFrame va CanvasImageBitmap obyektlarini yoping. Buni qilmaslik xotira sizib chiqishiga olib kelishi mumkin.
• Asinxron operatsiyalar: copyTo asinxron operatsiya ekanligini unutmang. Piksel ma'lumotlariga kirishdan oldin nusxalash operatsiyasi yakunlanishiga ishonch hosil qilish uchun await'dan foydalaning.
• Xavfsizlik cheklovlari: Boshqa manbalardan olingan videolardan piksel ma'lumotlariga kirishda qo'llanilishi mumkin bo'lgan xavfsizlik cheklovlaridan xabardor bo'ling.

Misol: YUV dan RGB ga O'tkazish

Keling, murakkabroq misolni ko'rib chiqaylik: YUV420 VideoFrame'ni RGB VideoFrame'ga o'tkazish. Bu Y, U va V planlarini o'qish, ularni RGB qiymatlariga o'tkazish va so'ngra yangi RGB VideoFrame yaratishni o'z ichiga oladi.

Ushbu konvertatsiya quyidagi formula yordamida amalga oshirilishi mumkin:

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

Mana kod:

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

  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(); // Asl kadrni bo'shatish
  return newFrame;
}

Ushbu misol VideoFrame planlari bilan ishlashning kuchi va murakkabligini namoyish etadi. U piksel formatlari, xotira joylashuvi va ranglar fazosini o'zgartirishni yaxshi tushunishni talab qiladi.

Xulosa

WebCodecs'dagi VideoFrame plani API brauzerda video qayta ishlash ustidan yangi darajadagi nazoratni ochadi. Piksel ma'lumotlariga qanday kirish va ularni boshqarishni tushunish orqali siz real vaqtdagi video effektlar, kompyuter ko'rishi, video tahrirlash va boshqalar uchun ilg'or ilovalarni yaratishingiz mumkin. VideoFrame planlari bilan ishlash qiyin bo'lishi mumkin bo'lsa-da, potentsial mukofotlar sezilarli. WebCodecs rivojlanishda davom etar ekan, u shubhasiz media bilan ishlaydigan veb-ishlab chiquvchilar uchun muhim vositaga aylanadi.

Biz sizni VideoFrame plani API'si bilan tajriba o'tkazishga va uning imkoniyatlarini o'rganishga undaymiz. Asosiy tamoyillarni tushunish va eng yaxshi amaliyotlarni qo'llash orqali siz brauzerda nimalar mumkinligining chegaralarini kengaytiradigan innovatsion va samarali video ilovalarini yaratishingiz mumkin.

Qo'shimcha O'rganish

• MDN Web Docs da WebCodecs haqida
• WebCodecs Spetsifikatsiyasi
• GitHub'dagi WebCodecs namuna kodlari omborlari.