परिचय

नमस्ते! ?

इस ट्यूटोरियल में मैं आपको दिखाऊंगा कि वीडियो भेजने और प्राप्त करने के लिए वेबकोडेक एपीआई का उपयोग कैसे करें।

पहले सर्वर को कोडिंग करने दें।

सर्वर की स्थापना

सहयोगियों के बीच पैकेट भेजने और प्राप्त करने के लिए हमें एक वेबसोकेट सर्वर की आवश्यकता होगी।

इसके लिए हम नोडज का उपयोग करके एक बहुत ही बुनियादी सर्वर बनाएंगे। सबसे पहले प्रोजेक्ट प्रारंभ करें:

npm init -y

फिर आवश्यक मॉड्यूल स्थापित करें:

npm i ws express

इसके बाद "index.js" नामक एक नई फ़ाइल बनाएं और इसे निम्नलिखित कोड से भरें:

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname   '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

उपरोक्त कोड कुछ भी जटिल नहीं है, सार्वजनिक निर्देशिका में कार्य करता है और सभी जुड़े साथियों को पैकेट भेजने वाले वेबसॉकेट कनेक्शन को संभालता है। ?

आगे हम प्रेषक भाग को संभालेंगे, लेकिन पहले "सार्वजनिक" नामक एक नई निर्देशिका बनाएं

mkdir public

प्रेषक बनाना

पहली फ्रंट एंड फ़ाइल जो हम बनाएंगे वह वह है जो प्रसारण कर रही है, सार्वजनिक के तहत "sender.html" नामक एक नई फ़ाइल बनाएं और इसे निम्नलिखित HTML से भरें:

विभाजन और व्याख्या करने के लिए कि कोड क्या करता है।

1. एचटीएमएल संरचना
   • वीडियो तत्व उपयोगकर्ता के कैमरे से लाइव वीडियो प्रदर्शित करता है
   • कैनवास तत्व का उपयोग वीडियो फ़ीड के अलग-अलग फ़्रेम प्रदर्शित करने के लिए किया जाता है। यह प्रत्येक एन्कोडेड फ्रेम का एक दृश्य पूर्वावलोकन प्रदान करता है
2. जावास्क्रिप्ट कोड
   • initWebSocket फ़ंक्शन एक WebSocket सर्वर से कनेक्ट होता है। एन्कोडेड फ़्रेम को रिसीवर तक स्ट्रीम करने के लिए यह कनेक्शन आवश्यक है
   • initEncoder फ़ंक्शन एक VideoEncoder ऑब्जेक्ट बनाता है। यह एक आउटपुट कॉलबैक को परिभाषित करता है जो हर बार एनकोडर द्वारा एक नया खंड उत्पन्न करने पर चलता है
   • videoEncoder.configure() एक सुचारू और उच्च गुणवत्ता वाली एन्कोडिंग सुनिश्चित करते हुए, 1एमबीपीएस बिटरेट और 30 एफपीएस के साथ कोडेक को वीपी8 पर सेट करता है।
   • getUserMedia कॉल का उपयोग कैमरे तक पहुंच का अनुरोध करने के लिए किया जाता है। वीडियो फ़ीड वीडियो तत्व को सौंपा गया है, और वीडियोट्रैकप्रोसेसर वास्तविक समय में प्रत्येक फ्रेम को संसाधित करने की अनुमति देता है
   • प्रोसेसफ्रेम्स फ़ंक्शन वीडियो से फ़्रेम पढ़ता है, उन्हें कैनवास तत्व पर प्रदर्शित करता है, और videoEncoder.encode() का उपयोग करके प्रत्येक फ्रेम को एन्कोड करता है। फिर प्रत्येक फ़्रेम को एन्कोडेड खंड के रूप में सर्वर पर भेजा जाता है।

ओह! आशा है कि यह आपको समझ में आया होगा। आगे हम वह फ़ाइल बनाएंगे जो स्ट्रीम प्राप्त करेगी। ?

रिसीवर बनाना

यह फ़ाइल वेबसॉकेट के माध्यम से एन्कोडेड वीडियो खंड प्राप्त करती है, उन्हें डीकोड करती है, और उन्हें कैनवास तत्व पर प्रदर्शित करती है।

सार्वजनिक निर्देशिका के अंतर्गत "रिसीवर.एचटीएमएल" नामक एक नई फ़ाइल बनाएं और इसे निम्नलिखित से भरें:

उपरोक्त फ़ाइल को तोड़ने के लिए:

1. HTML
   • कैनवास तत्व डिकोड किए गए वीडियो फ़्रेम के लिए प्राथमिक प्रदर्शन क्षेत्र है। इसमें प्रेषक पृष्ठ के समान एक निश्चित चौड़ाई, ऊंचाई और सीमा होती है।
2. जावास्क्रिप्ट
   • initWebSocket फ़ंक्शन एक नया WebSocket कनेक्शन बनाता है, प्रेषक से एन्कोडेड फ़्रेम प्राप्त करता है और उन्हें डिकोडिंग के लिए decodeFrame() पर भेजता है।
   • initDecoder VP8 कोडेक के लिए कॉन्फ़िगर किए गए एक VideoDecoder ऑब्जेक्ट को प्रारंभ करता है। डिकोडर प्रत्येक फ़्रेम को कैनवास पर आउटपुट करता है।
   • decodeFrame एन्कोडेड डेटा लेता है, इसे EncodedVideoChunk (वर्तमान टाइमस्टैम्प के साथ एक कुंजी फ्रेम के रूप में) में लपेटता है, और इसे videoDecoder.decode() के माध्यम से डीकोड करता है। प्रत्येक फ्रेम वास्तविक समय में कैनवास पर प्रदर्शित होता है

ओह! अब जबकि हमारे पास आवश्यक सभी टुकड़े हैं, तो आइए वास्तव में इसे चलाएं! ?

कोड चलाना

कोड चलाने के लिए बस निम्नलिखित कमांड चलाएँ:

node index.js

फिर अपने ब्राउज़र को http://localhost:3000/sender.html
पर इंगित करें अपने कैमरे तक पहुंच की अनुमति दें और फिर एक अन्य टैब खोलें
http://localhost:3000/receiver.html

नीचे की तरह आपको प्रेषक द्वारा भेजी जा रही स्ट्रीम देखनी चाहिए।

निष्कर्ष

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

हमेशा की तरह आप मेरे जीथब के माध्यम से कोड प्राप्त कर सकते हैं:
https://github.com/ethand91/webcodec-stream

हैप्पी कोडिंग! ?

मेरा काम पसंद आया? मैं विभिन्न विषयों पर पोस्ट करता हूं, यदि आप और अधिक देखना चाहते हैं तो कृपया मुझे लाइक और फॉलो करें।
इसके अलावा मुझे कॉफ़ी भी पसंद है.

यदि आप कोडिंग साक्षात्कार में सफल होने के लिए एल्गोरिदम पैटर्न सीखना चाह रहे हैं तो मैं [निम्नलिखित पाठ्यक्रम](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch[ की अनुशंसा करता हूं) &&&]