webrtc ट्यूटोरियल
Webrtc के साथ शुरुआत करना

टिप्पणियों

WebRTC- आधारित संचार प्रणाली की स्थापना

WebRTC- आधारित संचार प्रणाली को सेटअप करने के लिए, आपको तीन मुख्य घटकों की आवश्यकता है:

1. एक WebRTC सिग्नलिंग सर्वर

   WebRTC कनेक्शन स्थापित करने के लिए, साथियों को एक सिग्नलिंग सर्वर से संपर्क करने की आवश्यकता होती है, जो तब पते की जानकारी प्रदान करता है जिससे साथियों को पीयर-टू-पीयर कनेक्शन सेट करने की आवश्यकता होती है। सिग्नलिंग सर्वर उदाहरण के लिए हैं:

   • सिग्नलमास्टर : लाइटवेट, जावास्क्रिप्ट-आधारित सिग्नलिंग सर्वर
   • NextRTC : जावा-आधारित सिग्नलिंग सर्वर
   • Kurento : व्यापक WebRTC ढांचे
   • जानूस : सामान्य प्रयोजन WebRTC गेटवे

2. एक WebRTC ग्राहक अनुप्रयोग

   क्लाइंट जावास्क्रिप्ट एपीआई के माध्यम से या तो एक ब्राउज़र के WebRTC कार्यान्वयन तक पहुँचता है या एक WebRTC लाइब्रेरी का उपयोग करता है (यानी एक डेस्कटॉप या मोबाइल ऐप के हिस्से के रूप में)। किसी सहकर्मी से संबंध स्थापित करने के लिए, क्लाइंट को पहले सिग्नलिंग सर्वर से कनेक्ट करना होगा। WebRTC ग्राहकों के उदाहरण हैं:

   • कई Kurento परियोजनाओं

   • OpenWebRTC , मोबाइल फोकस के साथ एक क्रॉस-प्लेटफ़ॉर्म क्लाइंट

   • Peer.js एक ब्राउज़र-आधारित क्लाइंट (Peer.js एक लाइट-वेट सर्वर भी प्रदान करता है)

   • जानूस डेमो उदाहरण

3. एक STUN / TURN सर्वर

   NAT (STUN) के लिए सत्र ट्रैवर्सल यूटिलिटीज साथियों को नेटवर्क एड्रेस ट्रांसलेशन (NAT) नियोजित करने वाले राउटर से पीछे होने पर भी पते की जानकारी का आदान-प्रदान करने में सक्षम बनाता है। यदि नेटवर्क प्रतिबंध साथियों को सीधे संचार से रोकते हैं, तो ट्रैफिक को नैट (TURN) सर्वर के आसपास रिले का उपयोग करके ट्रैवर्सल के माध्यम से रूट किया जाता है। आप http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html पर STUN और TURN की विस्तृत और चित्रमय व्याख्या खोजें। WebRTC STUN / TURN सर्वर के उदाहरण हैं:

   • कॉटर्न STUN और TURN को जोड़ती है और आमतौर पर एक पूरी तरह से विकसित WebRTC बुनियादी ढांचे का हिस्सा है।
   • जानूस WebRTC गेटवे एक एकीकृत STUN / TURN सर्वर के साथ आता है।

WebRTC का परिचय

WebRTC वेब के लिए एक खुला ढांचा है जो ब्राउज़र में रियल टाइम कम्युनिकेशंस को सक्षम बनाता है। इसमें वेब पर उच्च-गुणवत्ता वाले संचार के लिए मूलभूत भवन ब्लॉक शामिल हैं, जैसे कि नेटवर्क, ऑडियो और वीडियो घटकों का उपयोग आवाज और वीडियो चैट अनुप्रयोगों में किया जाता है।

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

WebRTC प्रयास W3C पर एक एपीआई स्तर पर और IETF पर प्रोटोकॉल स्तर पर मानकीकृत किया जा रहा है।

• वेब की सफलता का एक मुख्य कारक यह है कि इसकी मुख्य प्रौद्योगिकियाँ - जैसे HTML, HTTP और TCP / IP - खुली और स्वतंत्र रूप से कार्यान्वित होती हैं। वर्तमान में, कोई निशुल्क, उच्च-गुणवत्ता, पूर्ण समाधान उपलब्ध नहीं है जो ब्राउज़र में संचार को सक्षम बनाता है। WebRTC इसे सक्षम करता है।
• पहले से ही सर्वश्रेष्ठ-टू-नस्ल आवाज और वीडियो इंजन के साथ एकीकृत है जो पिछले 8+ वर्षों में लाखों समापन बिंदुओं पर तैनात किए गए हैं। Google WebRTC के लिए रॉयल्टी नहीं लेता है।
• इसमें STUN, ICE, TURN, RTP-over-TCP और प्रॉक्सी का समर्थन करने के लिए कुंजी NAT और फ़ायरवॉल ट्रैसरल तकनीक शामिल हैं।
• वेब ब्राउज़र की ताकत पर बनाता है: WebRTC अमूर्त सिग्नलिंग स्टेट मशीन की पेशकश करता है जो सीधे PeerConnection के लिए मैप करता है। इसलिए वेब डेवलपर अपने उपयोग परिदृश्य के लिए पसंद का प्रोटोकॉल चुन सकते हैं (उदाहरण के लिए, लेकिन SIP, XMPP / जिंगल, आदि तक सीमित नहीं)।

WebRTC के बारे में अधिक जानकारी यहाँ से पढ़ें

GetUserMedia () API, Hello WebRTC का उपयोग करके अपने ऑडियो और वीडियो तक पहुंच प्राप्त करें!

navigator.mediaDevices Chrome और FF में अब तक के रूप में GetUserMedia के लिए अनुकूलित सामान्य विधि है।

एक वादा आधारित कॉल बैक जो सफलता पर स्थानीय स्ट्रीम देता है

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

आप रिज़ॉल्यूशन, फ़्रैमरेट, डिवाइस वरीयता और अधिक जैसी कैप्चर सेटिंग्स को नियंत्रित करने के लिए getUserMedia में ऑडियो और वीडियो बाधाओं को पास कर सकते हैं।

एक वीडियो तत्व को स्ट्रीम संलग्न करें

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

दोनों वीडियो और ऑडियो बंद करो

localStream.getTracks().forEach((track) => {
    track.stop();
});

केवल ऑडियो बंद करो

localStream.getAudioTracks()[0].stop();

केवल वीडियो बंद करो

localStream.getVideoTracks()[0].stop();

लाइव डेमो