WebRTC # 1 - प्राप्त करना

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

Habré (hehehe) में किसी कारण से मुझे ऐसे लेख नहीं मिले जो WebRTC के तकनीकी पक्ष में थे, इसके उपयोग के उदाहरण दिखाएंगे।

खैर, मैं आपको योजनाबद्ध, कोड के साथ खुश करने की कोशिश करूंगा। सामान्य तौर पर, वास्तव में सभी को क्या पसंद है। तो चलो कट के नीचे चलते हैं, मेरे प्रिय पाठक।

यह क्या है

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

संक्षेप में, WebRTC है:
1. मीडिया स्ट्रीम (getUserMedia)।
2. पीयर कनेक्शन।

नीचे मैं संक्षेप में इन तत्वों का वर्णन करूंगा, लेकिन मैं अभी भी लेख के अगले दो हिस्सों के लिए एक विस्तृत विवरण छोड़ना चाहता हूं।

मीडिया धाराओं

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

WebRTC पब्लिक एपीआई के बाद, हमें वैश्विक नेविगेटर ऑब्जेक्ट के getUserMedia विधि का उपयोग करने की आवश्यकता है।
पास करने के लिए तीन पैरामीटर हैं:
- हमें क्या चाहिए (ऑडियो / वीडियो) की एक सूची के साथ एक वस्तु
- सफलता कॉलबैक
- त्रुटि कॉलबैक

और अभी के लिए, विभिन्न ब्राउज़रों में उपसर्गों की उपस्थिति के कारण बैसाखी की आवश्यकता है:

var getUserMedia; var browserUserMedia = navigator.webkitGetUserMedia || // WebKit navigator.mozGetUserMedia || // Mozilla FireFox navigator.getUserMedia; // 2013... if ( !browserUserMedia ) throw 'Your browser doesn\'t support WebRTC'; getUserMedia = browserUserMedia.bind( navigator ); getUserMedia( { audio: true, video: true }, function( stream ) { console.log( stream ); }, function( err ) { console.log( err ); } ); 

ब्राउज़र प्यारा से अनुमति मांगेगा।



हुर्रे! हमें ऑडियो और वीडियो के साथ एक स्ट्रीम ऑब्जेक्ट मिला है। और इसके साथ क्या करना है?
हम HTML5 टैग "वीडियो" का उपयोग करके उपयोगकर्ता को यह व्यवसाय दिखा सकते हैं।

 <video id="video" autoplay></video> 

 var videoElement = document.getElementById( 'video' ); videoElement.src = URL.createObjectURL( stream ); 

और थोड़ी चीनी। अब आप वीडियो तत्व को html5 फ़िल्टर (वेबकिट) सुरक्षित रूप से लागू कर सकते हैं।

 #video { -webkit-filter: sepia(1); } 

कूल, है ना?

पीयर कनेक्शन

पीयर कनेक्शन वही एपीआई है जो आपको ब्राउज़रों के बीच पीयर-टू-पीयर कनेक्शन स्थापित करने की अनुमति देता है।

निम्नलिखित दो ग्राहकों के बीच संबंध का एक सरल आरेख है।


- पहला क्लाइंट तथाकथित क्लाइंट को सर्वर (PeerConnection Observer) के माध्यम से तथाकथित क्लाइंट को भेजता है।
- दूसरा क्लाइंट (रिमोट पीयर) पहले क्लाइंट को सर्वर के माध्यम से प्रतिक्रिया भेजता है।
- एक पी 2 पी कनेक्शन ग्राहकों के बीच स्थापित किया गया है।

यह उल्लेखनीय है कि भविष्य में, इस तरह के कनेक्शन के संचालन के लिए, सर्वर वैकल्पिक हो जाता है। यानी इसे बंद करने के बाद, डेटा भी प्रसारित किया जाएगा। कनेक्शन को ठीक से बंद करने, प्रतिभागियों को स्ट्रीम में जोड़ने, आदि के लिए पियरकॉन्सेक्शन ऑब्जर्वर की आगे की भागीदारी आवश्यक है।

विनिर्देश RTCPeerConnection निर्माता को निर्दिष्ट करता है, लेकिन अभी तक हमें विभिन्न ब्राउज़रों के लिए उपसर्गों का उपयोग करना है:

 var PeerConnection = webkitRTCPeerConnection || // WebKit mozRTCPeerConnection || // Mozilla FireFox RTCPeerConnection; // 2013... if ( !PeerConnection ) throw 'Your browser doesn\'t support WebRTC'; 

यहां पहले से ही सर्वर साइड पर विचार करने का समय है, लेकिन मैं पहले लेख को अधिक अवलोकन छोड़ना चाहता हूं।

कमियों

"निरीक्षण" को जारी रखते हुए, परियोजना के अंधेरे पक्ष पर ध्यान देना आवश्यक है:
1. एपीआई बदल रहा है क्योंकि परियोजना सक्रिय विकास के तहत है । इसलिए, कभी-कभी आपको अपना कोड बदलना होगा।
2. ऑडियो और वीडियो कोडेक्स के अनुमोदन से पहले, क्रॉस-प्लेटफॉर्म के साथ समस्याएं हो सकती हैं।
3. क्रॉस-ब्राउज़र संगतता। हमारे पास निम्न चित्र है:

	क्रोम	फ़ायरफ़ॉक्स	ओपेरा
getUserMedia	स्थिर (संस्करण 21 के अनुसार)	17	12
पीयर कनेक्शन	स्थिर (संस्करण 23 के अनुसार)	हर रात को	-

फिर वह सब क्यों है?

मुझे लगता है कि निकट भविष्य में हम अभी भी आधुनिक ब्राउज़रों में एक स्थिर WebRTC API प्राप्त करेंगे। इससे वेब विकास में अविश्वसनीय अवसर खुलेंगे। अभी इस परियोजना में दिलचस्पी होने के कारण, यह बहुत तेजी से घुसना और बाद में इसका उपयोग करना शुरू करना संभव होगा।
और किसी विशेष ब्राउज़र (उदाहरण के लिए Chrome Stable) के लिए डिज़ाइन की गई कोई भी परियोजना रद्द नहीं की गई है। हाँ, और दिलचस्प, सही?

आगे और भी

लेखों की श्रृंखला के पहले भाग को समाप्त करते हुए, मैं एक कठिन योजना बनाना चाहूंगा:
1. वेबआरटीसी # 1 - प्राप्त करना
2. वेबआरटीसी # 2 - मीडिया स्ट्रीम
3. वेबआरटीसी # 3 - पीयर कनेक्शन: सर्वर साइड
4. वेबआरटीसी # 4 - पीयर कनेक्शन: क्लाइंट साइड
5. ...

पुनश्च यदि आप अधिक सामग्री की उम्मीद करते हैं, तो अधिक शपथ न लें। यह विषय मेरे लिए बहुत दिलचस्प है, इसलिए मैं इसे जारी रखते हुए, चक्र को जारी रखने में बहुत दिलचस्पी रखता हूं।

UPD: टिप्पणियों के लिए धन्यवाद GeorP और egobrain ।