इंस्टालेशन और कोड गाइड

वेबआरटीसी (वेब ​​रियल-टाइम कम्युनिकेशन) एक ओपन-सोर्स तकनीक है जो वेब ब्राउज़र और मोबाइल ऐप्स में सरल एपीआई के माध्यम से वास्तविक समय संचार को सक्षम बनाती है। यह किसी मध्यस्थ सर्वर की आवश्यकता के बिना सीधे साथियों के बीच ऑडियो, वीडियो और डेटा साझा करने की अनुमति देता है, जो इसे वीडियो कॉन्फ्रेंसिंग, लाइव स्ट्रीमिंग और फ़ाइल साझाकरण जैसे अनुप्रयोगों के लिए एकदम सही बनाता है।

इस ब्लॉग में, हम निम्नलिखित विषयों पर चर्चा करेंगे:

1. वेबआरटीसी क्या है?
2. वेबआरटीसी की मुख्य विशेषताएं
3. WebRTC स्थापित कर रहा है
4. एक बुनियादी वेबआरटीसी एप्लिकेशन का निर्माण
5. कोड को समझना
6. निष्कर्ष

वेबआरटीसी क्या है?

WebRTC मानकों और प्रोटोकॉल का एक सेट है जो वेब ब्राउज़र के बीच वास्तविक समय ऑडियो, वीडियो और डेटा संचार को सक्षम बनाता है। इसमें कई प्रमुख घटक शामिल हैं:

• getUserMedia: उपयोगकर्ता के डिवाइस से ऑडियो और वीडियो स्ट्रीम कैप्चर करता है।
• RTCPeerConnection: पीयर-टू-पीयर कनेक्शन प्रबंधित करता है और ऑडियो और वीडियो स्ट्रीमिंग संभालता है।
• RTCDataChannel: साथियों के बीच वास्तविक समय डेटा स्थानांतरण की अनुमति देता है।

WebRTC की मुख्य विशेषताएं

1. वास्तविक समय संचार: न्यूनतम विलंब के साथ कम विलंबता संचार।
2. ब्राउज़र संगतता: अधिकांश आधुनिक वेब ब्राउज़र (क्रोम, फ़ायरफ़ॉक्स, सफारी, एज) द्वारा समर्थित।
3. किसी प्लगइन्स की आवश्यकता नहीं है: अतिरिक्त प्लगइन्स या सॉफ़्टवेयर के बिना सीधे ब्राउज़र में काम करता है।
4. सुरक्षित: सुरक्षित संचार के लिए एन्क्रिप्शन का उपयोग करता है।

वेबआरटीसी स्थापित करना

WebRTC एक क्लाइंट-साइड तकनीक है और इसके लिए किसी विशिष्ट सर्वर इंस्टॉलेशन की आवश्यकता नहीं होती है। हालाँकि, आपको अपनी HTML और जावास्क्रिप्ट फ़ाइलों की सेवा के लिए एक वेब सर्वर की आवश्यकता होगी। स्थानीय विकास के लिए, आप एक साधारण HTTP सर्वर का उपयोग कर सकते हैं।

आवश्यक शर्तें

• Node.js: एक स्थानीय सर्वर स्थापित करने के लिए।
• एक आधुनिक वेब ब्राउज़र: क्रोम, फ़ायरफ़ॉक्स, सफारी, या एज।

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

1. Node.js इंस्टॉल करें: nodejs.org से Node.js डाउनलोड और इंस्टॉल करें।

2. एक प्रोजेक्ट निर्देशिका बनाएं: एक टर्मिनल खोलें और अपने प्रोजेक्ट के लिए एक नई निर्देशिका बनाएं।
   

   mkdir webrtc-project
   cd webrtc-project
   

3. एक Node.js प्रोजेक्ट प्रारंभ करें:
   

   npm init -y
   

4. HTTP सर्वर स्थापित करें:
   

   npm install --save http-server
   

5. अपनी प्रोजेक्ट फ़ाइलें बनाएं:

   • index.html
   • main.js

निम्नलिखित सामग्री के साथ एक Index.html फ़ाइल बनाएं:

```html



    
WebRTC Example
    
```

एक बुनियादी वेबआरटीसी एप्लिकेशन का निर्माण

हम एक सरल पीयर-टू-पीयर वीडियो कॉल एप्लिकेशन बनाएंगे। यह उदाहरण सहकर्मी कनेक्शन को अनुकरण करने के लिए दो ब्राउज़र टैब का उपयोग करेगा।

कोड स्पष्टीकरण

1. स्थानीय वीडियो कैप्चर करें: उपयोगकर्ता के कैमरे से वीडियो कैप्चर करने के लिए getUserMedia का उपयोग करें।

2. पीयर कनेक्शन बनाएं: स्थानीय और दूरस्थ साथियों के बीच एक पीयर कनेक्शन स्थापित करें।

3. एक्सचेंज ऑफर और उत्तर: कनेक्शन विवरण का आदान-प्रदान करने के लिए एसडीपी (सत्र विवरण प्रोटोकॉल) का उपयोग करें।

4. आईसीई उम्मीदवारों को संभालें: कनेक्शन स्थापित करने के लिए आईसीई उम्मीदवारों का आदान-प्रदान करें।

निम्नलिखित सामग्री के साथ एक मुख्य.जेएस फ़ाइल बनाएं:

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

let localStream;
let peerConnection;
const serverConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const constraints = { video: true, audio: true };

// Get local video stream
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        localStream = stream;
        localVideo.srcObject = stream;
        setupPeerConnection();
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

function setupPeerConnection() {
    peerConnection = new RTCPeerConnection(serverConfig);

    // Add local stream to the peer connection
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    // Handle remote stream
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

    // Handle ICE candidates
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            sendSignal({ 'ice': event.candidate });
        }
    };

    // Create an offer and set local description
    peerConnection.createOffer()
        .then(offer => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            sendSignal({ 'offer': peerConnection.localDescription });
        })
        .catch(error => {
            console.error('Error creating an offer.', error);
        });
}

// Handle signals (for demo purposes, this should be replaced with a signaling server)
function sendSignal(signal) {
    console.log('Sending signal:', signal);
    // Here you would send the signal to the other peer (e.g., via WebSocket)
}

function receiveSignal(signal) {
    if (signal.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.offer))
            .then(() => peerConnection.createAnswer())
            .then(answer => peerConnection.setLocalDescription(answer))
            .then(() => sendSignal({ 'answer': peerConnection.localDescription }));
    } else if (signal.answer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.answer));
    } else if (signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
    }
}

// Simulate receiving a signal from another peer
// This would typically be handled by a signaling server
setTimeout(() => {
    receiveSignal({
        offer: {
            type: 'offer',
            sdp: '...' // SDP offer from the other peer
        }
    });
}, 1000);

संहिता को समझना

1. मीडिया कैप्चर: navigator.mediaDevices.getUserMedia स्थानीय वीडियो स्ट्रीम को कैप्चर करता है।
2. पीयर कनेक्शन सेटअप: RTCPeerConnection पीयर कनेक्शन का प्रबंधन करता है।
3. प्रस्ताव और उत्तर: एसडीपी प्रस्तावों और उत्तरों का उपयोग कनेक्शन पर बातचीत करने के लिए किया जाता है।
4. आईसीई उम्मीदवार: आईसीई उम्मीदवारों का उपयोग साथियों के बीच कनेक्टिविटी स्थापित करने के लिए किया जाता है।