WebRTC का इस्तेमाल शुरू करें

Sam Dutton

लंबे समय से चल रही जंग में WebRTC, बिना किसी सीमा वाले वेब के लिए एक नया ज़रिया है.

ब्रेंडन ईच, JavaScript के आविष्कारक

प्लगिन के बिना रीयल-टाइम कम्यूनिकेशन

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

क्या आप इसे आज़माना है? WebRTC, डेस्कटॉप और मोबाइल पर Google Chrome, Safari, Firefox, और Opera में उपलब्ध है. appr.tc पर मौजूद कोई आसान वीडियो चैट ऐप्लिकेशन, शुरुआत करने के लिए एक अच्छा तरीका है:

  1. अपने ब्राउज़र में appr.tc खोलें.
  2. चैट रूम से जुड़ने के लिए, शामिल हों पर क्लिक करें. इसके बाद, ऐप्लिकेशन को वेबकैम इस्तेमाल करने की अनुमति दें.
  3. पेज के आखिर में दिखाए गए यूआरएल को नए टैब में या किसी दूसरे कंप्यूटर पर, बेहतर तरीके से खोलें.

तुरंत शुरू करना

क्या आपके पास इस लेख को पढ़ने का समय नहीं है या आपको सिर्फ़ कोड चाहिए?

  • WebRTC के बारे में खास जानकारी पाने के लिए, Google I/O का यह वीडियो या ये स्लाइड देखें:
  • अगर आपने getUserMedia एपीआई का इस्तेमाल नहीं किया है, तो HTML5 में ऑडियो और वीडियो कैप्चर करना और samepl.info getUserMedia देखें.
  • RTCPeerConnection एपीआई के बारे में जानने के लिए, नीचे दिया गया उदाहरण और 'simpl.info RTCPeerConnection' देखें.
  • यह जानने के लिए कि WebRTC, सिग्नलिंग के लिए सर्वर का इस्तेमाल कैसे करता है, और फ़ायरवॉल और एनएटी ट्रैवर्सल कैसे इस्तेमाल करता है, appr.tc से कोड और कंसोल लॉग देखें.
  • क्या आपको इंतज़ार नहीं करना, अभी WebRTC को आज़माना है? WebRTC JavaScript API का इस्तेमाल करने वाले 20 से ज़्यादा डेमो में से कुछ आज़माएं.
  • आपकी मशीन और WebRTC में समस्या आ रही है? WebRTC की समस्या हल करने वाले टूल पर जाएं.

इसके अलावा, सीधे WebRTC कोडलैब पर जाएं. यहां एक आसान सिग्नलिंग सर्वर के साथ-साथ वीडियो चैट वाला पूरा ऐप्लिकेशन बनाने के बारे में सिलसिलेवार निर्देश दिए गए हैं.

WebRTC का बहुत कम इतिहास

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

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

Gmail वीडियो चैट 2008 में लोकप्रिय हुआ और 2011 में Google ने Hangouts की शुरुआत की, जिसमें Talk (Gmail की तरह) का इस्तेमाल किया जाता है. Google ने GIPS को खरीदा. यह एक ऐसी कंपनी है जिसने आरटीसी के लिए ज़रूरी कई कॉम्पोनेंट डेवलप किए हैं, जैसे कि कोडेक और इको रद्द करने की तकनीक. Google ने GIPS की बनाई टेक्नोलॉजी को ओपन सोर्स बनाया और इंटरनेट इंजीनियरिंग टास्क फ़ोर्स (आईईटीएफ़) और वर्ल्ड वाइड वेब कंसोर्टियम (W3C) के मानक निकायों के साथ काम किया, ताकि इंडस्ट्री की सहमति ली जा सके. मई 2011 में, एरिकसन ने WebRTC को पहली बार लागू करने वाला बनाया.

WebRTC ने रीयल-टाइम, प्लगिन-फ़्री वीडियो, ऑडियो, और डेटा कम्यूनिकेशन के लिए, ओपन स्टैंडर्ड लागू किए हैं. ज़रूरत वाकई थी:

  • कई वेब सेवाओं ने RTC का इस्तेमाल किया, लेकिन उनके लिए डाउनलोड, खास ऐप्लिकेशन या प्लगिन की ज़रूरत थी. इनमें Skype, Facebook, और Hangouts शामिल हैं.
  • प्लग इन डाउनलोड करना, इंस्टॉल करना और अपडेट करना जटिल, गड़बड़ी का खतरा और परेशान करने वाला काम है.
  • प्लगिन को डिप्लॉय करना, डीबग करना, समस्या को हल करना, टेस्ट करना, और उनका रखरखाव करना मुश्किल होता है. इसके लिए, मुश्किल और महंगी टेक्नोलॉजी के साथ लाइसेंस और इंटिग्रेशन की ज़रूरत हो सकती है. आम तौर पर, लोगों को प्लगिन इंस्टॉल करने के लिए मनाना अक्सर मुश्किल होता है!

WebRTC प्रोजेक्ट के बुनियादी सिद्धांत हैं कि इसके एपीआई ओपन सोर्स, मुफ़्त, स्टैंडर्ड, और वेब ब्राउज़र में पहले से मौजूद होने चाहिए. साथ ही, ये मौजूदा टेक्नोलॉजी की तुलना में ज़्यादा असरदार होने चाहिए.

हम अब कहां हैं?

WebRTC का इस्तेमाल कई ऐप्लिकेशन में किया जाता है, जैसे कि Google Meet. WebRTC को WebKitGTK+ और Qt के खास ऐप्लिकेशन के साथ भी इंटिग्रेट किया गया है.

WebRTC, इन तीन एपीआई को लागू करता है: - MediaStream (इसे getUserMedia भी कहा जाता है) - RTCPeerConnection - RTCDataChannel

एपीआई के बारे में इन दो खास जानकारी में बताया गया है:

Chrome, Safari, Firefox, Edge, और Opera. ये तीनों एपीआई मोबाइल और डेस्कटॉप पर काम करते हैं.

getUserMedia: डेमो और कोड के लिए, WebRTC सैंपल देखें या क्रिस विल्सन के शानदार उदाहरण आज़माएं. इनमें वेब ऑडियो के लिए getUserMedia को इनपुट के तौर पर इस्तेमाल किया जाता है.

RTCPeerConnection: सामान्य डेमो और पूरी तरह से काम करने वाले वीडियो-चैट ऐप्लिकेशन के लिए, WebRTC के पीयर कनेक्शन और appr.tc देखें. यह ऐप्लिकेशन adapter.js का इस्तेमाल करता है. यह एक JavaScript शिम है जिसे WebRTC समुदाय की मदद से मैनेज किया जाता है. इससे ब्राउज़र के अंतर और खास जानकारी में किए गए बदलावों को हटाया जा सकता है.

RTCDataChannel: यह कैसे दिखता है, यह जानने के लिए WebRTC सैंपल देखें. इससे डेटा-चैनल का कोई डेमो देखा जा सकता है.

WebRTC कोडलैब, वीडियो चैट और फ़ाइल शेयर करने के लिए एक आसान ऐप्लिकेशन बनाने के लिए, तीनों एपीआई के इस्तेमाल का तरीका दिखाता है.

आपका पहला WebRTC

WebRTC ऐप्लिकेशन को कई काम करने होंगे:

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

स्ट्रीमिंग डेटा को हासिल करने और उससे संपर्क करने के लिए, WebRTC ये एपीआई लागू करता है:

  • MediaStream को उपयोगकर्ता के कैमरे और माइक्रोफ़ोन जैसी डेटा स्ट्रीम का ऐक्सेस मिलता है.
  • RTCPeerConnection, एन्क्रिप्ट (सुरक्षित) करने और बैंडविथ मैनेजमेंट की सुविधा के साथ ऑडियो या वीडियो कॉल करने की सुविधा देता है.
  • RTCDataChannel, सामान्य डेटा का पीयर-टू-पीयर कम्यूनिकेशन कर सकता है.

(इसके बाद, WebRTC के नेटवर्क और सिग्नल से जुड़े पहलुओं पर विस्तार से चर्चा की गई.)

MediaStream एपीआई (इसे getUserMedia एपीआई भी कहा जाता है)

MediaStream एपीआई, मीडिया की सिंक की गई स्ट्रीम दिखाता है. उदाहरण के लिए, कैमरे और माइक्रोफ़ोन इनपुट से ली गई स्ट्रीम में सिंक किए गए वीडियो और ऑडियो ट्रैक होते हैं. (MediaStreamTrack और <track> एलिमेंट में भ्रम न हो, क्योंकि यह पूरी तरह से अलग है.)

MediaStream एपीआई को समझने का सबसे आसान तरीका यह है कि इसे जंगल में देखें:

  1. अपने ब्राउज़र में, WebRTC सैंपल getUserMedia पर जाएं.
  2. कंसोल खोलें.
  3. ग्लोबल स्कोप में मौजूद stream वैरिएबल की जांच करें.

हर MediaStream में एक इनपुट होता है, जो getUserMedia() से जनरेट किया गया MediaStream हो सकता है. साथ ही, एक आउटपुट भी हो सकता है, जो किसी वीडियो एलिमेंट या RTCPeerConnection को भेजा जा सकता है.

getUserMedia() वाला तरीका, MediaStreamConstraints ऑब्जेक्ट पैरामीटर को लेता है. साथ ही, ऐसा Promise दिखाता है जो MediaStream ऑब्जेक्ट में बदल जाता है.

हर MediaStream में label होता है, जैसे कि 'Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ'. getAudioTracks() और getVideoTracks() तरीकों की मदद से, MediaStreamTrack का कलेक्शन दिखाया जाता है.

getUserMedia वाले उदाहरण में, stream.getAudioTracks() एक खाली अरे दिखाता है (क्योंकि कोई ऑडियो नहीं होता). साथ ही, यह मानते हुए कि कोई चालू वेबकैम कनेक्ट है, stream.getVideoTracks() एक MediaStreamTrack की अरे दिखाता है, जो वेबकैम से स्ट्रीम को दिखाता है. हर MediaStreamTrack में एक तरह का ('video' या 'audio'), label ('FaceTime HD Camera (Built-in)' जैसा कुछ) होता है. साथ ही, यह ऑडियो या वीडियो के एक या एक से ज़्यादा चैनलों के बारे में बताता है. इस मामले में, सिर्फ़ एक वीडियो ट्रैक है और ऑडियो नहीं है, लेकिन इस मामले में आसानी से इसका इस्तेमाल किया जा सकता है. उदाहरण के लिए, ऐसा चैट ऐप्लिकेशन जिसमें सामने वाले कैमरे, पीछे के कैमरे, माइक्रोफ़ोन, और स्क्रीन शेयर करने वाले ऐप्लिकेशन से स्ट्रीम होती हैं.

srcObject एट्रिब्यूट को सेट करके, किसी वीडियो एलिमेंट के साथ MediaStream को अटैच किया जा सकता है. पहले ऐसा URL.createObjectURL() की मदद से बनाए गए ऑब्जेक्ट यूआरएल पर src एट्रिब्यूट को सेट करके किया जाता था. हालांकि, इसे अब बंद कर दिया गया है.

getUserMedia का इस्तेमाल, Web Audio API के लिए इनपुट नोड के तौर पर भी किया जा सकता है:

// Cope with browser differences.
let audioContext;
if (typeof AudioContext === 'function') {
  audioContext = new AudioContext();
} else if (typeof webkitAudioContext === 'function') {
  audioContext = new webkitAudioContext(); // eslint-disable-line new-cap
} else {
  console.log('Sorry! Web Audio not supported.');
}

// Create a filter node.
var filterNode = audioContext.createBiquadFilter();
// See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
filterNode.type = 'highpass';
// Cutoff frequency. For highpass, audio is attenuated below this frequency.
filterNode.frequency.value = 10000;

// Create a gain node to change audio volume.
var gainNode = audioContext.createGain();
// Default is 1 (no change). Less than 1 means audio is attenuated
// and vice versa.
gainNode.gain.value = 0.5;

navigator.mediaDevices.getUserMedia({audio: true}, (stream) => {
  // Create an AudioNode from the stream.
  const mediaStreamSource =
    audioContext.createMediaStreamSource(stream);
  mediaStreamSource.connect(filterNode);
  filterNode.connect(gainNode);
  // Connect the gain node to the destination. For example, play the sound.
  gainNode.connect(audioContext.destination);
});

Chromium का इस्तेमाल करने वाले ऐप्लिकेशन और एक्सटेंशन में getUserMedia भी शामिल हो सकता है. मेनिफ़ेस्ट में audioCapture और/या videoCapture अनुमतियां जोड़ने पर, इंस्टॉल किए जाने पर सिर्फ़ एक बार अनुरोध किया जा सकता है और अनुमति दी जा सकती है. इसके बाद, उपयोगकर्ता से कैमरा या माइक्रोफ़ोन ऐक्सेस करने की अनुमति नहीं मांगी जाती.

getUserMedia() के लिए सिर्फ़ एक बार अनुमति देनी होगी. पहली बार, ब्राउज़र के इंफ़ोबार में 'अनुमति दें' बटन दिखता है. Chrome ने 2015 के आखिर में, getUserMedia() के लिए एचटीटीपी ऐक्सेस को बंद कर दिया था, क्योंकि इसे शानदार सुविधा की कैटगरी में रखा गया था.

इसका मकसद सिर्फ़ कैमरा या माइक्रोफ़ोन ही नहीं, बल्कि किसी भी स्ट्रीमिंग डेटा सोर्स के लिए MediaStream को चालू करना है. इससे, सेव किए गए डेटा या सेंसर या दूसरे इनपुट जैसे आर्बिट्रेरी डेटा सोर्स से स्ट्रीम करने की सुविधा चालू हो जाएगी.

अन्य JavaScript API और लाइब्रेरी के साथ getUserMedia() काम करता है:

  • वेबकैम टॉय एक फ़ोटोबूथ ऐप्लिकेशन है. यह WebGL का इस्तेमाल करके ऐसी फ़ोटो में अजीब और शानदार इफ़ेक्ट जोड़ता है जिन्हें स्थानीय तौर पर शेयर या सेव किया जा सकता है.
  • FaceKat, फ़ेस ट्रैक करने वाला एक गेम है, जिसे headtrackr.js की मदद से बनाया गया है.
  • ASCII कैमरा, ASCII इमेज जनरेट करने के लिए कैनवस एपीआई का इस्तेमाल करता है.
idevelop.ro/ascii-camera से जनरेट की गई ASCII इमेज
gUM ASCII आर्ट!

कंस्ट्रेंट

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

उदाहरण के लिए, WebRTC सैंपल getUserMedia: रिज़ॉल्यूशन चुनें.

ऐसे कंस्ट्रेंट की वैल्यू सेट करने से DOMException या OverconstrainedError मिलता है जिसकी अनुमति नहीं है. जैसे, अनुरोध किया गया रिज़ॉल्यूशन उपलब्ध न होने पर. इसे काम करने के तरीके के तौर पर देखने के लिए, WebRTC सैंपल getUserMedia: रिज़ॉल्यूशन चुनें पर डेमो देखें.

स्क्रीन और टैब कैप्चर

Chrome ऐप्लिकेशन, chrome.tabCapture और chrome.desktopCapture एपीआई की मदद से, किसी एक ब्राउज़र टैब या पूरे डेस्कटॉप का लाइव वीडियो शेयर करने की सुविधा भी देते हैं. डेमो देखने और ज़्यादा जानकारी के लिए, WebRTC के साथ स्क्रीन शेयर करना देखें. लेख कुछ साल पुराना है, लेकिन यह अब भी दिलचस्प है.)

प्रयोग के तौर पर इस्तेमाल होने वाले chromeMediaSource कंस्ट्रेंट का इस्तेमाल करके, Chrome में MediaStream सोर्स के तौर पर स्क्रीन कैप्चर का इस्तेमाल भी किया जा सकता है. ध्यान दें कि स्क्रीन कैप्चर करने के लिए एचटीटीपीएस ज़रूरी है. इसका इस्तेमाल सिर्फ़ डेवलपमेंट के लिए किया जाना चाहिए, क्योंकि इसे कमांड लाइन फ़्लैग के ज़रिए चालू किया गया है. इस बारे में इस पोस्ट में बताया गया है.

सिग्नलिंग: सेशन कंट्रोल, नेटवर्क, और मीडिया की जानकारी

WebRTC, ब्राउज़र (जिसे पीयर भी कहा जाता है) के बीच स्ट्रीमिंग डेटा का कम्यूनिकेशन करने के लिए, RTCPeerConnection का इस्तेमाल करता है. हालांकि, इसे कम्यूनिकेशन और कंट्रोल मैसेज भेजने के लिए भी एक सिस्टम की ज़रूरत होती है. इस प्रोसेस को सिग्नलिंग कहते हैं. सिग्नल देने के तरीके और प्रोटोकॉल के बारे में WebRTC के बारे में नहीं बताया गया है. सिग्नलिंग, RTCPeerConnection एपीआई का हिस्सा नहीं है.

इसके बजाय, WebRTC ऐप्लिकेशन डेवलपर अपनी पसंद का कोई भी मैसेजिंग प्रोटोकॉल चुन सकते हैं, जैसे कि SIP या XMPP और कोई भी सही डूप्लेक्स (टू-वे) कम्यूनिकेशन चैनल. appr.tc के उदाहरण में, सिग्नलिंग सिस्टम के तौर पर XHR और Channel API का इस्तेमाल किया गया है. कोडलैब, नोड सर्वर पर चलने वाले Socket.io का इस्तेमाल करता है.

सिग्नलिंग का इस्तेमाल तीन तरह की जानकारी का लेन-देन करने के लिए किया जाता है:

  • सेशन कंट्रोल मैसेज: बातचीत शुरू या बंद करने और गड़बड़ियों की रिपोर्ट करने के लिए.
  • नेटवर्क कॉन्फ़िगरेशन: बाहर की दुनिया में, आपके कंप्यूटर का आईपी पता और पोर्ट क्या है?
  • मीडिया क्षमताएं: आपका ब्राउज़र और जिस ब्राउज़र से संपर्क करना चाहता है, वह कौनसे कोडेक और रिज़ॉल्यूशन हैंडल कर सकता है?

पीयर-टू-पीयर स्ट्रीमिंग शुरू होने से पहले सिग्नलिंग के ज़रिए जानकारी का लेन-देन पूरा होना ज़रूरी है.

उदाहरण के लिए, मान लें कि ऐलिस, बॉब से बातचीत करना चाहती हैं. यहां W3C WebRTC स्पेसिफ़िकेशन का एक कोड सैंपल दिया गया है. इसमें सिग्नल की प्रोसेस को दिखाया गया है. यह कोड, createSignalingChannel() तरीके में बनाए गए कुछ सिग्नलिंग सिस्टम की मौजूदगी मानता है. यह भी ध्यान रखें कि Chrome और Opera पर, फ़िलहाल RTCPeerConnection पहले लगा है.

// handles JSON.stringify/parse
const signaling = new SignalingChannel();
const constraints = {audio: true, video: true};
const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
const pc = new RTCPeerConnection(configuration);

// Send any ice candidates to the other peer.
pc.onicecandidate = ({candidate}) => signaling.send({candidate});

// Let the "negotiationneeded" event trigger offer generation.
pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    // Send the offer to the other peer.
    signaling.send({desc: pc.localDescription});
  } catch (err) {
    console.error(err);
  }
};

// Once remote track media arrives, show it in remote video element.
pc.ontrack = (event) => {
  // Don't set srcObject again if it is already set.
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

// Call start() to initiate.
async function start() {
  try {
    // Get local stream, show it in self-view, and add it to be sent.
    const stream =
      await navigator.mediaDevices.getUserMedia(constraints);
    stream.getTracks().forEach((track) =>
      pc.addTrack(track, stream));
    selfView.srcObject = stream;
  } catch (err) {
    console.error(err);
  }
}

signaling.onmessage = async ({desc, candidate}) => {
  try {
    if (desc) {
      // If you get an offer, you need to reply with an answer.
      if (desc.type === 'offer') {
        await pc.setRemoteDescription(desc);
        const stream =
          await navigator.mediaDevices.getUserMedia(constraints);
        stream.getTracks().forEach((track) =>
          pc.addTrack(track, stream));
        await pc.setLocalDescription(await pc.createAnswer());
        signaling.send({desc: pc.localDescription});
      } else if (desc.type === 'answer') {
        await pc.setRemoteDescription(desc);
      } else {
        console.log('Unsupported SDP type.');
      }
    } else if (candidate) {
      await pc.addIceCandidate(candidate);
    }
  } catch (err) {
    console.error(err);
  }
};

पहला, ऐलिस और बॉब, नेटवर्क की जानकारी शेयर करते हैं. (उम्मीदवार खोजना एक्सप्रेशन, ICE फ़्रेमवर्क का इस्तेमाल करके नेटवर्क इंटरफ़ेस और पोर्ट ढूंढने की प्रोसेस के बारे में बताता है.

  1. ऐलिस, onicecandidate हैंडलर की मदद से RTCPeerConnection ऑब्जेक्ट बनाती हैं. यह ऑब्जेक्ट, नेटवर्क के कैंडिडेट उपलब्ध होने पर चलता है.
  2. ऐलिस, बॉब को सिलसिलेवार उम्मीदवार डेटा भेजती हैं, जो वे इस्तेमाल किए जा रहे किसी भी सिग्नल चैनल के ज़रिए करते हैं. जैसे, WebSocket या कोई दूसरा तरीका.
  3. जब वैभव को ऐलिस से उम्मीदवार का मैसेज मिलता है, तो वे addIceCandidate को कॉल करके, उन्हें रिमोट सहयोगी के ब्यौरे में शामिल करते हैं.

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

  1. ऐलिस, RTCPeerConnection createOffer() तरीके का इस्तेमाल करती हैं. इससे मिलने वाले रिटर्न को RTCSessionDescription - ऐलिस के स्थानीय सत्र का विवरण पास किया जाता है.
  2. कॉलबैक में, ऐलिस setLocalDescription() का इस्तेमाल करके लोकल ब्यौरा सेट करती हैं. इसके बाद, बॉब को अपने सिग्नलिंग चैनल के ज़रिए यह सेशन की जानकारी भेजती हैं. ध्यान दें कि setLocalDescription() को कॉल किए जाने तक, RTCPeerConnection के बारे में जानकारी इकट्ठा करना शुरू नहीं होगा. इसकी जानकारी, जेएसईपी आईईटीएफ़ ड्राफ़्ट में दी गई है.
  3. बॉब, setRemoteDescription() का इस्तेमाल करके वह ब्यौरा सेट करता है जो ऐलिस ने उसे रिमोट ब्यौरे के तौर पर भेजा है.
  4. बॉब, RTCPeerConnection का createAnswer() तरीका चलाता है और उसे ऐलिस से मिली जानकारी को रिमोट तरीके से पास करता है, ताकि एक ऐसा लोकल सेशन जनरेट किया जा सके जो उनके ऐप्लिकेशन के साथ काम कर सके. createAnswer() कॉलबैक को RTCSessionDescription पास किया जाता है. वैभव इसे स्थानीय ब्यौरे के तौर पर सेट करता है और ऐलिस को भेज देता है.
  5. जब ऐलिस को वैभव के सेशन का ब्यौरा मिलता है, तो वे उसे setRemoteDescription की मदद से, रिमोट जानकारी के तौर पर सेट कर देती हैं.
  6. पिंग करें!

RTCSessionDescription ऑब्जेक्ट, ब्लॉब होते हैं, जो सेशन ब्यौरे प्रोटोकॉल, एसडीपी के मुताबिक होते हैं. सीरियल के हिसाब से, एसडीपी ऑब्जेक्ट ऐसा दिखता है:

v=0
o=- 3883943731 1 IN IP4 127.0.0.1
s=
t=0 0
a=group:BUNDLE audio video
m=audio 1 RTP/SAVPF 103 104 0 8 106 105 13 126

// ...

a=ssrc:2223794119 label:H4fjnMzxy3dPIgQ7HxuCTLb4wLLLeRHnFxh810

नेटवर्क और मीडिया की जानकारी हासिल करने और उसे शेयर करने का काम एक साथ किया जा सकता है. हालांकि, दूसरे उपयोगकर्ताओं के बीच ऑडियो और वीडियो स्ट्रीमिंग शुरू करने से पहले, दोनों प्रोसेस पूरी होनी ज़रूरी हैं.

पहले बताए गए ऑफ़र/जवाब के आर्किटेक्चर को JavaScript सेशन इस्टैब्लिशमेंट प्रोटोकॉल या जेएसईपी कहा जाता है. पहले WebRTC लागू करने के लिए, एरिक्सन के डेमो वीडियो में, सिग्नल और स्ट्रीमिंग की प्रोसेस के बारे में बताने वाला एक बेहतरीन ऐनिमेशन मौजूद है.

JSEP आर्किटेक्चर का डायग्राम
जेएसईपी का आर्किटेक्चर

सिग्नलिंग प्रोसेस पूरी हो जाने के बाद, डेटा को सीधे पीयर-टू-पीयर, कॉलर और कॉली के बीच स्ट्रीम किया जा सकता है. इसके अलावा, अगर ऐसा नहीं हो पाता है, तो किसी इंटरमीडियरी रिले सर्वर के ज़रिए (इसके बारे में ज़्यादा जानकारी बाद में) दी जा सकती है. स्ट्रीमिंग का काम RTCPeerConnection का है.

RTCPeerConnection

RTCPeerConnection, WebRTC कॉम्पोनेंट है. इसकी मदद से, एक साथ कई ऐप्लिकेशन इस्तेमाल करने वाले ऐप्लिकेशन के बीच स्ट्रीमिंग डेटा को सही तरीके से और बेहतर तरीके से कम्यूनिकेशन किया जा सकता है.

यहां WebRTC आर्किटेक्चर का डायग्राम दिया गया है, जिसमें RTCPeerConnection की भूमिका दिख रही है. आपने ध्यान दिया होगा कि हरे रंग वाले हिस्से काफ़ी जटिल होते हैं!

WebRTC आर्किटेक्चर का डायग्राम
WebRTC आर्किटेक्चर (webrtc.org से)

JavaScript के नज़रिए से, इस डायग्राम में मुख्य तौर पर यह समझने की सुविधा है कि RTCPeerConnection, वेब डेवलपर को ऐसी अनगिनत मुश्किलों से बचाता है जो नीचे मौजूद होती हैं. WebRTC के इस्तेमाल किए जाने वाले कोडेक और प्रोटोकॉल, रीयल-टाइम में कम्यूनिकेशन को संभव बनाने के लिए बड़ा काम करते हैं. यहां तक कि गलत नेटवर्क पर भी ये काम किए जा सकते हैं:

  • पैकेट लॉस छिपाना
  • इको रद्द करने की प्रक्रिया
  • बैंडविथ अडैप्टर
  • डाइनैमिक जिटर बफ़रिंग
  • आवाज़ को अपने आप नियंत्रित करने की सेटिंग
  • शोर कम करने और कम करने की सुविधा
  • इमेज साफ़ करना

पिछला W3C कोड, सिग्नल के नज़रिए से WebRTC का आसान उदाहरण दिखाता है. यहां दो चालू WebRTC ऐप्लिकेशन के बारे में कदम-दर-कदम निर्देश दिए गए हैं. पहला उदाहरण RTCPeerConnection के बारे में बताता है. दूसरे उदाहरण में, वीडियो चैट क्लाइंट है, जो पूरी तरह से काम करता है.

सर्वर के बिना RTCPeerConnection

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

इस उदाहरण में, pc1 लोकल पीयर (कॉलर) को दिखाता है और pc2, रिमोट पीयर (कॉली) को दिखाता है.

कॉल करने वाले

  1. नया RTCPeerConnection बनाएं और getUserMedia() से स्ट्रीम जोड़ें: ```js // सर्वर, कॉन्फ़िगरेशन के लिए एक वैकल्पिक फ़ाइल है. (TURN और STUN चर्चा बाद में देखें.) pc1 = new RTCPeerConnection(सर्वरs); // ... localStream.getTracks().for परीक्षा((track) => { pc1.addTrack(track, localStream); });
  1. कोई ऑफ़र बनाएं और उसे pc1 के लिए स्थानीय ब्यौरे के तौर पर और pc2 के लिए, रिमोट ब्यौरे के तौर पर सेट करें. यह काम, सिग्नल का इस्तेमाल किए बिना सीधे कोड में किया जा सकता है, क्योंकि कॉलर और कॉल करने वाले, दोनों एक ही पेज पर हैं: js pc1.setLocalDescription(desc).then(() => { onSetLocalSuccess(pc1); }, onSetSessionDescriptionError ); trace('pc2 setRemoteDescription start'); pc2.setRemoteDescription(desc).then(() => { onSetRemoteSuccess(pc2); }, onSetSessionDescriptionError );

कैली

  1. pc2 बनाएं और pc1 से स्ट्रीम जोड़ने के बाद, इसे किसी वीडियो एलिमेंट में दिखाएं: js pc2 = new RTCPeerConnection(servers); pc2.ontrack = gotRemoteStream; //... function gotRemoteStream(e){ vid2.srcObject = e.stream; }

RTCPeerConnection एपीआई प्लस सर्वर

हालांकि, असल दुनिया में WebRTC को आसान तरीके से सर्वर की ज़रूरत होती है, इसलिए ये चीज़ें हो सकती हैं:

  • लोग एक-दूसरे को खोजते हैं और असल दुनिया की जानकारी शेयर करते हैं, जैसे कि नाम.
  • WebRTC क्लाइंट ऐप्लिकेशन (मिलते-जुलते ऐप्लिकेशन) से नेटवर्क की जानकारी का लेन-देन होता है.
  • मिलते-जुलते ऐप्लिकेशन, मीडिया के बारे में डेटा शेयर करते हैं, जैसे कि वीडियो का फ़ॉर्मैट और रिज़ॉल्यूशन.
  • WebRTC क्लाइंट ऐप्लिकेशन, NAT गेटवे और फ़ायरवॉल को ट्रैवर्स करते हैं.

दूसरे शब्दों में, WebRTC के लिए चार तरह की सर्वर-साइड सुविधाएं चाहिए:

  • उपयोगकर्ता को खोजने और उनसे बातचीत करने की सुविधा
  • सिग्नलिंग
  • एनएटी/फ़ायरवॉल ट्रैवर्सल
  • पीयर-टू-पीयर कम्यूनिकेशन न हो पाने पर, रिले सर्वर का इस्तेमाल करें

एनएटी ट्रैवर्सल, पीयर-टू-पीयर नेटवर्किंग, और उपयोगकर्ता की खोज और सिग्नलिंग के लिए सर्वर ऐप्लिकेशन बनाने की ज़रूरी शर्तें, इस लेख में शामिल नहीं हैं. यह बताने के लिए काफ़ी है कि STUN प्रोटोकॉल और इसके एक्सटेंशन TURN का इस्तेमाल ICE फ़्रेमवर्क के तहत किया जाता है, ताकि RTCPeerConnection, एनएटी ट्रैवर्सल और नेटवर्क की दूसरी गड़बड़ियों का सामना कर सके.

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

कनेक्शन से जुड़े कैंडिडेट ढूंढना
कनेक्शन के लिए उम्मीदवार ढूंढना

अगर यूडीपी काम नहीं करता, तो ICE टीसीपी की कोशिश करता है. अगर डायरेक्ट कनेक्शन काम नहीं करता है, तो ICE एक इंटरमीडियरी (रिले) टर्न सर्वर का इस्तेमाल करता है. ऐसा खास तौर पर, एंटरप्राइज़ NAT ट्रैवर्सल और फ़ायरवॉल की वजह से होता है. दूसरे शब्दों में कहें, तो ICE सबसे पहले पीयर को सीधे कनेक्ट करने के लिए, UDP के साथ STUN का इस्तेमाल करता है. अगर ऐसा नहीं हो पाता है, तो वह 'टर्न रिले सर्वर' पर वापस चला जाता है. उम्मीदवारों को ढूंढना एक्सप्रेशन का मतलब है, नेटवर्क इंटरफ़ेस और पोर्ट को खोजने की प्रक्रिया.

WebRTC डेटा पाथवे
WebRTC डेटा पाथवे

WebRTC के इंजीनियर जस्टिन Uberti ने 2013 के Google I/O WebRTC प्रज़ेंटेशन में, ICE, STUN, और Turn के बारे में ज़्यादा जानकारी दी है. (प्रज़ेंटेशन की स्लाइड में, TURN और STUN सर्वर को लागू करने के उदाहरण दिए गए हैं.)

एक आसान वीडियो-चैट क्लाइंट

appr.tc पर मौजूद वीडियो चैट डेमो, WebRTC को आज़माने के लिए एक अच्छी जगह है. इसमें सिग्नलिंग और NAT/फ़ायरवॉल ट्रैवर्सल शामिल हैं. साथ ही, STUN सर्वर का इस्तेमाल किया जाता है. यह ऐप्लिकेशन adapter.js का इस्तेमाल करता है. यह खास जानकारी और प्रीफ़िक्स में अंतर होने से ऐप्लिकेशन को दूर करने के लिए एक शिम है.

यह कोड जान-बूझकर शब्दों में बताया गया है. इवेंट के क्रम को समझने के लिए कंसोल देखें. नीचे कोड के बारे में कदम-दर-कदम निर्देश दिए गए हैं.

नेटवर्क टोपोलॉजी

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

मल्टीपॉइंट कंट्रोल यूनिट टोपोलॉजी डायग्राम
मल्टीपॉइंट कंट्रोल यूनिट टोपोलॉजी का उदाहरण

कई मौजूदा WebRTC ऐप्लिकेशन सिर्फ़ वेब ब्राउज़र के बीच कम्यूनिकेशन दिखाते हैं, लेकिन गेटवे सर्वर किसी ब्राउज़र पर चल रहे WebRTC ऐप्लिकेशन को चालू कर सकते हैं, ताकि वे टेलीफ़ोन (जिसे पीएसटीएन भी कहा जाता है) जैसे डिवाइसों और VOIP सिस्टम से इंटरैक्ट कर सकें. मई 2012 में, Doubango Telecom ने WebRTC और WebSocket का इस्तेमाल करके बनाए गए sipml5 SIP क्लाइंट को ओपन सोर्स किया, जिससे (अन्य संभावित इस्तेमाल में) iOS और Android पर चल रहे ब्राउज़र और ऐप्लिकेशन के बीच वीडियो कॉल की सुविधा चालू हो जाती है. Google I/O में, Tethr और Tropo ने ब्रीफ़केस में आपदा से जुड़ी बातचीत के लिए फ़्रेमवर्क दिखाया. इसके लिए, OpenBTS सेल का इस्तेमाल किया गया, ताकि WebRTC की मदद से फ़ीचर फ़ोन और कंप्यूटर के बीच कम्यूनिकेशन की सुविधा चालू की जा सके. बिना कैरियर के टेलीफ़ोन कम्यूनिकेशन!

Google I/O 2012 में Tethr/Tropo का डेमो
टेदर/ट्रोपो: ब्रीफ़केस में आपदा की सूचना

RTCDataChannel एपीआई<

WebRTC, ऑडियो और वीडियो की तरह दूसरे तरह के डेटा के लिए रीयल-टाइम कम्यूनिकेशन की सुविधा भी देता है.

RTCDataChannel एपीआई से, पीयर-टू-पीयर तरीके से डेटा शेयर करने की सुविधा को चालू किया जा सकता है. इसमें इंतज़ार का समय कम होता है और डेटा स्ट्रीम की क्षमता ज़्यादा होती है. एक पेज के डेमो और आसानी से फ़ाइल ट्रांसफ़र करने वाला ऐप्लिकेशन बनाने का तरीका जानने के लिए, क्रमश: WebRTC सैंपल और WebRTC कोडलैब देखें.

इस एपीआई का इस्तेमाल कई मामलों में किया जा सकता है. जैसे:

  • गेमिंग
  • रिमोट डेस्कटॉप ऐप्लिकेशन
  • रीयल-टाइम में मैसेज भेजकर चैट करें
  • फ़ाइल ट्रांसफ़र की सुविधा वाले प्रॉडक्ट इंटिग्रेशन
  • डीसेंट्रलाइज़्ड नेटवर्क

इस एपीआई में कई सुविधाएं हैं. इनकी मदद से, RTCPeerConnection का ज़्यादा से ज़्यादा फ़ायदा लिया जा सकता है. साथ ही, पीयर-टू-पीयर कम्यूनिकेशन की सुविधा को आसानी से और बेहतर तरीके से इस्तेमाल किया जा सकता है:

  • RTCPeerConnection सेशन के सेटअप का इस्तेमाल किया जा रहा है
  • प्राथमिकता के साथ एक साथ कई चैनल
  • भरोसेमंद और गैर-भरोसेमंद डिलीवरी सिमैंटिक
  • पहले से मौजूद सुरक्षा (डीटीएलएस) और कंजेशन कंट्रोल
  • ऑडियो या वीडियो के साथ या उसके बिना इस्तेमाल करने की सुविधा

यह सिंटैक्स जान-बूझकर send() तरीके और message इवेंट वाले WebSocket से मिलता-जुलता है:

const localConnection = new RTCPeerConnection(servers);
const remoteConnection = new RTCPeerConnection(servers);
const sendChannel =
  localConnection.createDataChannel('sendDataChannel');

// ...

remoteConnection.ondatachannel = (event) => {
  receiveChannel = event.channel;
  receiveChannel.onmessage = onReceiveMessage;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
};

function onReceiveMessage(event) {
  document.querySelector("textarea#send").value = event.data;
}

document.querySelector("button#send").onclick = () => {
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

कम्यूनिकेशन सीधे ब्राउज़र के बीच होता है. इसलिए, RTCDataChannel, WebSocket की तुलना में ज़्यादा तेज़ हो सकता है. भले ही, फ़ायरवॉल और एनएटी से निपटने के लिए होल-पंचिंग (छेद से छेद करने की सुविधा) के काम न कर पाने पर रिले (चालू) सर्वर की ज़रूरत हो.

RTCDataChannel, Chrome, Safari, Firefox, Opera, और Samsung इंटरनेट में उपलब्ध है. Cube Slam गेम, गेम की स्थिति बताने के लिए एपीआई का इस्तेमाल करता है. दोस्त के साथ खेलें या भालू के साथ खेलें! नए प्लैटफ़ॉर्म Sharefest ने RTCDataChannel और peerCDN के ज़रिए फ़ाइल शेयर करने की सुविधा को चालू किया. इससे पता चला कि WebRTC किस तरह पीयर-टू-पीयर कॉन्टेंट डिस्ट्रिब्यूशन को चालू कर सकता है.

RTCDataChannel के बारे में ज़्यादा जानकारी के लिए, आईईटीएफ़ का ड्राफ़्ट प्रोटोकॉल की खास जानकारी देखें.

सुरक्षा

रीयल-टाइम कम्यूनिकेशन ऐप्लिकेशन या प्लगिन कई तरीकों से सुरक्षा से छेड़छाड़ कर सकते हैं. उदाहरण के लिए:

  • एन्क्रिप्ट (सुरक्षित) न किए गए मीडिया या डेटा को ब्राउज़र या ब्राउज़र के बीच या फिर सर्वर से रोका जा सकता है.
  • कोई ऐप्लिकेशन, उपयोगकर्ता की जानकारी के बिना वीडियो या ऑडियो रिकॉर्ड करके उसे लोगों तक पहुंचा सकता है.
  • मैलवेयर या वायरस किसी नुकसान न पहुंचाने वाले प्लगिन या ऐप्लिकेशन के साथ इंस्टॉल हो सकते हैं.

इन समस्याओं से बचने के लिए WebRTC में कई सुविधाएं हैं:

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

इस लेख में बताया गया है कि स्ट्रीमिंग मीडिया की सुरक्षा के बारे में पूरी जानकारी नहीं दी गई है. ज़्यादा जानकारी के लिए, आईईटीएफ़ की ओर से सुझाया गया WebRTC Security आर्किटेक्चर देखें.

कुल मिलाकर कहें, तो

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

टेक्नोलॉजी को इससे ज़्यादा परेशान करने वाला नहीं माना जा सकता.

जैसा कि ब्लॉगर फ़िल एडहोम ने बताया है, "संभावित रूप से, WebRTC और HTML5 रीयल-टाइम कम्यूनिकेशन के लिए भी उसी बदलाव को लागू कर सकते हैं जो ओरिजनल ब्राउज़र ने जानकारी के लिए किया था."

डेवलपर टूल

ज़्यादा जानें

  • Google I/O 2012 में जस्टिन Uberti का WebRTC सेशन
  • ऐलन बी. जॉन् सटन और डैनियल सी. बर्नेट ने WebRTC की अपनी किताब को मैनेज करने के लिए, webrtcbook.com पर तीसरे वर्शन का इस्तेमाल किया है. यह प्रिंट और ई-बुक फ़ॉर्मैट में है.
  • webrtc.org पर WebRTC की सारी सुविधाएं मौजूद हैं. इनमें डेमो, दस्तावेज़, और चर्चा से जुड़ी जानकारी भी शामिल हैं.
  • discuss-webrtc, WebRTC के बारे में तकनीकी चर्चा के लिए एक Google ग्रुप है.
  • @webrtc
  • Google Developers Talk दस्तावेज़, एनएटी ट्रैवर्सल, एसटीयूएन, रिले सर्वर, और उम्मीदवारों को इकट्ठा करने के बारे में ज़्यादा जानकारी देता है.
  • GitHub पर WebRTC
  • Stack Overflow पर, जवाब खोजने और WebRTC के बारे में सवाल पूछने का अच्छा विकल्प है.

मानक और प्रोटोकॉल

WebRTC से जुड़ी सहायता के बारे में खास जानकारी

MediaStream और getUserMedia एपीआई

  • Chrome डेस्कटॉप 18.0.1008 और इसके बाद के वर्शन; Android 29 और इसके बाद के वर्शन के लिए Chrome
  • Opera 18 और इसके बाद के वर्शन; Android 20 और इसके बाद के वर्शन के लिए Opera
  • Opera 12, Opera Mobile 12 (Presto इंजन पर आधारित)
  • Firefox 17 और उसके बाद के वर्शन
  • Microsoft Edge 16 और उसके बाद के वर्शन
  • iOS पर Safari 11.2 और उसके बाद के वर्शन और MacOS पर 11.1 और उसके बाद का वर्शन
  • Android पर UC 11.8 और इसके बाद के वर्शन
  • Samsung Internet 4 और उसके बाद वाला वर्शन

RTCPeerConnection एपीआई

  • Chrome डेस्कटॉप 20 और उसके बाद के वर्शन; Android 29 और उसके बाद के वर्शन के लिए Chrome (फ़्लैग के बिना)
  • Opera 18 और उसके बाद के वर्शन (डिफ़ॉल्ट रूप से चालू होते हैं); Android 20 और उसके बाद के वर्शन के लिए Opera (डिफ़ॉल्ट रूप से चालू)
  • Firefox 22 और उसके बाद के वर्शन (डिफ़ॉल्ट रूप से चालू)
  • Microsoft Edge 16 और उसके बाद के वर्शन
  • iOS पर Safari 11.2 और उसके बाद के वर्शन और MacOS पर 11.1 और उसके बाद का वर्शन
  • Samsung Internet 4 और उसके बाद वाला वर्शन

RTCDataChannel एपीआई

  • Chrome 25 में एक्सपेरिमेंट के तौर पर उपलब्ध वर्शन है. हालांकि, Chrome 26 और उसके बाद के वर्शन में ज़्यादा स्टेबल (और Firefox इंटरऑपरेबिलिटी) भी है. Android 29 और उसके बाद के वर्शन के लिए Chrome में ज़्यादा स्टेबल है
  • Opera 18 और उसके बाद के वर्शन में स्टेबल वर्शन और Firefox के इंटरऑपरेबिलिटी के साथ काम करने वाला वर्शन; Android 20 और इसके बाद के वर्शन के लिए Opera
  • Firefox 22 और उसके बाद के वर्शन (डिफ़ॉल्ट रूप से चालू)

getUserMedia और RTCPeerConnection जैसे एपीआई के लिए, क्रॉस-प्लैटफ़ॉर्म की सुविधा के काम करने के बारे में ज़्यादा जानकारी के लिए, caniuse.com और Chrome Platform की स्थिति देखें.

RTCPeerConnection के लिए नेटिव एपीआई, webrtc.org पर दस्तावेज़ में भी उपलब्ध हैं.