WebCodecs VideoFrame प्रोसेसिंग इंजन: फ्रेम प्रोसेसिंग ऑप्टिमाइजेशन

WebCodecs API वेब-आधारित वीडियो प्रोसेसिंग में क्रांति ला रहा है, जिससे डेवलपर्स को ब्राउज़र के भीतर सीधे निम्न-स्तरीय वीडियो और ऑडियो कोडेक्स तक पहुँचने में सक्षम बनाया गया है। यह क्षमता रियल-टाइम वीडियो एडिटिंग, स्ट्रीमिंग और उन्नत मीडिया अनुप्रयोगों के लिए रोमांचक संभावनाएं खोलती है। हालांकि, WebCodecs के साथ इष्टतम प्रदर्शन प्राप्त करने के लिए इसके आर्किटेक्चर की गहरी समझ और फ्रेम प्रोसेसिंग ऑप्टिमाइजेशन तकनीकों पर सावधानीपूर्वक ध्यान देने की आवश्यकता है।

WebCodecs API और VideoFrame ऑब्जेक्ट को समझना

ऑप्टिमाइजेशन रणनीतियों में गोता लगाने से पहले, आइए WebCodecs API के मुख्य घटकों, विशेष रूप से VideoFrame ऑब्जेक्ट को संक्षेप में दोहराते हैं।

• VideoDecoder: एन्कोडेड वीडियो स्ट्रीम को VideoFrame ऑब्जेक्ट्स में डीकोड करता है।
• VideoEncoder: VideoFrame ऑब्जेक्ट्स को एन्कोडेड वीडियो स्ट्रीम में एनकोड करता है।
• VideoFrame: एक एकल वीडियो फ्रेम का प्रतिनिधित्व करता है, जो रॉ पिक्सेल डेटा तक पहुँच प्रदान करता है। यहीं पर प्रोसेसिंग के लिए जादू होता है।

VideoFrame ऑब्जेक्ट में फ्रेम के बारे में आवश्यक जानकारी होती है, जिसमें इसके आयाम, प्रारूप, टाइमस्टैम्प और पिक्सेल डेटा शामिल हैं। इष्टतम प्रदर्शन के लिए इस पिक्सेल डेटा को कुशलतापूर्वक एक्सेस करना और हेरफेर करना महत्वपूर्ण है।

मुख्य ऑप्टिमाइजेशन रणनीतियाँ

WebCodecs के साथ वीडियो फ्रेम प्रोसेसिंग को अनुकूलित करने में कई प्रमुख रणनीतियाँ शामिल हैं। हम प्रत्येक को विस्तार से समझेंगे।

1. डेटा कॉपी को कम करना

वीडियो प्रोसेसिंग में डेटा कॉपी प्रदर्शन की एक महत्वपूर्ण बाधा है। हर बार जब आप पिक्सेल डेटा की कॉपी करते हैं, तो आप ओवरहेड पेश करते हैं। इसलिए, अनावश्यक कॉपी को कम करना सर्वोपरि है।

VideoFrame.copyTo() के साथ डायरेक्ट एक्सेस

VideoFrame.copyTo() मेथड आपको फ्रेम के डेटा को कुशलतापूर्वक BufferSource (जैसे, ArrayBuffer, TypedArray) में कॉपी करने की अनुमति देता है। हालांकि, इस मेथड में भी एक कॉपी शामिल है। कॉपी को कम करने के लिए निम्नलिखित दृष्टिकोणों पर विचार करें:

• इन-प्लेस प्रोसेसिंग: जब भी संभव हो, अपने प्रोसेसिंग को सीधे गंतव्य BufferSource के भीतर डेटा पर करें। मध्यवर्ती कॉपी बनाने से बचें।
• व्यू क्रिएशन: पूरे बफर को कॉपी करने के बजाय, टाइप्ड एरे व्यू (जैसे, Uint8Array, Float32Array) बनाएं जो अंतर्निहित बफर के विशिष्ट क्षेत्रों को इंगित करते हैं। यह आपको पूर्ण कॉपी बनाए बिना डेटा के साथ काम करने की अनुमति देता है।

उदाहरण: VideoFrame में चमक समायोजन लागू करने पर विचार करें।

            
async function adjustBrightness(frame, brightness) {
  const width = frame.codedWidth;
  const height = frame.codedHeight;
  const format = frame.format; // e.g., 'RGBA'
  const data = new Uint8Array(width * height * 4); // Assuming RGBA format
  frame.copyTo(data);

  for (let i = 0; i < data.length; i += 4) {
    data[i] = Math.min(255, data[i] + brightness);   // Red
    data[i + 1] = Math.min(255, data[i + 1] + brightness); // Green
    data[i + 2] = Math.min(255, data[i + 2] + brightness); // Blue
  }

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

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

            

              
                Copy
              
            
          

यह उदाहरण, जबकि कार्यात्मक है, पिक्सेल डेटा की एक पूर्ण कॉपी शामिल है। बड़ी फ्रेम के लिए, यह धीमा हो सकता है। इस कॉपी से बचने के लिए WebAssembly या GPU-आधारित प्रोसेसिंग (बाद में चर्चा की गई) का उपयोग करने पर विचार करें।

2. प्रदर्शन-महत्वपूर्ण ऑपरेशंस के लिए WebAssembly का लाभ उठाना

JavaScript, जबकि बहुमुखी है, कम्प्यूटेशनल रूप से गहन कार्यों के लिए धीमा हो सकता है। WebAssembly (Wasm) एक लगभग-नेटिव प्रदर्शन विकल्प प्रदान करता है। C++ या Rust जैसी भाषाओं में अपने फ्रेम प्रोसेसिंग लॉजिक को लिखकर और इसे Wasm में कंपाइल करके, आप महत्वपूर्ण गति प्राप्त कर सकते हैं।

WebCodecs के साथ Wasm को एकीकृत करना

आप Wasm मॉड्यूल में प्रोसेसिंग के लिए VideoFrame से रॉ पिक्सेल डेटा पास कर सकते हैं और फिर संसाधित डेटा से एक नया VideoFrame बना सकते हैं। यह आपको WebCodecs API की सुविधा का लाभ उठाते हुए कम्प्यूटेशनल रूप से महंगे कार्यों को Wasm पर ऑफलोड करने की अनुमति देता है।

उदाहरण: इमेज कन्वेल्शन (ब्लर, शार्पन, एज डिटेक्शन) Wasm के लिए एक प्रमुख उम्मीदवार है। यहाँ एक वैचारिक रूपरेखा दी गई है:

1. एक Wasm मॉड्यूल बनाएं जो कन्वेल्शन ऑपरेशन करता है। यह मॉड्यूल पिक्सेल डेटा, चौड़ाई, ऊंचाई और कन्वेल्शन कर्नेल के पॉइंटर को इनपुट के रूप में स्वीकार करेगा।
2. JavaScript में, copyTo() का उपयोग करके VideoFrame से पिक्सेल डेटा प्राप्त करें।
3. पिक्सेल डेटा को रखने के लिए Wasm मॉड्यूल की लीनियर मेमोरी में मेमोरी आवंटित करें।
4. JavaScript से Wasm मॉड्यूल की मेमोरी में पिक्सेल डेटा कॉपी करें।
5. कन्वेल्शन करने के लिए Wasm फ़ंक्शन को कॉल करें।
6. संसाधित पिक्सेल डेटा को Wasm मॉड्यूल की मेमोरी से वापस JavaScript में कॉपी करें।
7. संसाधित डेटा से एक नया VideoFrame बनाएं।

चेतावनी: Wasm के साथ इंटरैक्ट करने में मेमोरी आवंटन और डेटा ट्रांसफर के लिए कुछ ओवरहेड शामिल है। यह सुनिश्चित करने के लिए कि Wasm से प्रदर्शन लाभ इस ओवरहेड से अधिक है, अपने कोड को प्रोफाइल करना आवश्यक है। Emscripten जैसे टूल C++ कोड को Wasm में कंपाइल करने की प्रक्रिया को बहुत सरल बना सकते हैं।

3. SIMD (सिंगल इंस्ट्रक्शन, मल्टीपल डेटा) की शक्ति का उपयोग करना

SIMD एक प्रकार का समानांतर प्रोसेसिंग है जो एक ही निर्देश को एक साथ कई डेटा पॉइंट्स पर संचालित करने की अनुमति देता है। आधुनिक सीपीयू में SIMD निर्देश होते हैं जो डेटा के एरे पर दोहराए जाने वाले ऑपरेशनों, जैसे इमेज प्रोसेसिंग, को काफी तेज कर सकते हैं। WebAssembly Wasm SIMD प्रस्ताव के माध्यम से SIMD का समर्थन करता है।

पिक्सेल-स्तरीय ऑपरेशंस के लिए SIMD

SIMD विशेष रूप से पिक्सेल-स्तरीय ऑपरेशंस के लिए उपयुक्त है, जैसे कि रंग रूपांतरण, फ़िल्टरिंग और ब्लेंडिंग। अपने फ्रेम प्रोसेसिंग लॉजिक को SIMD निर्देशों का उपयोग करने के लिए फिर से लिखकर, आप पर्याप्त प्रदर्शन सुधार प्राप्त कर सकते हैं।

उदाहरण: RGB से ग्रेस्केल में इमेज को परिवर्तित करना।

एक सामान्य JavaScript कार्यान्वयन प्रत्येक पिक्सेल को पुनरावृति कर सकता है और gray = 0.299 * red + 0.587 * green + 0.114 * blue जैसे सूत्र का उपयोग करके ग्रेस्केल मान की गणना कर सकता है।

एक SIMD कार्यान्वयन एक साथ कई पिक्सेल को संसाधित करेगा, जिससे आवश्यक निर्देशों की संख्या काफी कम हो जाएगी। SIMD.js जैसी लाइब्रेरी (हालांकि मूल रूप से सार्वभौमिक रूप से समर्थित नहीं है और काफी हद तक Wasm SIMD द्वारा प्रतिस्थापित) JavaScript में SIMD निर्देशों के साथ काम करने के लिए एब्स्ट्रैक्शन प्रदान करती हैं, या आप सीधे Wasm SIMD इंट्रिंसिक्स का उपयोग कर सकते हैं। हालांकि, सीधे Wasm SIMD इंट्रिंसिक्स का उपयोग करने में आमतौर पर C++ या Rust जैसी भाषा में प्रोसेसिंग लॉजिक लिखना और इसे Wasm में कंपाइल करना शामिल होता है।

4. समानांतर प्रोसेसिंग के लिए GPU का उपयोग करना

ग्राफिक्स प्रोसेसिंग यूनिट (GPU) एक अत्यधिक समानांतर प्रोसेसर है जो ग्राफिक्स और इमेज प्रोसेसिंग के लिए अनुकूलित है। फ्रेम प्रोसेसिंग कार्यों को GPU पर ऑफलोड करने से महत्वपूर्ण प्रदर्शन लाभ हो सकता है, खासकर जटिल ऑपरेशंस के लिए।

WebGPU और VideoFrame एकीकरण

WebGPU एक आधुनिक ग्राफिक्स API है जो वेब ब्राउज़र से GPU तक पहुँच प्रदान करता है। WebCodecs VideoFrame ऑब्जेक्ट्स के साथ सीधा एकीकरण अभी भी विकसित हो रहा है, लेकिन VideoFrame से पिक्सेल डेटा को WebGPU टेक्सचर में स्थानांतरित करना और शेडर्स का उपयोग करके प्रोसेसिंग करना संभव है।

वैचारिक वर्कफ़्लो:

1. VideoFrame के समान आयामों और प्रारूप के साथ एक WebGPU टेक्सचर बनाएं।
2. VideoFrame से पिक्सेल डेटा को WebGPU टेक्सचर में कॉपी करें। इसमें आमतौर पर एक कॉपी कमांड का उपयोग करना शामिल होता है।
3. वांछित फ्रेम प्रोसेसिंग ऑपरेशंस करने के लिए एक WebGPU शेडर प्रोग्राम लिखें।
4. टेक्सचर को इनपुट के रूप में उपयोग करके GPU पर शेडर प्रोग्राम निष्पादित करें।
5. आउटपुट टेक्सचर से संसाधित डेटा पढ़ें।
6. संसाधित डेटा से एक नया VideoFrame बनाएं।

लाभ:

• बड़े पैमाने पर समानांतरता: GPU एक साथ हजारों पिक्सेल को संसाधित कर सकते हैं।
• हार्डवेयर त्वरण: कई इमेज प्रोसेसिंग ऑपरेशंस GPU पर हार्डवेयर-त्वरित होते हैं।

नुकसान:

• जटिलता: WebGPU एक अपेक्षाकृत जटिल API है।
• डेटा ट्रांसफर ओवरहेड: CPU और GPU के बीच डेटा ट्रांसफर एक बाधा हो सकती है।

कैनवास 2D API

हालांकि WebGPU जितना शक्तिशाली नहीं है, कैनवास 2D API का उपयोग सरल फ्रेम प्रोसेसिंग कार्यों के लिए किया जा सकता है। आप VideoFrame को कैनवास पर खींच सकते हैं और फिर getImageData() का उपयोग करके पिक्सेल डेटा को एक्सेस कर सकते हैं। हालांकि, इस दृष्टिकोण में अक्सर निहित डेटा कॉपी शामिल होती है और यह मांग वाले अनुप्रयोगों के लिए सबसे प्रदर्शनकारी विकल्प नहीं हो सकता है।

5. मेमोरी प्रबंधन का अनुकूलन

मेमोरी लीक को रोकने और कचरा संग्रह ओवरहेड को कम करने के लिए कुशल मेमोरी प्रबंधन महत्वपूर्ण है। VideoFrame ऑब्जेक्ट्स और अन्य संसाधनों को ठीक से जारी करना सुचारू प्रदर्शन बनाए रखने के लिए आवश्यक है।

VideoFrame ऑब्जेक्ट्स जारी करना

VideoFrame ऑब्जेक्ट्स मेमोरी का उपभोग करते हैं। जब आप VideoFrame के साथ काम कर लेते हैं, तो close() मेथड को कॉल करके इसके संसाधनों को जारी करना महत्वपूर्ण है।

उदाहरण:

            
// Process the frame
const processedFrame = await processFrame(frame);

// Release the original frame
frame.close();

// Use the processed frame
// ...

// Release the processed frame when done
processedFrame.close();

            

              
                Copy
              
            
          

VideoFrame ऑब्जेक्ट्स जारी करने में विफल रहने से समय के साथ मेमोरी लीक और प्रदर्शन में गिरावट हो सकती है।

ऑब्जेक्ट पूलिंग

उन अनुप्रयोगों के लिए जो बार-बार VideoFrame ऑब्जेक्ट्स बनाते और नष्ट करते हैं, ऑब्जेक्ट पूलिंग एक मूल्यवान ऑप्टिमाइजेशन तकनीक हो सकती है। हर बार स्क्रैच से नए VideoFrame ऑब्जेक्ट्स बनाने के बजाय, आप प्री-एलोकेटेड ऑब्जेक्ट्स के पूल को बनाए रख सकते हैं और उन्हें पुन: उपयोग कर सकते हैं। यह ऑब्जेक्ट निर्माण और कचरा संग्रह से जुड़े ओवरहेड को कम कर सकता है।

6. सही वीडियो प्रारूप और कोडेक का चयन करना

वीडियो प्रारूप और कोडेक का चुनाव प्रदर्शन पर महत्वपूर्ण प्रभाव डाल सकता है। कुछ कोडेक्स दूसरों की तुलना में डीकोड और एनकोड करने के लिए अधिक कम्प्यूटेशनल रूप से महंगे होते हैं। निम्नलिखित कारकों पर विचार करें:

• कोडेक जटिलता: सरल कोडेक्स (जैसे, VP8) को आमतौर पर अधिक जटिल कोडेक्स (जैसे, AV1) की तुलना में कम प्रोसेसिंग पावर की आवश्यकता होती है।
• हार्डवेयर त्वरण: कुछ कोडेक्स कुछ उपकरणों पर हार्डवेयर-त्वरित होते हैं, जिससे महत्वपूर्ण प्रदर्शन सुधार हो सकता है।
• संगतता: सुनिश्चित करें कि चुना गया कोडेक लक्षित ब्राउज़र और उपकरणों द्वारा व्यापक रूप से समर्थित है।
• क्रोमा सबसैंपलिंग: क्रोमा सबसैंपलिंग (जैसे, YUV420) वाले प्रारूपों को बिना सबसैंपलिंग (जैसे, YUV444) वाले प्रारूपों की तुलना में कम मेमोरी और बैंडविड्थ की आवश्यकता होती है। यह ट्रेड-ऑफ छवि गुणवत्ता को प्रभावित करता है और सीमित बैंडविड्थ परिदृश्यों के साथ काम करते समय अक्सर एक महत्वपूर्ण कारक होता है।

7. एन्कोडिंग और डिकोडिंग पैरामीटर्स का अनुकूलन

एन्कोडिंग और डिकोडिंग प्रक्रियाओं को विभिन्न मापदंडों को समायोजित करके ठीक किया जा सकता है। निम्नलिखित पर विचार करें:

• रिज़ॉल्यूशन: कम रिज़ॉल्यूशन के लिए कम प्रोसेसिंग पावर की आवश्यकता होती है। यदि उच्च रिज़ॉल्यूशन आवश्यक नहीं है तो प्रोसेसिंग से पहले वीडियो को स्केल करने पर विचार करें।
• फ्रेम दर: कम फ्रेम दर प्रति सेकंड संसाधित किए जाने वाले फ्रेम की संख्या को कम करती है।
• बिटरेट: कम बिटरेट छोटे फ़ाइल आकार का परिणाम देते हैं लेकिन छवि गुणवत्ता को भी कम कर सकते हैं।
• कीफ्रेम अंतराल: कीफ्रेम अंतराल को समायोजित करने से एन्कोडिंग प्रदर्शन और सीकिंग क्षमताओं दोनों पर असर पड़ सकता है।

अपने विशिष्ट एप्लिकेशन के लिए प्रदर्शन और गुणवत्ता के बीच इष्टतम संतुलन खोजने के लिए विभिन्न पैरामीटर सेटिंग्स के साथ प्रयोग करें।

8. एसिंक्रोनस ऑपरेशंस और वर्कर थ्रेड्स

फ्रेम प्रोसेसिंग कम्प्यूटेशनल रूप से गहन हो सकती है और मुख्य थ्रेड को ब्लॉक कर सकती है, जिससे एक सुस्त उपयोगकर्ता अनुभव होता है। इससे बचने के लिए, async/await या Web Workers का उपयोग करके फ्रेम प्रोसेसिंग ऑपरेशंस को एसिंक्रोनस रूप से करें।

बैकग्राउंड प्रोसेसिंग के लिए वेब वर्कर्स

Web Workers आपको एक अलग थ्रेड में JavaScript कोड चलाने की अनुमति देते हैं, जिससे यह मुख्य थ्रेड को ब्लॉक करने से रोकता है। आप Web Worker को फ्रेम प्रोसेसिंग कार्य ऑफलोड कर सकते हैं और मैसेज पासिंग का उपयोग करके मुख्य थ्रेड पर परिणाम वापस कम्युनिकेट कर सकते हैं।

उदाहरण:

1. एक Web Worker स्क्रिप्ट बनाएं जो फ्रेम प्रोसेसिंग करती है।
2. मुख्य थ्रेड में, एक नया Web Worker इंस्टेंस बनाएं।
3. postMessage() का उपयोग करके Web Worker को VideoFrame डेटा पास करें।
4. Web Worker में, फ्रेम डेटा को संसाधित करें और परिणामों को मुख्य थ्रेड पर वापस पोस्ट करें।
5. मुख्य थ्रेड में, परिणामों को संभालें और UI अपडेट करें।

विचार: मुख्य थ्रेड और Web Workers के बीच डेटा ट्रांसफर ओवरहेड पेश कर सकता है। ट्रांसफरेबल ऑब्जेक्ट्स (जैसे, ArrayBuffer) का उपयोग डेटा कॉपी से बचने से इस ओवरहेड को कम कर सकता है। ट्रांसफरेबल ऑब्जेक्ट अंतर्निहित डेटा के स्वामित्व को 'स्थानांतरित' करते हैं, इसलिए मूल संदर्भ में अब इसकी पहुंच नहीं होती है।

9. प्रोफाइलिंग और प्रदर्शन निगरानी

प्रदर्शन बाधाओं की पहचान करने और अपने ऑप्टिमाइजेशन प्रयासों की प्रभावशीलता को मापने के लिए अपने कोड को प्रोफाइल करना आवश्यक है। अपने JavaScript कोड और WebAssembly मॉड्यूल को प्रोफाइल करने के लिए ब्राउज़र डेवलपर टूल (जैसे, Chrome DevTools, Firefox Developer Tools) का उपयोग करें। इन पर ध्यान दें:

• सीपीयू उपयोग: उन फ़ंक्शन की पहचान करें जो महत्वपूर्ण मात्रा में सीपीयू समय लेते हैं।
• मेमोरी आवंटन: संभावित मेमोरी लीक की पहचान करने के लिए मेमोरी आवंटन और डीएलोकेशन पैटर्न को ट्रैक करें।
• फ्रेम रेंडरिंग समय: प्रत्येक फ्रेम को संसाधित करने और रेंडर करने में लगने वाले समय को मापें।

नियमित रूप से अपने एप्लिकेशन के प्रदर्शन की निगरानी करें और प्रोफाइलिंग परिणामों के आधार पर अपनी ऑप्टिमाइजेशन रणनीतियों को दोहराएं।

वास्तविक दुनिया के उदाहरण और उपयोग के मामले

WebCodecs API और फ्रेम प्रोसेसिंग ऑप्टिमाइजेशन तकनीक विभिन्न प्रकार के उपयोग के मामलों पर लागू होती हैं:

• रियल-टाइम वीडियो एडिटिंग: रियल-टाइम में वीडियो स्ट्रीम पर फिल्टर, प्रभाव और संक्रमण लागू करना।
• वीडियो कॉन्फ्रेंसिंग: कम-विलंबता संचार के लिए वीडियो एन्कोडिंग और डिकोडिंग को अनुकूलित करना।
• ऑगमेंटेड रियलिटी (AR) और वर्चुअल रियलिटी (VR): ट्रैकिंग, पहचान और रेंडरिंग के लिए वीडियो फ्रेम को संसाधित करना।
• लाइव स्ट्रीमिंग: वैश्विक दर्शकों को वीडियो सामग्री को एनकोड करना और स्ट्रीम करना। ऑप्टिमाइजेशन ऐसे सिस्टम की स्केलेबिलिटी में काफी सुधार कर सकते हैं।
• मशीन लर्निंग: मशीन लर्निंग मॉडल (जैसे, ऑब्जेक्ट डिटेक्शन, फेशियल रिकग्निशन) के लिए वीडियो फ्रेम को प्रीप्रोसेस करना।
• मीडिया ट्रांसकोडिंग: वीडियो फ़ाइलों को एक प्रारूप से दूसरे प्रारूप में परिवर्तित करना।

उदाहरण: एक वैश्विक वीडियो कॉन्फ्रेंसिंग प्लेटफ़ॉर्म

दुनिया भर में वितरित टीमों द्वारा उपयोग किए जाने वाले वीडियो कॉन्फ्रेंसिंग प्लेटफ़ॉर्म की कल्पना करें। सीमित बैंडविड्थ वाले क्षेत्रों में उपयोगकर्ताओं को खराब वीडियो गुणवत्ता या लैग का अनुभव हो सकता है। WebCodecs और ऊपर वर्णित तकनीकों का उपयोग करके वीडियो एन्कोडिंग और डिकोडिंग प्रक्रियाओं को अनुकूलित करके, प्लेटफ़ॉर्म नेटवर्क की स्थिति के आधार पर वीडियो पैरामीटर्स (रिज़ॉल्यूशन, फ्रेम दर, बिटरेट) को गतिशील रूप से समायोजित कर सकता है। यह सभी उपयोगकर्ताओं के लिए, उनके स्थान या नेटवर्क कनेक्शन की परवाह किए बिना, एक सुचारू और विश्वसनीय वीडियो कॉन्फ्रेंसिंग अनुभव सुनिश्चित करता है।

निष्कर्ष

WebCodecs API वेब-आधारित वीडियो प्रोसेसिंग के लिए शक्तिशाली क्षमताएं प्रदान करता है। अंतर्निहित आर्किटेक्चर को समझकर और इस गाइड में चर्चा की गई ऑप्टिमाइजेशन रणनीतियों को लागू करके, आप इसकी पूरी क्षमता को अनलॉक कर सकते हैं और उच्च-प्रदर्शन, रियल-टाइम मीडिया एप्लिकेशन बना सकते हैं। अपने कोड को प्रोफाइल करना, विभिन्न तकनीकों के साथ प्रयोग करना और इष्टतम परिणाम प्राप्त करने के लिए लगातार दोहराना याद रखें। वेब-आधारित वीडियो का भविष्य यहाँ है, और यह WebCodecs द्वारा संचालित है।

आगे सीखना

• MDN WebCodecs API प्रलेखन
• Web.dev WebCodecs अवलोकन
• Vimeo ब्लॉग: WebCodecs के साथ लो-लेटेंसी वीडियो के लिए नए JavaScript API