વેબકોડેક્સ વિડિયોફ્રેમ પ્લેન: વિડિયો ફ્રેમ ડેટા એક્સેસમાં ઊંડાણપૂર્વકનો અભ્યાસ

વેબકોડેક્સ વેબ-આધારિત મીડિયા પ્રોસેસિંગમાં એક નવા યુગની શરૂઆત કરે છે. તે મીડિયાના મૂળભૂત ઘટકો સુધી નીચા-સ્તરની એક્સેસ પૂરી પાડે છે, જેનાથી ડેવલપર્સ સીધા બ્રાઉઝરમાં જટિલ એપ્લિકેશનો બનાવી શકે છે. વેબકોડેક્સની સૌથી શક્તિશાળી વિશેષતાઓમાંની એક VideoFrame ઓબ્જેક્ટ છે, અને તેની અંદર, VideoFrame પ્લેન્સ છે જે વિડિયો ફ્રેમના કાચા પિક્સેલ ડેટાને એક્સપોઝ કરે છે. આ લેખ અદ્યતન વિડિયો મેનિપ્યુલેશન માટે VideoFrame પ્લેન્સને સમજવા અને તેનો ઉપયોગ કરવા માટે એક વ્યાપક માર્ગદર્શિકા પૂરી પાડે છે.

VideoFrame ઓબ્જેક્ટને સમજવું

પ્લેન્સમાં ઊંડા ઉતરતા પહેલા, ચાલો VideoFrame ઓબ્જેક્ટને જ ફરીથી સમજી લઈએ. એક VideoFrame વિડિયોના એક ફ્રેમનું પ્રતિનિધિત્વ કરે છે. તે ડીકોડ (અથવા એન્કોડ) થયેલ વિડિયો ડેટાને, ટાઇમસ્ટેમ્પ, અવધિ અને ફોર્મેટ માહિતી જેવા સંબંધિત મેટાડેટા સાથે સમાવે છે. VideoFrame API આ માટે પદ્ધતિઓ પ્રદાન કરે છે:

• પિક્સેલ ડેટા વાંચવો: આ તે જગ્યા છે જ્યાં પ્લેન્સ કામમાં આવે છે.
• ફ્રેમ્સની નકલ કરવી: હાલના VideoFrame ઓબ્જેક્ટ્સમાંથી નવા બનાવવા.
• ફ્રેમ્સ બંધ કરવી: ફ્રેમ દ્વારા રાખવામાં આવેલા અંતર્ગત સંસાધનોને મુક્ત કરવા.

VideoFrame ઓબ્જેક્ટ ડીકોડિંગ પ્રક્રિયા દરમિયાન બનાવવામાં આવે છે, સામાન્ય રીતે VideoDecoder દ્વારા, અથવા કસ્ટમ ફ્રેમ બનાવતી વખતે જાતે જ.

VideoFrame પ્લેન્સ શું છે?

એક VideoFrameનો પિક્સેલ ડેટા ઘણીવાર બહુવિધ પ્લેન્સમાં ગોઠવાયેલો હોય છે, ખાસ કરીને YUV જેવા ફોર્મેટમાં. દરેક પ્લેન ઇમેજના એક અલગ ઘટકનું પ્રતિનિધિત્વ કરે છે. ઉદાહરણ તરીકે, YUV420 ફોર્મેટમાં, ત્રણ પ્લેન્સ હોય છે:

• Y (Luma): ઇમેજની તેજસ્વીતા (લ્યુમિનન્સ)નું પ્રતિનિધિત્વ કરે છે. આ પ્લેનમાં ગ્રેસ્કેલ માહિતી હોય છે.
• U (Cb): બ્લુ-ડિફરન્સ ક્રોમા ઘટકનું પ્રતિનિધિત્વ કરે છે.
• V (Cr): રેડ-ડિફરન્સ ક્રોમા ઘટકનું પ્રતિનિધિત્વ કરે છે.

RGB ફોર્મેટ, દેખીતી રીતે સરળ હોવા છતાં, કેટલાક કિસ્સાઓમાં બહુવિધ પ્લેન્સનો ઉપયોગ કરી શકે છે. પ્લેન્સની સંખ્યા અને તેમનો અર્થ સંપૂર્ણપણે VideoFrameના VideoPixelFormat પર આધાર રાખે છે.

પ્લેન્સનો ઉપયોગ કરવાનો ફાયદો એ છે કે તે ચોક્કસ રંગ ઘટકોની કાર્યક્ષમ એક્સેસ અને મેનિપ્યુલેશનની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે રંગ (U અને V પ્લેન્સ) ને અસર કર્યા વિના માત્ર લ્યુમિનન્સ (Y પ્લેન) ને સમાયોજિત કરવા માગી શકો છો.

VideoFrame પ્લેન્સને એક્સેસ કરવું: API

VideoFrame API પ્લેન ડેટાને એક્સેસ કરવા માટે નીચેની પદ્ધતિઓ પ્રદાન કરે છે:

• copyTo(destination, options): VideoFrameની સામગ્રીને એક ગંતવ્ય પર કૉપિ કરે છે, જે બીજો VideoFrame, એક CanvasImageBitmap, અથવા એક ArrayBufferView હોઈ શકે છે. options ઓબ્જેક્ટ નિયંત્રિત કરે છે કે કયા પ્લેન્સ કૉપિ કરવામાં આવે છે અને કેવી રીતે. આ પ્લેન એક્સેસ માટે પ્રાથમિક પદ્ધતિ છે.

copyTo પદ્ધતિમાં options ઓબ્જેક્ટ તમને વિડિયો ફ્રેમ ડેટા માટે લેઆઉટ અને લક્ષ્ય સ્પષ્ટ કરવાની મંજૂરી આપે છે. મુખ્ય ગુણધર્મોમાં શામેલ છે:

• format: કૉપિ કરેલા ડેટાનું ઇચ્છિત પિક્સેલ ફોર્મેટ. આ મૂળ VideoFrame જેવું જ હોઈ શકે છે અથવા અલગ ફોર્મેટ (દા.ત., YUV થી RGB માં રૂપાંતરિત કરવું).
• codedWidth અને codedHeight: પિક્સેલમાં વિડિયો ફ્રેમની પહોળાઈ અને ઊંચાઈ.
• layout: મેમરીમાં દરેક પ્લેનના લેઆઉટનું વર્ણન કરતા ઓબ્જેક્ટ્સની એરે. એરેમાં દરેક ઓબ્જેક્ટ સ્પષ્ટ કરે છે:
• offset: ડેટા બફરની શરૂઆતથી પ્લેનના ડેટાની શરૂઆત સુધી બાઇટ્સમાં ઓફસેટ.
• stride: પ્લેનમાં દરેક પંક્તિની શરૂઆત વચ્ચે બાઇટ્સની સંખ્યા. આ પેડિંગને હેન્ડલ કરવા માટે નિર્ણાયક છે.

ચાલો YUV420 VideoFrameને કાચા બફરમાં કૉપિ કરવાનું ઉદાહરણ જોઈએ:

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
}

સમજૂતી:

• અમે width અને height ના આધારે દરેક પ્લેનનું કદ ગણીએ છીએ. Y સંપૂર્ણ રિઝોલ્યુશન છે, જ્યારે U અને V સબસામ્પલ્ડ (4:2:0) છે.
• layout એરે મેમરી લેઆઉટને વ્યાખ્યાયિત કરે છે. offset સ્પષ્ટ કરે છે કે દરેક પ્લેન બફરમાં ક્યાંથી શરૂ થાય છે, અને stride તે પ્લેનમાં આગલી પંક્તિ પર જવા માટે કેટલા બાઇટ્સ કૂદવા તે સ્પષ્ટ કરે છે.
• format વિકલ્પ 'I420' પર સેટ છે, જે એક સામાન્ય YUV420 ફોર્મેટ છે.
• નિર્ણાયક રીતે, કૉપિ પછી, સંસાધનો મુક્ત કરવા માટે videoFrame.close() ને કૉલ કરવામાં આવે છે.

પિક્સેલ ફોર્મેટ: શક્યતાઓની દુનિયા

VideoFrame પ્લેન્સ સાથે કામ કરવા માટે પિક્સેલ ફોર્મેટ સમજવું આવશ્યક છે. VideoPixelFormat વ્યાખ્યાયિત કરે છે કે વિડિયો ફ્રેમમાં રંગ માહિતી કેવી રીતે એન્કોડ કરવામાં આવે છે. અહીં કેટલાક સામાન્ય પિક્સેલ ફોર્મેટ છે જેનો તમે સામનો કરી શકો છો:

• I420 (YUV420p): એક પ્લેનર YUV ફોર્મેટ જ્યાં Y, U, અને V ઘટકો અલગ પ્લેન્સમાં સંગ્રહિત થાય છે. U અને V ને આડી અને ઊભી બંને દિશામાં 2 ના પરિબળ દ્વારા સબસામ્પલ કરવામાં આવે છે. તે ખૂબ જ સામાન્ય અને કાર્યક્ષમ ફોર્મેટ છે.
• NV12 (YUV420sp): એક સેમી-પ્લેનર YUV ફોર્મેટ જ્યાં Y એક પ્લેનમાં સંગ્રહિત થાય છે, અને U અને V ઘટકો બીજા પ્લેનમાં ઇન્ટરલીવ્ડ હોય છે.
• RGBA: લાલ, લીલો, વાદળી અને આલ્ફા ઘટકો એક જ પ્લેનમાં સંગ્રહિત થાય છે, સામાન્ય રીતે પ્રતિ ઘટક 8 બિટ્સ (પ્રતિ પિક્સેલ 32 બિટ્સ). ઘટકોનો ક્રમ બદલાઈ શકે છે (દા.ત., BGRA).
• RGB565: લાલ, લીલો અને વાદળી ઘટકો એક જ પ્લેનમાં 5 બિટ્સ લાલ માટે, 6 બિટ્સ લીલા માટે અને 5 બિટ્સ વાદળી માટે સંગ્રહિત થાય છે (પ્રતિ પિક્સેલ 16 બિટ્સ).
• GRAYSCALE: દરેક પિક્સેલ માટે એક લ્યુમા (તેજસ્વીતા) મૂલ્ય સાથે ગ્રેસ્કેલ છબીઓનું પ્રતિનિધિત્વ કરે છે.

VideoFrame.format પ્રોપર્ટી તમને આપેલ ફ્રેમનું પિક્સેલ ફોર્મેટ જણાવશે. પ્લેન્સને એક્સેસ કરવાનો પ્રયાસ કરતા પહેલા આ પ્રોપર્ટી તપાસવાની ખાતરી કરો. તમે સપોર્ટેડ ફોર્મેટની સંપૂર્ણ સૂચિ માટે વેબકોડેક્સ સ્પષ્ટીકરણનો સંપર્ક કરી શકો છો.

વ્યવહારુ ઉપયોગના કિસ્સાઓ

VideoFrame પ્લેન્સને એક્સેસ કરવાથી બ્રાઉઝરમાં અદ્યતન વિડિયો પ્રોસેસિંગ માટે શક્યતાઓની વિશાળ શ્રેણી ખુલે છે. અહીં કેટલાક ઉદાહરણો છે:

1. રીઅલ-ટાઇમ વિડિયો ઇફેક્ટ્સ

તમે VideoFrameમાં પિક્સેલ ડેટાને મેનિપ્યુલેટ કરીને રીઅલ-ટાઇમ વિડિયો ઇફેક્ટ્સ લાગુ કરી શકો છો. ઉદાહરણ તરીકે, તમે RGBA ફ્રેમમાં દરેક પિક્સેલના R, G, અને B ઘટકોની સરેરાશ કાઢીને અને પછી ત્રણેય ઘટકોને તે સરેરાશ મૂલ્ય પર સેટ કરીને ગ્રેસ્કેલ ફિલ્ટર અમલમાં મૂકી શકો છો. તમે સેપિયા ટોન ઇફેક્ટ પણ બનાવી શકો છો અથવા તેજસ્વીતા અને કોન્ટ્રાસ્ટને સમાયોજિત કરી શકો છો.

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. કમ્પ્યુટર વિઝન એપ્લિકેશન્સ

VideoFrame પ્લેન્સ કમ્પ્યુટર વિઝન કાર્યો માટે જરૂરી પિક્સેલ ડેટાની સીધી એક્સેસ પૂરી પાડે છે. તમે ઓબ્જેક્ટ ડિટેક્શન, ચહેરાની ઓળખ, ગતિ ટ્રેકિંગ અને વધુ માટે અલ્ગોરિધમ્સ અમલમાં મૂકવા માટે આ ડેટાનો ઉપયોગ કરી શકો છો. તમે તમારા કોડના પ્રદર્શન-નિર્ણાયક વિભાગો માટે વેબએસેમ્બલીનો લાભ લઈ શકો છો.

ઉદાહરણ તરીકે, તમે રંગીન VideoFrame ને ગ્રેસ્કેલમાં રૂપાંતરિત કરી શકો છો અને પછી ઇમેજમાં કિનારીઓ ઓળખવા માટે એજ ડિટેક્શન અલ્ગોરિધમ (દા.ત., સોબેલ ઓપરેટર) લાગુ કરી શકો છો. આનો ઉપયોગ ઓબ્જેક્ટ ઓળખ માટે પ્રી-પ્રોસેસિંગ પગલા તરીકે થઈ શકે છે.

3. વિડિયો એડિટિંગ અને કમ્પોઝિટિંગ

તમે ક્રોપિંગ, સ્કેલિંગ, રોટેશન અને કમ્પોઝિટિંગ જેવી વિડિયો એડિટિંગ સુવિધાઓ અમલમાં મૂકવા માટે VideoFrame પ્લેન્સનો ઉપયોગ કરી શકો છો. પિક્સેલ ડેટાને સીધો મેનિપ્યુલેટ કરીને, તમે કસ્ટમ ટ્રાન્ઝિશન અને ઇફેક્ટ્સ બનાવી શકો છો.

દાખલા તરીકે, તમે પિક્સેલ ડેટાના માત્ર એક ભાગને નવા VideoFrameમાં કૉપિ કરીને VideoFrameને ક્રોપ કરી શકો છો. તમે તે મુજબ layout ઓફસેટ્સ અને સ્ટ્રાઇડ્સને સમાયોજિત કરશો.

4. કસ્ટમ કોડેક્સ અને ટ્રાન્સકોડિંગ

જ્યારે વેબકોડેક્સ AV1, VP9, અને H.264 જેવા સામાન્ય કોડેક્સ માટે બિલ્ટ-ઇન સપોર્ટ પૂરો પાડે છે, ત્યારે તમે કસ્ટમ કોડેક્સ અથવા ટ્રાન્સકોડિંગ પાઇપલાઇન્સ અમલમાં મૂકવા માટે પણ તેનો ઉપયોગ કરી શકો છો. તમારે એન્કોડિંગ અને ડીકોડિંગ પ્રક્રિયા જાતે જ હેન્ડલ કરવી પડશે, પરંતુ VideoFrame પ્લેન્સ તમને કાચા પિક્સેલ ડેટાને એક્સેસ અને મેનિપ્યુલેટ કરવાની મંજૂરી આપે છે. આ વિશિષ્ટ વિડિયો ફોર્મેટ અથવા વિશિષ્ટ એન્કોડિંગ આવશ્યકતાઓ માટે ઉપયોગી થઈ શકે છે.

5. અદ્યતન એનાલિટિક્સ

અંતર્ગત પિક્સેલ ડેટાને એક્સેસ કરીને, તમે વિડિયો સામગ્રીનું ઊંડાણપૂર્વક વિશ્લેષણ કરી શકો છો. આમાં દ્રશ્યની સરેરાશ તેજસ્વીતા માપવી, પ્રભાવશાળી રંગો ઓળખવા, અથવા દ્રશ્ય સામગ્રીમાં ફેરફારો શોધવા જેવા કાર્યો શામેલ છે. આ સુરક્ષા, દેખરેખ અથવા સામગ્રી વિશ્લેષણ માટે અદ્યતન વિડિયો એનાલિટિક્સ એપ્લિકેશન્સને સક્ષમ કરી શકે છે.

કેનવાસ અને WebGL સાથે કામ કરવું

જ્યારે તમે VideoFrame પ્લેન્સમાં પિક્સેલ ડેટાને સીધો મેનિપ્યુલેટ કરી શકો છો, ત્યારે તમારે ઘણીવાર પરિણામને સ્ક્રીન પર રેન્ડર કરવાની જરૂર પડે છે. CanvasImageBitmap ઇન્ટરફેસ VideoFrame અને <canvas> એલિમેન્ટ વચ્ચે એક પુલ પૂરો પાડે છે. તમે VideoFrame માંથી CanvasImageBitmap બનાવી શકો છો અને પછી તેને drawImage() પદ્ધતિનો ઉપયોગ કરીને કેનવાસ પર દોરી શકો છો.

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
}

વધુ અદ્યતન રેન્ડરિંગ માટે, તમે WebGL નો ઉપયોગ કરી શકો છો. તમે VideoFrame પ્લેન્સમાંથી પિક્સેલ ડેટાને WebGL ટેક્સચર્સ પર અપલોડ કરી શકો છો અને પછી ઇફેક્ટ્સ અને ટ્રાન્સફોર્મેશન્સ લાગુ કરવા માટે શેડર્સનો ઉપયોગ કરી શકો છો. આ તમને ઉચ્ચ-પ્રદર્શન વિડિયો પ્રોસેસિંગ માટે GPU નો લાભ લેવાની મંજૂરી આપે છે.

પ્રદર્શનની બાબતો

કાચા પિક્સેલ ડેટા સાથે કામ કરવું ગણતરીની દ્રષ્ટિએ સઘન હોઈ શકે છે, તેથી પ્રદર્શન ઓપ્ટિમાઇઝેશનને ધ્યાનમાં લેવું નિર્ણાયક છે. અહીં કેટલીક ટિપ્સ છે:

• કૉપિ ઓછી કરો: પિક્સેલ ડેટાની બિનજરૂરી કૉપિ કરવાનું ટાળો. શક્ય હોય ત્યારે કામગીરી ઇન-પ્લેસ કરવાનો પ્રયાસ કરો.
• વેબએસેમ્બલીનો ઉપયોગ કરો: તમારા કોડના પ્રદર્શન-નિર્ણાયક વિભાગો માટે, વેબએસેમ્બલીનો ઉપયોગ કરવાનું વિચારો. વેબએસેમ્બલી ગણતરીની દ્રષ્ટિએ સઘન કાર્યો માટે લગભગ-મૂળ પ્રદર્શન પ્રદાન કરી શકે છે.
• મેમરી લેઆઉટને ઓપ્ટિમાઇઝ કરો: તમારી એપ્લિકેશન માટે યોગ્ય પિક્સેલ ફોર્મેટ અને મેમરી લેઆઉટ પસંદ કરો. જો તમારે વારંવાર વ્યક્તિગત રંગ ઘટકોને એક્સેસ કરવાની જરૂર ન હોય તો પેક્ડ ફોર્મેટ (દા.ત., RGBA) નો ઉપયોગ કરવાનું વિચારો.
• OffscreenCanvas નો ઉપયોગ કરો: પૃષ્ઠભૂમિ પ્રોસેસિંગ માટે, મુખ્ય થ્રેડને બ્લોક કરવાનું ટાળવા માટે OffscreenCanvas નો ઉપયોગ કરો.
• તમારા કોડને પ્રોફાઇલ કરો: તમારા કોડને પ્રોફાઇલ કરવા અને પ્રદર્શનની અવરોધોને ઓળખવા માટે બ્રાઉઝર ડેવલપર ટૂલ્સનો ઉપયોગ કરો.

બ્રાઉઝર સુસંગતતા

વેબકોડેક્સ અને VideoFrame API મોટાભાગના આધુનિક બ્રાઉઝર્સમાં સમર્થિત છે, જેમાં ક્રોમ, ફાયરફોક્સ અને સફારીનો સમાવેશ થાય છે. જોકે, બ્રાઉઝર સંસ્કરણ અને ઓપરેટિંગ સિસ્ટમના આધારે સપોર્ટનું સ્તર અલગ હોઈ શકે છે. તમારા લક્ષ્ય બ્રાઉઝર્સમાં તમે ઉપયોગ કરી રહ્યાં છો તે સુવિધાઓ સમર્થિત છે તેની ખાતરી કરવા માટે MDN વેબ ડૉક્સ જેવી સાઇટ્સ પર નવીનતમ બ્રાઉઝર સુસંગતતા કોષ્ટકો તપાસો. ક્રોસ-બ્રાઉઝર સુસંગતતા માટે, સુવિધા શોધની ભલામણ કરવામાં આવે છે.

સામાન્ય ભૂલો અને સમસ્યાનિવારણ

VideoFrame પ્લેન્સ સાથે કામ કરતી વખતે ટાળવા માટે અહીં કેટલીક સામાન્ય ભૂલો છે:

• ખોટું લેઆઉટ: ખાતરી કરો કે layout એરે પિક્સેલ ડેટાના મેમરી લેઆઉટનું ચોક્કસ વર્ણન કરે છે. ખોટા ઓફસેટ્સ અથવા સ્ટ્રાઇડ્સથી છબીઓ બગડી શકે છે.
• મેળ ન ખાતા પિક્સેલ ફોર્મેટ: ખાતરી કરો કે તમે copyTo પદ્ધતિમાં જે પિક્સેલ ફોર્મેટ સ્પષ્ટ કરો છો તે VideoFrame ના વાસ્તવિક ફોર્મેટ સાથે મેળ ખાય છે.
• મેમરી લીક્સ: અંતર્ગત સંસાધનોને મુક્ત કરવા માટે VideoFrame અને CanvasImageBitmap ઓબ્જેક્ટ્સનો ઉપયોગ કર્યા પછી હંમેશા તેને બંધ કરો. આમ કરવામાં નિષ્ફળતા મેમરી લીક્સ તરફ દોરી શકે છે.
• અસિંક્રોનસ ઓપરેશન્સ: યાદ રાખો કે copyTo એક અસિંક્રોનસ ઓપરેશન છે. તમે પિક્સેલ ડેટાને એક્સેસ કરો તે પહેલાં કૉપિ ઓપરેશન પૂર્ણ થાય તેની ખાતરી કરવા માટે await નો ઉપયોગ કરો.
• સુરક્ષા પ્રતિબંધો: ક્રોસ-ઓરિજિન વિડિયોમાંથી પિક્સેલ ડેટા એક્સેસ કરતી વખતે લાગુ થઈ શકે તેવા સુરક્ષા પ્રતિબંધોથી વાકેફ રહો.

ઉદાહરણ: YUV થી RGB રૂપાંતરણ

ચાલો એક વધુ જટિલ ઉદાહરણ જોઈએ: YUV420 VideoFrame ને RGB VideoFrame માં રૂપાંતરિત કરવું. આમાં Y, U, અને V પ્લેન્સ વાંચવા, તેમને RGB મૂલ્યોમાં રૂપાંતરિત કરવા અને પછી નવો RGB VideoFrame બનાવવાનો સમાવેશ થાય છે.

આ રૂપાંતરણ નીચેના સૂત્રનો ઉપયોગ કરીને અમલમાં મૂકી શકાય છે:

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

અહીં કોડ છે:

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

આ ઉદાહરણ VideoFrame પ્લેન્સ સાથે કામ કરવાની શક્તિ અને જટિલતા દર્શાવે છે. તેને પિક્સેલ ફોર્મેટ, મેમરી લેઆઉટ અને કલર સ્પેસ રૂપાંતરણની સારી સમજની જરૂર છે.

નિષ્કર્ષ

વેબકોડેક્સમાં VideoFrame પ્લેન API બ્રાઉઝરમાં વિડિયો પ્રોસેસિંગ પર નિયંત્રણનું એક નવું સ્તર ખોલે છે. પિક્સેલ ડેટાને સીધો કેવી રીતે એક્સેસ અને મેનિપ્યુલેટ કરવો તે સમજીને, તમે રીઅલ-ટાઇમ વિડિયો ઇફેક્ટ્સ, કમ્પ્યુટર વિઝન, વિડિયો એડિટિંગ અને વધુ માટે અદ્યતન એપ્લિકેશનો બનાવી શકો છો. જ્યારે VideoFrame પ્લેન્સ સાથે કામ કરવું પડકારજનક હોઈ શકે છે, ત્યારે સંભવિત પુરસ્કારો નોંધપાત્ર છે. જેમ જેમ વેબકોડેક્સ વિકસિત થતું રહેશે, તેમ તે નિઃશંકપણે મીડિયા સાથે કામ કરતા વેબ ડેવલપર્સ માટે એક આવશ્યક સાધન બનશે.

અમે તમને VideoFrame પ્લેન API સાથે પ્રયોગ કરવા અને તેની ક્ષમતાઓ શોધવા માટે પ્રોત્સાહિત કરીએ છીએ. અંતર્ગત સિદ્ધાંતોને સમજીને અને શ્રેષ્ઠ પદ્ધતિઓ લાગુ કરીને, તમે નવીન અને કાર્યક્ષમ વિડિયો એપ્લિકેશનો બનાવી શકો છો જે બ્રાઉઝરમાં શું શક્ય છે તેની સીમાઓને આગળ ધપાવે છે.

વધુ શીખવા માટે

• MDN વેબ ડૉક્સ પર વેબકોડેક્સ
• વેબકોડેક્સ સ્પષ્ટીકરણ
• GitHub પર વેબકોડેક્સ નમૂના કોડ રિપોઝીટરીઝ.