मिलते-जुलते ऐप्लिकेशन के साथ शुरुआत करना

पीयर कनेक्शन उन WebRTC स्पेसिफ़िकेशन का हिस्सा हैं जो का इस्तेमाल करके संचार करने के लिए अलग-अलग कंप्यूटर पर दो ऐप्लिकेशन को कनेक्ट करता है पीयर-टू-पीयर प्रोटोकॉल. मिलते-जुलते ऐप्लिकेशन के बीच बातचीत वीडियो, ऑडियो या आर्बिट्रेरी बाइनरी डेटा (RTCDataChannel एपीआई के साथ काम करने वाले क्लाइंट के लिए). तय सीमा में यह जानने के लिए कि दो साथी कैसे कनेक्ट कर सकते हैं, दोनों क्लाइंट को ICE सर्वर कॉन्फ़िगरेशन. यह एक STUN या टर्न-सर्वर की तरह है और उनकी भूमिका है हर क्लाइंट को ICE विकल्प उपलब्ध कराने के लिए, जिसे बाद में रिमोट पर ट्रांसफ़र कर दिया जाता है मिलते-जुलते ऐप्लिकेशन. ICE के उम्मीदवारों के इस ट्रांसफ़र को आम तौर पर सिग्नलिंग कहा जाता है.

सिग्नलिंग

WebRTC की खास बातों में, ICE (इंटरनेट) से संपर्क करने के लिए एपीआई शामिल हैं कनेक्टिविटी इस्टैब्लिशमेंट) सर्वर, लेकिन सिग्नलिंग कॉम्पोनेंट इसका हिस्सा नहीं है इसे. दो साथियों को यह बताने के लिए कि उन्हें कैसे कनेक्ट करना चाहिए, सिग्नल करना ज़रूरी है. आम तौर पर, इसे एक सामान्य एचटीटीपी-आधारित वेब एपीआई (यानी एक REST के ज़रिए हल किया जाता है) के ज़रिए हल किया जाता है या अन्य RPC तंत्र) से कनेक्ट करेंगे, जहां वेब ऐप्लिकेशन साथी कनेक्शन शुरू होने से पहले की जानकारी.

फ़ॉलो किए गए कोड स्निपेट से यह पता चलता है कि इस काल्पनिक सिग्नलिंग सेवा का इस्तेमाल करके एसिंक्रोनस तरीके से मैसेज भेजें और पाएं. इसका इस्तेमाल बाकी बचे कामों में किया जाएगा जहां ज़रूरी हो वहां इस गाइड में दिए गए उदाहरण देखें.

// Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');

सिग्नलिंग को कई तरीकों से लागू किया जा सकता है और WebRTC विशेषता किसी विशिष्ट समाधान को प्राथमिकता नहीं देती है.

मिलते-जुलते ऐप्लिकेशन के साथ कनेक्शन शुरू किया जा रहा है

मिलते-जुलते ऐप्लिकेशन के हर कनेक्शन को RTCPeerConnection ऑब्जेक्ट मैनेज करता है. कंस्ट्रक्टर इस क्लास के पैरामीटर के तौर पर, एक RTCConfiguration ऑब्जेक्ट होता है. यह ऑब्जेक्ट बताता है कि पीयर कनेक्शन कैसे सेट अप किया गया है और इसमें जानकारी होनी चाहिए इस्तेमाल करने के लिए ICE सर्वर के बारे में जानकारी.

RTCPeerConnection बन जाने के बाद, हमें एसडीपी ऑफ़र बनाना होगा या हम कॉल करने वाले पीयर हैं या कॉल रिसीव करने वाले, इसके आधार पर आपको जवाब दे सकते हैं. एक बार एसडीपी ऑफ़र या जवाब बनाया जा सकता है, तो उसे दूसरा चैनल चुनें. SDP ऑब्जेक्ट को रिमोट पीयर को पास करना, सिग्नलिंग कहलाता है और WebRTC स्पेसिफ़िकेशन में शामिल नहीं किया गया है.

कॉल करने की सुविधा से, मिलते-जुलते ऐप्लिकेशन के साथ कनेक्शन सेटअप करने की प्रोसेस शुरू करने के लिए, हम RTCPeerConnection ऑब्जेक्ट बनाएं. इसके बाद, createOffer() को कॉल करके RTCSessionDescription ऑब्जेक्ट. यह सत्र विवरण स्थानीय के रूप में सेट है ब्यौरे को setLocalDescription() का इस्तेमाल करके भेजा जाता है. इसके बाद, उसे हमारे सिग्नल के ज़रिए भेजा जाता है चैनल को रिसीविंग साइड पर ले जाएं. हमने उन लोगों के लिए भी एक लिसनर सेट किया है जो हमारे सिग्नल हमारे द्वारा ऑफ़र किए गए सत्र के विवरण का उत्तर प्राप्त होने पर चैनल के लिए मैसेज पाने वाले हिस्से को.

async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}

आखिर में, हम अपना RTCPeerConnection इंस्टेंस. ऐसा करने के बाद, हम दिए गए ऑफ़र का इस्तेमाल करके setRemoteDescription(). इसके बाद, हम जवाब बनाने के लिए createAnswer() को कॉल करते हैं आपको मिला ऑफ़र. इस जवाब को, इसका इस्तेमाल करके स्थानीय ब्यौरे के तौर पर सेट किया गया है setLocalDescription() और फिर हमारी सिग्नलिंग के ज़रिए कॉल साइड पर भेजा गया सर्वर.

const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});

जब दो साथियों ने लोकल और रिमोट सेशन की जानकारी सेट कर ली, तब वे रिमोट पीयर की क्षमताओं के बारे में जानते हैं. इसका मतलब यह नहीं है कि कनेक्शन के बीच में से किसी एक को चुना जा सकता है. इस काम के लिए हमें ICE इकट्ठा करना होगा प्रत्याशी और एक-दूसरे को (सिग्नल चैनल पर) एक-दूसरे को ट्रांसफ़र करना मिलते-जुलते ऐप्लिकेशन.

ICE के उम्मीदवार

इससे पहले कि दो साथी WebRTC का उपयोग करके कम्यूनिकेशन कर सकें, उन्हें एक-दूसरे की अदला-बदली करनी होगी कनेक्टिविटी की जानकारी देखें. नेटवर्क की शर्तें, अलग-अलग स्थितियों के हिसाब से अलग-अलग हो सकती हैं. आम तौर पर, बाहरी सेवा का इस्तेमाल यह पता लगाने के लिए किया जाता है कि मिलते-जुलते ऐप्लिकेशन से जुड़ने के लिए संभावित उम्मीदवार. इस सेवा का नाम ICE है और STUN या टर्न सर्वर का इस्तेमाल करता है. एसटीयूएन का मतलब है सेशन ट्रैवर्सल NAT के लिए उपयोगिताएं और इसे आम तौर पर ज़्यादातर WebRTC ऐप्लिकेशन में सीधे तौर पर इस्तेमाल नहीं किया जाता.

TURN (Relay NAT का इस्तेमाल करके ट्रैवर्सल ट्रैवर्सल टूल) ज़्यादा बेहतर समाधान है, जिसमें STUN प्रोटोकॉल और WebRTC पर आधारित ज़्यादातर व्यावसायिक सेवाएं, टर्न सर्वर का इस्तेमाल करती हैं का इस्तेमाल किया जा सकता है. WebRTC API, STUN दोनों के साथ काम करता है और सीधे चला जाता है, और उसे ज़्यादा जानकारी वाली इंटरनेट सेवा के तहत इकट्ठा किया जाता है कनेक्टिविटी स्थापना. WebRTC कनेक्शन बनाते समय, हम आम तौर पर के कॉन्फ़िगरेशन में एक या कई ICE सर्वर उपलब्ध कराते हैं RTCPeerConnection ऑब्जेक्ट.

ट्रिकल आईसी

RTCPeerConnection ऑब्जेक्ट बनाने के बाद, बुनियादी फ़्रेमवर्क कनेक्टिविटी विकसित करने के लिए, उम्मीदवारों को इकट्ठा करने के लिए ICE सर्वर दिए गए हैं (ICE) उम्मीदवार). RTCPeerConnection सिग्नल पर इवेंट icegatheringstatechange ICE के डेटा को इकट्ठा करने की स्थिति क्या है (new, gathering या complete).

हालांकि, हो सकता है कि कोई साथी तब तक इंतज़ार कर सके, जब तक ICE के डेटा को इकट्ठा करने की प्रोसेस पूरी न हो जाए, लेकिन यह आम तौर पर "ट्रिकल आइस" का इस्तेमाल करना ज़्यादा आसान होता है तकनीक और जानकारी शेयर करना हर ICE उम्मीदवार का पता चलने पर, उसे रिमोट पीयर से कनेक्ट किया जाएगा. इससे इससे मिलते-जुलते ऐप्लिकेशन से कनेक्टिविटी के लिए, सेटअप में लगने वाला समय कम होता है. साथ ही, वीडियो देखने की अनुमति मिलती है कॉल करें और कम देरी से काम शुरू करें.

ICE के उम्मीदवारों को इकट्ठा करने के लिए, icecandidate इवेंट के लिए बस एक लिसनर जोड़ें. लिसनर के ज़रिए जनरेट हुए RTCPeerConnectionIceEvent में ये चीज़ें शामिल होंगी candidate की प्रॉपर्टी, जिसमें नए उम्मीदवार की जानकारी दी गई है. इस प्रॉपर्टी को रिमोट पीयर (सिग्नल देखें).

// Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});

कनेक्शन स्थापित

ICE के उम्मीदवार मिलने के बाद, हम यह उम्मीद करेंगे कि आने वाले समय में हमारा सिस्टम अपने साथी कर्मचारियों के लिए कनेक्शन अंत में कनेक्ट की गई स्थिति में बदल जाएगा. इसका पता लगाने के लिए, हम हमारे RTCPeerConnection को सुनें, जहां हम connectionstatechange को सुनते हैं इवेंट.

// Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});

RTCPeerConnection API दस्तावेज़