👨‍🍳 🛶 🧘🏼 PeerJS पर ब्राउज़र में वीडियो कॉल। जल्दी शुरू करो 💩 😯 🌍

मैं हब्बर के सभी पाठकों को शुभकामनाएं देता हूं। इस वर्ष, मेरे पास शिक्षक के और छात्र की वेबसाइट पर सीधे वीडियो संचार के माध्यम से फोन करने के लिए एक प्रशिक्षण पोर्टल के लिए एक वीडियो संचार मॉड्यूल लिखने का अवसर था। ऐसे शुरुआती कार्य को हल करना आवश्यक नहीं था। एक छोटी खोज के बाद, मुझे पता चला कि 2 तरीके हैं: फ्लैश और वेबआरटीसी । WebRTC अपने शुद्ध रूप में जटिल हो गया है, और सामान्य तौर पर यह स्वाभाविक है, क्योंकि वीडियो संचार का कार्य सरल नहीं है। लेकिन फिर मैं PeerJS में आया, जो WebRTC के लिए एक आवरण है। इस लेख में मैं आपको बताऊंगा कि कैसे जल्दी से अपने ब्राउज़र डायलर को व्यवस्थित करें।

उदाहरण को दोहराने के लिए, https प्रोटोकॉल के माध्यम से आपके परीक्षण पृष्ठ तक पहुंच की आवश्यकता होगी (चूंकि पेज कैमरा और माइक्रोफ़ोन तक पहुंच का अनुरोध करेगा, और सुरक्षित प्रोटोकॉल के बिना ब्राउज़र बस एक त्रुटि देगा)

शुरू लेआउट इस तरह दिखेगा:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Peer</title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <p><h3> ID: </h3><span id=myid ></span></p> <input id=otherPeerId type=text placeholder="otherPeerId" > <button onclick="callToNode(document.getElementById('otherPeerId').value)"></button> <br> <video id=myVideo muted="muted" width="400px" height="auto" ></video> <div id=callinfo ></div> <video id=remVideo width="400px" height="auto" ></video> </body>

हेड सेक्शन में, हम PeerJS को रिमोट से कनेक्ट करते हैं। स्क्रिप्ट को डाउनलोड करना और स्थानीय रूप से कनेक्ट करना भी संभव है।

इनपुट आईडी = otherPeerId - जिसे हम कॉल करेंगे, उसकी दावत में प्रवेश करने के लिए डिज़ाइन किया गया है (आप इसे इंडेक्स के रूप में, या फ़ोन नंबर के रूप में ले सकते हैं)।

दो वीडियो टैग क्रमशः आपके स्वयं के वीडियो और वार्ताकार के वीडियो को प्रदर्शित करने के लिए डिज़ाइन किए गए हैं।

अब WebRTC तकनीक और कॉल कैसे किया जाता है, इसके बारे में थोड़ा सा। WebRTC, क्लाइंट से क्लाइंट के लिए बिना सर्वर की भागीदारी के सीधे कॉल करता है, इसलिए पहले चरण में 2 ब्राउज़र एक दूसरे को ढूंढने चाहिए। ऐसा करने के लिए, एक क्लासिक WebRTC को एक सिग्नल सर्वर की आवश्यकता होती है, अर्थात् एक सर्वर जो एक ब्राउज़र को दूसरे ब्राउज़र के मापदंडों को बताता है, और वेबआरटीसी में आपको इस तरह के सर्वर को स्वयं व्यवस्थित करना होगा। हालाँकि, पीयरजेएस डेवलपर्स अपने स्वयं के सिग्नल सर्वर प्रदान करते हैं। आपको बस इतना करने की आवश्यकता है कि संभावित वार्ताकार को PeerID को पास करना है, अर्थात, PeerJS सिस्टम में प्राप्त अद्वितीय सूचकांक। एक काम के मसौदे में, मैंने इसे इस तरह व्यवस्थित किया:

पेज लोड करने के बाद, एक पीयर ऑब्जेक्ट बनाया जाता है
इसका सहकर्मी mysql डेटाबेस को लिखा गया है
जब कॉल बटन दबाया जाता है, तो इंटरलॉकर का सहकर्मी डेटाबेस से बाहर निकाला जाता है और कनेक्शन स्थापित करने के लिए उपयोग किया जाता है

वर्तमान परीक्षण के मामले में, हम अन्यपियरआईआरडी पाठ क्षेत्र में वार्ताकार के सहकर्मी को दर्ज करेंगे

तो, चलिए कोड लिखना शुरू करते हैं।

1. मुख्य पीयर ऑब्जेक्ट बनाएं

 var peer = new Peer();

2. दावत के उद्घाटन पर, हम प्रतिष्ठित सहकर्मी प्राप्त करेंगे, जिसे भागीदार को स्थानांतरित करना होगा ताकि वह हमसे संपर्क कर सके

 peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; });

3. कॉल प्राप्त करने के लिए, हम कॉल इवेंट के लिए हैंडलर को लटकाते हैं

 var peercall; peer.on('call', function(call) { // Answer the call, providing our mediaStream peercall=call; document.getElementById('callinfo').innerHTML="  <button onclick='callanswer()' ></button><button onclick='callcancel()' ></button>"; });

एक आने वाली कॉल के साथ, हमें एक कॉल ऑब्जेक्ट मिलता है, जिसे हम peercall ग्लोबल वेरिएबल में सेव करते हैं। साथ ही सूचना में एक इनकमिंग कॉल के बारे में एक नोटिफिकेशन होता है और 2 बटन दिखाई देंगे: स्वीकार करें और अस्वीकार करें

4. हम एक्सेप्ट बटन के लिए एक फंक्शन लिखते हैं

 function callanswer() { navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall.answer(mediaStream); //         //peercall.on ('close', onCallClose); //  -  video.srcObject = mediaStream; //      (  ) document.getElementById('callinfo').innerHTML=" ... <button onclick='callclose()' > </button>"; //,   ,     video.onloadedmetadata = function(e) {// ,    video.play(); }; setTimeout(function() { //        document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { //       document.getElementById('remVideo').play(); }; },1500); }).catch(function(err) { console.log(err.name + ": " + err.message); }); }

navigator.mediaDevices.getUserMedia - कैमरा और माइक्रोफ़ोन तक पहुंच का अनुरोध करता है। इस विधि को दिए गए ऑब्जेक्ट के डेटा में {ऑडियो: ट्रू, वीडियो: ट्रू}, आप तदनुसार केवल कैमरे या केवल माइक्रोफोन तक पहुंच का अनुरोध कर सकते हैं। आगे की टिप्पणियाँ सीधे कोड में जुड़ गईं।

सेटटाइमआउट को आनुभविक रूप से जोड़ा गया था: साथी का वीडियो चलना शुरू नहीं हुआ था, लेकिन इसने टाइमआउट के साथ काम किया।

5. कॉल बटन द्वारा डायल करने का कार्य

 function callToNode(peerId) { // navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall = peer.call(peerId,mediaStream); //,  peerId-    mediaStream peercall.on('stream', function (stream) { // ,   setTimeout(function() { document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { document.getElementById('remVideo').play(); }; },1500); }); // peercall.on('close', onCallClose); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }).catch(function(err) { console.log(err.name + ": " + err.message); }); }

पिछले पैराग्राफ में, हम आपके मीडिया स्ट्रीम का अनुरोध करते हैं। पीयर ऑब्जेक्ट के कॉल फ़ंक्शन को कॉल करने के बाद, जो कॉल ऑब्जेक्ट हमें लौटाएगा, उसे Peercall में सहेजें। हम स्ट्रीम इवेंट की प्रक्रिया का पता लगाते हैं कि उन्होंने क्या उत्तर दिया और आने वाली स्ट्रीम को संबंधित वीडियो ऑब्जेक्ट में डाल दिया

वह सब है, लेकिन ...

यदि दोनों कॉल करने वाले पीछे हैं, तो नाथ कॉल से नहीं गुजरेगा। (क्यों? यहाँ पढ़ें habr.com/en/company/yandex/blog/419951 )
इस बाधा को दूर करने के लिए, सहकर्मी ऑब्जेक्ट बनाते समय TURN सर्वर को निर्दिष्ट करना आवश्यक है (यह प्राप्त करने के लिए कहां का प्रश्न सबसे आसान नहीं था। हमें अपना स्वयं का उठाना था: Ubuntu 16.04 पर VPS। कमांड के साथ स्थापना।

 apt install coturn

)

तब दावत का निर्माण कुछ इस तरह होगा:

 var callOptions={'iceServers': [ {url: 'stun:95.xxx.xx.x9:3479', username: "user", credential: "xxxxxxxxxx"}, { url: "turn:95.xxx.xx.x9:3478", username: "user", credential: "xxxxxxxx"}] }; peer= new Peer({config: callOptions});

अंत में, पूरा कोड:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Peer</title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <p><h3> ID: </h3><span id=myid ></span></p> <input id=otherPeerId type=text placeholder="otherPeerId" > <button onclick="callToNode(document.getElementById('otherPeerId').value)"></button> <br> <video id=myVideo muted="muted" width="400px" height="auto" ></video> <div id=callinfo ></div> <video id=remVideo width="400px" height="auto" ></video> <script> var callOptions={'iceServers': [ {url: 'stun:95.xxx.xx.x9:3479', username: "user", credential: "xxxxxxxxxx"}, { url: "turn:95.xxx.xx.x9:3478", username: "user", credential: "xxxxxxxx"}] }; peer= new Peer({config: callOptions}); peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); var peercall; peer.on('call', function(call) { // Answer the call, providing our mediaStream peercall=call; document.getElementById('callinfo').innerHTML="  <button onclick='callanswer()' ></button><button onclick='callcancel()' ></button>"; }); function callanswer() { navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall.answer(mediaStream); //         //peercall.on ('close', onCallClose); //  -  video.srcObject = mediaStream; //      (  ) document.getElementById('callinfo').innerHTML=" ... <button onclick='callclose()' > </button>"; //,   ,     video.onloadedmetadata = function(e) {// ,    video.play(); }; setTimeout(function() { //        document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { //       document.getElementById('remVideo').play(); }; },1500); }).catch(function(err) { console.log(err.name + ": " + err.message); }); } function callToNode(peerId) { // navigator.mediaDevices.getUserMedia ({ audio: true, video: true }).then(function(mediaStream) { var video = document.getElementById('myVideo'); peercall = peer.call(peerId,mediaStream); peercall.on('stream', function (stream) { // ,   setTimeout(function() { document.getElementById('remVideo').srcObject = peercall.remoteStream; document.getElementById('remVideo').onloadedmetadata= function(e) { document.getElementById('remVideo').play(); }; },1500); }); // peercall.on('close', onCallClose); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }).catch(function(err) { console.log(err.name + ": " + err.message); }); } </script> </body>

Chrome, Opera, Firefox में Windows7 और Ubuntu 18.04 के तहत इस समाधान का सफलतापूर्वक परीक्षण किया गया था। Chrome Android और MacOS पर भी काम करता है, लेकिन यह iPhone और iPad पर काम नहीं करता है।

PeerJS पर ब्राउज़र में वीडियो कॉल। जल्दी शुरू करो

More articles: