👌🏾 👩🏾‍🤝‍👩🏻 🤙🏿 Webrtc, पीयर कनेक्शन - ब्राउज़र में एक पूर्ण वीडियो चैट बना रहा है 🤴 ❌ 😐

परिचय

हबल पर पहले से ही बार-बार उल्लेख किया गया था, मैं कार्यान्वयन के तकनीकी हिस्से के बारे में थोड़ा बताना और एक छोटे वीडियो चैट के निर्माण पर प्रकाश डालना चाहूंगा। मैं तुरंत एक आरक्षण करना चाहता हूं कि वेब्रट का कार्यान्वयन लगातार बदल रहा है, जिसमें एपीआई फ़ंक्शंस के नाम और उनके पैरामीटर शामिल हैं।
हर कोई जो सिर्फ यह देखना चाहता है कि यह सब कैसे काम करता है अभी यहां है: apprtc.appspot.com Google डेमो आपको सभी की जरूरत है लिंक का पालन करें और इसे कमरे के नंबर के साथ किसी और को भेजें। अंत में, आपको संख्याओं को बदलने की आवश्यकता है यदि यह पता चला कि कमरा भरा हुआ है। कौन परवाह करता है कि यह सब कैसे काम करता है? बिल्ली में आपका स्वागत है।

सामान्य भाग

Webrtc एपीआई में ही तीन भाग होते हैं:

getUserMedia (MediaStream), यदि सरलीकृत किया जाता है, तो यह एक ब्राउज़र में वीडियो स्ट्रीम कैप्चर करना है, उदाहरण के लिए, बस अपने आप को देखें;)।
एक हब्र पर एक अच्छा लेख है ।
RTCPeerConnection का उपयोग ब्राउज़रों के बीच सीधे संवाद करने के लिए किया जाता है। दरअसल, RTCPeerConnection के बारे में मुख्य रूप से बात आगे बढ़ेगी।
RTCDataChannel: विभिन्न डेटा के आदान-प्रदान के लिए आवश्यक: पाठ, फाइलें और अन्य। फिलहाल, वे लिखते हैं कि यह केवल परीक्षण संस्करण में 25 क्रोम में उपलब्ध है, झंडे शामिल किए बिना यह केवल 27 क्रोम में उपलब्ध हो जाएगा।

पीयर कनेक्शन

तो चलिए शुरू करते हैं। वास्तव में, पहिया को सुदृढ़ नहीं करने के लिए, इस डेमो से कोड लेने का फैसला किया गया था, इसे थोड़ा और सार्वभौमिक बनाएं (यह Google ऐप इंजन से बंधा हुआ है) और कुछ स्थानों में सरल है। यहां एक और एडेप्टर। जेएस लाइब्रेरी जुड़ा हुआ है - यह कोड के कुछ एकीकरण के लिए आवश्यक है, क्योंकि बहुत कुछ अभी भी उपसर्गों के साथ लिखा गया है, और मुख्य ब्राउज़रों के लिए भी अलग है।

RTCPeerConnection को ही काफी सरलता कहा जाता है:

// Stun          ,    NAT,  , , google    . var pc_config = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]}; var pc_constraints = {"optional": [{"DtlsSrtpKeyAgreement": true}]}; pc = new RTCPeerConnection(pc_config, pc_constraints); pc.onicecandidate = onIceCandidate; pc.onaddstream = onRemoteStreamAdded;

पुराने संस्करण में, RTCPeerConnection () में थोड़े अलग मापदंडों को पारित किया गया था।

आरटीसीपीरेंक्शन शुरू करना और शुरू करना

 function initialize() { //          localVideo = document.getElementById("localVideo"); miniVideo = document.getElementById("miniVideo"); remoteVideo = document.getElementById("remoteVideo"); //                PeerConnection getUserMedia( {'audio':true, 'video':{"mandatory": {}, "optional": []}}, function(localVideo, stream){ //   PeerConnection. localVideo.src = window.URL.createObjectURL(stream); if (initiator) maybeStart(); }, function(error){console.log("Failed to get access to local media. Error code was " + error.code);} ); if (initiator) maybeStart(); sendMessage(); }

संदेश सेवा

इस बिंदु पर, ब्राउज़र एक दूसरे से संपर्क करने का तरीका जानने के लिए विभिन्न संदेशों का आदान-प्रदान करते हैं। उम्मीदवार प्रकार के संदेशों में, विभिन्न विकल्प आते हैं, जिनमें सर्वर स्टन से प्राप्त किया जाता है।

 //           . S->C: {"type":"candidate","label":1,"id":"video","candidate":"a=candidate:2437072876 1 udp 2113937151 192.168.1.2 35191 typ host generation 0\r\n"} S->C: {"type":"candidate","label":0,"id":"audio","candidate":"a=candidate:941443129 1 udp 1845501695 111.222.111.222 35191 typ srflx raddr 192.168.1.2 rport 35191 generation 0\r\n"}

 // CallBack ,    RTCPeerConnection     ,      . ,        -   websokets,  ajax. pc.onicecandidate = onIceCandidate; function onIceCandidate(event) { if (event.candidate) { sendMessage({type: 'candidate', label: event.candidate.sdpMLineIndex, id: event.candidate.sdpMid, candidate: event.candidate.candidate}); } else { console.log("End of candidates."); } }

सर्वर के माध्यम से एक संदेश भेजने का हमारा कार्य काफी सरल है, इसलिए छोटे परीक्षण के मामले को लिखने और सर्वर पक्ष को लागू करने के लिए अजाक्स को एक सरल और अधिक किफायती विकल्प के रूप में उपयोग करने का निर्णय लिया गया:

 function sendMessage(message) { var msgString = JSON.stringify(message); console.log('C->S: ' + msgString); $.ajax({ type: "POST", url: "/chat/tv", dataType: "json", data: { room:room, user_id:user_id, last:last, mess:msgString, is_new:is_new }, success: function(data){ console.log(['data.msg', data.msg]) if( data.last) last = data.last; for (var res in data.msg){ var msg = data.msg[res]; processSignalingMessage(msg[2]); } } }); is_new = 0; function repeat() { timeout = setTimeout(repeat, 5000); sendMessage(); } if (!timeout) repeat(); }

यदि अनुरोध सफल रहा, तो दूसरे ब्राउज़र से संचित संदेश प्रतिक्रिया में आते हैं:

 function processSignalingMessage(message) { //               . //        peeronnection var msg = JSON.parse(message); if (msg.type === 'offer') { if (!initiator && !started){ if (!started && localStream ) { createPeerConnection(); pc.addStream(localStream); started = true; if (initiator) pc.createOffer(setLocalAndSendMessage, null, {"optional": [], "mandatory": {"MozDontOfferDataChannel": true}}); } pc.setRemoteDescription(new RTCSessionDescription(msg)); pc.createAnswer(setLocalAndSendMessage, null, sdpConstraints); } else if (msg.type === 'answer' && started) { pc.setRemoteDescription(new RTCSessionDescription(msg)); } else if (msg.type === 'candidate' && started) { var candidate = new RTCIceCandidate({sdpMLineIndex:msg.label, candidate:msg.candidate}); pc.addIceCandidate(candidate); } else if (msg.type === 'bye' && started) { pc.close(); } } function setLocalAndSendMessage(sessionDescription) { //  preferOpus  . sessionDescription.sdp = preferOpus(sessionDescription.sdp); pc.setLocalDescription(sessionDescription); sendMessage(sessionDescription); }

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

 pc.onaddstream = onRemoteStreamAdded; function onRemoteStreamAdded(event) { remoteVideo.src = window.URL.createObjectURL(event.stream); remoteStream = event.stream; } setTimeout(initialize, 1);

सर्वर साइड

हमारा सर्वर भाग काफी सरल होना चाहिए, सर्वर को सीधे संवाद करने से पहले ब्राउज़रों का समन्वय करना चाहिए।
और एक अन्य बारीकियों, var सर्जक = {{आरंभकर्ता}} पैरामीटर निर्धारित करता है कि कौन सा ब्राउज़र कनेक्ट होगा और कौन सा प्रतीक्षा कर रहा है।
अर्थात्, एक के पास क्रमशः 0, अन्य 1 होना चाहिए।

सर्वर का हिस्सा काफी सरल है, जीईटी अनुरोध पर हम डेटाबेस में एक कमरा बनाते हैं, इसकी आईडी को टेम्पलेट में स्थानांतरित करते हैं, अगर यह डेटाबेस में नहीं है, तो एक नया बनाएं।

 def chat(room): doc = db.chat.find_one({'_id':room}) initiator = 1 if not doc: initiator = 0 doc = {'_id':room, 'mess': []} db.chat.save(doc) return templ('rtc.tpl', initiator = initiator, room=room)

एक पोस्ट अनुरोध पर, हम ग्राहक से डेटा स्वीकार करते हैं और यदि ग्राहक ने एक गैर-रिक्त संदेश भेजा है, तो हम इसकी सामग्री को कमरे में लाते हैं, फिर अग्रभूमि में हम जांचते हैं कि प्राप्त संदेश बिल्कुल "चैट में ब्राउज़र से" हैं और वे नए हैं तो हम उन्हें अपने ब्राउज़र पर वापस करते हैं।

 def chat_post(): lst = 0.0; msg = [] room = get_post('room') user_id= get_post('user_id') last= float(get_post('last', 0)) mess= get_post('mess') doc = db.chat.find_one({'_id':room}) if mess: doc['mess'].append((time.time(), mess, user_id)) db.chat.save(doc) for i_time, i_msg, i_user in doc['mess']: if i_user != user_id and i_time > last: lst = i_time msg.append((i_time, i_user, i_msg)) if not lst: lst = last return json.dumps({'result': 'ok', 'last': lst, 'msg': msg})

उत्तरी भाग का यह विवरण पूरा हो सकता है।

सूत्रों का कहना है:
Html5rocks.com पर Webrtc की मदद
आधिकारिक वेबसाइट webrtc