अपना व्यक्तिगत Skype बनाना, WebRTC एप्लिकेशन बनाने के लिए चरण-दर-चरण निर्देश

WebRTC एक ब्राउज़र के माध्यम से वास्तविक समय ऑडियो / वीडियो संचार की अनुमति देता है ( और )।

इस विषय में, मैं आपको बताऊंगा कि सबसे सरल वेबआरटीसी एप्लिकेशन को कैसे लागू किया जाए।

1. getUserMedia - मीडिया उपकरणों (माइक्रोफ़ोन / वेबकैम) तक पहुंच

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

Index.html बनाएं:

<video autoplay></video> <script> navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; navigator.getUserMedia({ audio: true, video: true }, gotStream, streamError); function gotStream(stream) { document.querySelector('video').src = URL.createObjectURL(stream); } function streamError(error) { console.log(error); } </script> 

आप वीडियो तत्व पर css3 फ़िल्टर लागू कर सकते हैं।

यहां यह निराशाजनक है कि WebRTC विकास के इस चरण में मैं ब्राउज़र को यह नहीं बता सकता कि "मुझे इस साइट पर भरोसा है, हमेशा इसे अपने कैमरा और माइक्रोफ़ोन तक पहुंच दें" और आपको प्रत्येक पृष्ठ के खुलने / अपडेट होने के बाद अनुमति देने पर क्लिक करना होगा।

खैर, यह याद रखना अतिश्योक्तिपूर्ण नहीं है कि यदि आपने एक ब्राउज़र में कैमरे को एक्सेस दिया है, तो दूसरा जब आप एक्सेस प्राप्त करने का प्रयास करेंगे, तो PERMISSION_DENIED प्राप्त होगा।

2. सिग्नलिंग सर्वर

यहाँ मैं "webrtc की शुरुआत कर रहा हूँ" निर्देशों के अधिकांश को तोड़ रहा हूँ क्योंकि वे दूसरे चरण में एक क्लाइंट पर webRTC की क्षमताओं को प्रदर्शित करते हैं, जो व्यक्तिगत रूप से मेरे स्पष्टीकरण में भ्रम पैदा करता है।

सिग्नल सर्वर WebRTC फोकल बिंदु है जो क्लाइंट के बीच संचार, कनेक्शन को बंद करने और कनेक्शन और त्रुटि रिपोर्टिंग प्रदान करता है।

हमारे मामले में सिग्नल सर्वर Node.js + socket.io + नोड-स्टैटिक है, यह पोर्ट 1234 पर सुनेगा।
साथ ही, नोड-स्टेटिक index.html दे सकता है, जो हमारे एप्लिकेशन को यथासंभव सरल बना देगा।

एप्लिकेशन फ़ोल्डर में, आवश्यक स्थापित करें:

 npm install socket.io npm install node-static 

Server.js को एप्लीकेशन फोल्डर में डाउनलोड करें। मैं सर्वर भाग को अलग नहीं करूंगा, यह समझने में काफी सरल है, और इसके अलावा, यह वेबआरटीसी का प्रत्यक्ष हिस्सा नहीं है, इसलिए बस सर्वर शुरू करें:

 node server.js 

3. वेबआरटीसी

अब हम सीधे WebRTC के साथ काम करने के लिए तैयार हैं। पूरी तरह से काम कर रहे index.html को डाउनलोड करें, फिर मैं इसे टुकड़ों में अलग कर दूंगा।

3.0। मानकों को अभी तक नहीं अपनाया गया है, इसलिए अब हम विभिन्न ब्राउज़रों के लिए उपसर्ग का उपयोग करने के लिए मजबूर हैं:

 var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; 

3.1। getUserMedia

 navigator.getUserMedia( { audio: true, video: true }, gotStream, function(error) { console.log(error) } ); function gotStream(stream) { document.getElementById("callButton").style.display = 'inline-block'; document.getElementById("localVideo").src = URL.createObjectURL(stream); pc = new PeerConnection(null); pc.addStream(stream); pc.onicecandidate = gotIceCandidate; pc.onaddstream = gotRemoteStream; } 

हमने पहले ही पोस्ट के आरंभ में इस हिस्से का विश्लेषण किया, सिवाय इसके कि गेटस्ट्रीम फ़ंक्शन में हम एक PeerConnection बनाते हैं और दो ईवेंट हैंडलर जोड़ते हैं:

• onicecandidate हमें जनरेट किया गया ICE कैंडिडेट देता है, जिसे हम सिग्नल सर्वर को पास करेंगे, जो बदले में उन्हें onicecandidate को पास करेगा
• जब हम वार्ताकार का मीडिया स्ट्रीम प्राप्त करते हैं, तो onaddstream को onaddstream जाएगा

3.2। कॉल ऑफर

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

महत्वपूर्ण: ग्राहकों को कॉल ऑफ़र भेजने के पहले मीडिया उपकरणों तक पहुंच प्रदान करनी चाहिए।

 function createOffer() { pc.createOffer( gotLocalDescription, function(error) { console.log(error) }, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } } ); } 

3.3। कॉल आंसर

कॉल प्रस्ताव प्राप्त करने के तुरंत बाद इंटरलॉकर द्वारा कॉल उत्तर भेजा जाता है। मैं ध्यान देता हूं कि createOffer() और createAnswer() का कॉलबैक फ़ंक्शन एक ही है - gotLocalDescription, अर्थात्। एक क्लाइंट के लिए createOffer() फ़ंक्शन के साथ बनाया गया था, दूसरे के लिए createAnswer() फ़ंक्शन के साथ।

 function createAnswer() { pc.createAnswer( gotLocalDescription, function(error) { console.log(error) }, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } } ); } 

3.4। आईसीई उम्मीदवार

ICE (इंटरएक्टिव कनेक्टिविटी इस्टैब्लिशमेंट) कैंडिडेट ग्राहकों को जोड़ने का कार्य करता है, क्लाइंट्स के बीच का रास्ता तय करता है जिसके साथ मीडिया स्ट्रीम प्रसारित होंगे। हम सिग्नल सर्वर पर उत्पन्न ICE कैंडिडेट को अगले चरण में सिग्नल सर्वर से संदेशों के प्रसंस्करण का विवरण भी भेजते हैं।

 function gotIceCandidate(event){ if (event.candidate) { sendMessage({ type: 'candidate', label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate }); } } 

3.5। सिग्नल सर्वर से संदेश संसाधित करना

 var socket = io.connect('', {port: 1234}); socket.on('message', function (message){ if (message.type === 'offer') { pc.setRemoteDescription(new SessionDescription(message)); createAnswer(); } else if (message.type === 'answer') { pc.setRemoteDescription(new SessionDescription(message)); } else if (message.type === 'candidate') { var candidate = new IceCandidate({sdpMLineIndex: message.label, candidate: message.candidate}); pc.addIceCandidate(candidate); } }); 

कोड सरल है, लेकिन मैं समझाऊंगा:

• जैसे ही हमें Call Offer आया, createAnswer को कॉल करें
• कॉल प्रस्ताव और कॉल उत्तर दोनों प्राप्त करते समय, प्राप्त setRemoteDescription साथ setRemoteDescription को कॉल करें
• ICE कैंडिडेट के प्राप्त होने पर, AddIceCandidate पर कॉल करें

3.6। gotRemoteStream

यदि सब कुछ ठीक रहा, तो चरण 3.1 से onaddstream हैंडलर को बुलाया जाएगा, जिसमें वार्ताकार से मीडिया स्ट्रीम होगी।

 function gotRemoteStream(event){ document.getElementById("remoteVideo").src = URL.createObjectURL(event.stream); } 

मैं आपको याद दिलाता हूं कि आवेदन का संपूर्ण स्रोत कोड यहां लिया जा सकता है ।

संदर्भ:

• www.webrtc-experiment.com/docs/webrtc-for-beginners.html
• bitbucket.org/webrtc/codelab
• html5videoguide.net/presentations/LCA_2013_webrtc
• hacks.mozilla.org/category/webrtc/as/complete
• www.html5rocks.com/en/tutorials/webrtc/basics