वेबकोडेक्स वीडियोफ्रेम प्लेन: वीडियो फ्रेम डेटा एक्सेस का गहन विश्लेषण

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

वीडियोफ्रेम ऑब्जेक्ट को समझना

प्लेन में जाने से पहले, आइए VideoFrame ऑब्जेक्ट को ही संक्षेप में समझें। एक VideoFrame वीडियो के एक फ्रेम का प्रतिनिधित्व करता है। यह डिकोड किए गए (या एन्कोड किए गए) वीडियो डेटा को टाइमस्टैम्प, अवधि और प्रारूप जानकारी जैसे संबंधित मेटाडेटा के साथ समाहित करता है। VideoFrame API निम्नलिखित के लिए तरीके प्रदान करता है:

• पिक्सेल डेटा पढ़ना: यहीं पर प्लेन काम आते हैं।
• फ्रेम कॉपी करना: मौजूदा फ्रेम से नए VideoFrame ऑब्जेक्ट बनाना।
• फ्रेम बंद करना: फ्रेम द्वारा रखे गए अंतर्निहित संसाधनों को जारी करना।

VideoFrame ऑब्जेक्ट डिकोडिंग प्रक्रिया के दौरान बनाया जाता है, आमतौर पर एक VideoDecoder द्वारा, या मैन्युअल रूप से जब एक कस्टम फ्रेम बनाते हैं।

वीडियोफ्रेम प्लेन क्या हैं?

एक VideoFrame का पिक्सेल डेटा अक्सर कई प्लेन में व्यवस्थित होता है, खासकर YUV जैसे प्रारूपों में। प्रत्येक प्लेन छवि के एक अलग घटक का प्रतिनिधित्व करता है। उदाहरण के लिए, YUV420 प्रारूप में, तीन प्लेन होते हैं:

• Y (ल्यूमा): छवि की चमक (ल्यूमिनेंस) का प्रतिनिधित्व करता है। इस प्लेन में ग्रेस्केल जानकारी होती है।
• U (Cb): ब्लू-डिफरेंस क्रोमा घटक का प्रतिनिधित्व करता है।
• V (Cr): रेड-डिफरेंस क्रोमा घटक का प्रतिनिधित्व करता है।

RGB प्रारूप, हालांकि सरल लगते हैं, कुछ मामलों में कई प्लेन का उपयोग भी कर सकते हैं। प्लेन की संख्या और उनका अर्थ पूरी तरह से VideoFrame के VideoPixelFormat पर निर्भर करता है।

प्लेन का उपयोग करने का लाभ यह है कि यह विशिष्ट रंग घटकों तक कुशल पहुँच और हेरफेर की अनुमति देता है। उदाहरण के लिए, आप रंग (U और V प्लेन) को प्रभावित किए बिना केवल ल्यूमिनेंस (Y प्लेन) को समायोजित करना चाह सकते हैं।

वीडियोफ्रेम प्लेन तक पहुँचना: एपीआई

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 में 3 प्लेन होते हैं: Y, U, और V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y प्लेन
    { offset: yPlaneSize, stride: width / 2 }, // U प्लेन
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V प्लेन
  ];

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

  videoFrame.close(); // संसाधनों को जारी करना महत्वपूर्ण है
}

स्पष्टीकरण:

• हम 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;       // लाल
    rgba[i + 1] = gray;   // हरा
    rgba[i + 2] = gray;   // नीला
  }

  // संशोधित डेटा से एक नया वीडियोफ्रेम बनाएं।
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // मूल फ्रेम को रिलीज़ करें
  return newFrame;
}

2. कंप्यूटर विजन अनुप्रयोग

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

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

3. वीडियो संपादन और कंपोजिटिंग

आप क्रॉपिंग, स्केलिंग, रोटेशन और कंपोजिटिंग जैसी वीडियो संपादन सुविधाओं को लागू करने के लिए VideoFrame प्लेन का उपयोग कर सकते हैं। पिक्सेल डेटा में सीधे हेरफेर करके, आप कस्टम ट्रांज़िशन और प्रभाव बना सकते हैं।

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

4. कस्टम कोडेक्स और ट्रांसकोडिंग

हालांकि वेबकोडेक्स AV1, VP9, और H.264 जैसे सामान्य कोडेक्स के लिए अंतर्निहित समर्थन प्रदान करता है, आप इसका उपयोग कस्टम कोडेक्स या ट्रांसकोडिंग पाइपलाइन को लागू करने के लिए भी कर सकते हैं। आपको एन्कोडिंग और डिकोडिंग प्रक्रिया को स्वयं संभालना होगा, लेकिन VideoFrame प्लेन आपको रॉ पिक्सेल डेटा तक पहुँचने और उसमें हेरफेर करने की अनुमति देते हैं। यह विशिष्ट वीडियो प्रारूपों या विशेष एन्कोडिंग आवश्यकताओं के लिए उपयोगी हो सकता है।

5. उन्नत एनालिटिक्स

अंतर्निहित पिक्सेल डेटा तक पहुँचकर, आप वीडियो सामग्री का गहन विश्लेषण कर सकते हैं। इसमें किसी दृश्य की औसत चमक को मापना, प्रमुख रंगों की पहचान करना, या दृश्य सामग्री में परिवर्तनों का पता लगाना जैसे कार्य शामिल हैं। यह सुरक्षा, निगरानी, या सामग्री विश्लेषण के लिए उन्नत वीडियो एनालिटिक्स अनुप्रयोगों को सक्षम कर सकता है।

कैनवास और वेबजीएल के साथ काम करना

जब आप सीधे 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(); // बिटमैप संसाधनों को रिलीज़ करें
  videoFrame.close(); // वीडियोफ्रेम संसाधनों को रिलीज़ करें
}

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

प्रदर्शन संबंधी विचार

रॉ पिक्सेल डेटा के साथ काम करना कम्प्यूटेशनल रूप से गहन हो सकता है, इसलिए प्रदर्शन अनुकूलन पर विचार करना महत्वपूर्ण है। यहाँ कुछ युक्तियाँ दी गई हैं:

• कॉपी को न्यूनतम करें: पिक्सेल डेटा की अनावश्यक कॉपी करने से बचें। जब भी संभव हो, इन-प्लेस ऑपरेशन करने का प्रयास करें।
• वेबअसेंबली का उपयोग करें: अपने कोड के प्रदर्शन-महत्वपूर्ण वर्गों के लिए, वेबअसेंबली का उपयोग करने पर विचार करें। वेबअसेंबली कम्प्यूटेशनल रूप से गहन कार्यों के लिए लगभग-देशी प्रदर्शन प्रदान कर सकती है।
• मेमोरी लेआउट को अनुकूलित करें: अपने एप्लिकेशन के लिए सही पिक्सेल प्रारूप और मेमोरी लेआउट चुनें। यदि आपको व्यक्तिगत रंग घटकों तक बार-बार पहुँचने की आवश्यकता नहीं है, तो पैक्ड प्रारूपों (जैसे, RGBA) का उपयोग करने पर विचार करें।
• ऑफस्क्रीनकैनवास का उपयोग करें: पृष्ठभूमि प्रसंस्करण के लिए, मुख्य थ्रेड को ब्लॉक करने से बचने के लिए OffscreenCanvas का उपयोग करें।
• अपने कोड को प्रोफाइल करें: अपने कोड को प्रोफाइल करने और प्रदर्शन की बाधाओं की पहचान करने के लिए ब्राउज़र डेवलपर टूल का उपयोग करें।

ब्राउज़र संगतता

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

सामान्य नुकसान और समस्या निवारण

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

  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; // अल्फा
    }
  }

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

  videoFrame.close(); // मूल फ्रेम को रिलीज़ करें
  return newFrame;
}

यह उदाहरण VideoFrame प्लेन के साथ काम करने की शक्ति और जटिलता को प्रदर्शित करता है। इसके लिए पिक्सेल प्रारूप, मेमोरी लेआउट और रंग स्थान रूपांतरणों की अच्छी समझ की आवश्यकता होती है।

निष्कर्ष

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

हम आपको VideoFrame प्लेन API के साथ प्रयोग करने और इसकी क्षमताओं का पता लगाने के लिए प्रोत्साहित करते हैं। अंतर्निहित सिद्धांतों को समझकर और सर्वोत्तम प्रथाओं को लागू करके, आप नवीन और प्रदर्शनकारी वीडियो एप्लिकेशन बना सकते हैं जो ब्राउज़र में जो संभव है उसकी सीमाओं को आगे बढ़ाते हैं।

अतिरिक्त अध्ययन

• वेबकोडेक्स पर एमडीएन वेब डॉक्स
• वेबकोडेक्स विनिर्देश
• गिटहब पर वेबकोडेक्स सैंपल कोड रिपॉजिटरी।