1C-Bitrix प्लेटफॉर्म पर अपना WebRTC एप्लिकेशन बनाना

हैबर के खुले स्थानों में, वेबआरटीसी प्रौद्योगिकी के बारे में लेख तेजी से प्रकाशित हो रहे हैं , वेबआरटीसी तकनीक के साथ शुरुआत करने के लिए कई अच्छे लेख पहले ही लिखे जा चुके हैं (उदाहरण के लिए: एक , दो )।

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

तकनीक के बारे में थोड़ा सा

वेबआरटीसी प्रौद्योगिकी अपेक्षाकृत हाल ही में दिखाई दी, पहला मसौदा नवंबर 2012 में प्रस्तुत किया गया था, और सचमुच एक साल में प्रौद्योगिकी एक अच्छे स्तर पर पहुंच गई और इसका उपयोग किया जाना चाहिए।

प्रौद्योगिकी डेवलपर्स को अतिरिक्त प्लग इन को डाउनलोड और इंस्टॉल करने की आवश्यकता के बिना मल्टीमीडिया वेब एप्लिकेशन (वीडियो / ऑडियो कॉल) बनाने का अवसर प्रदान करती है।
इसका लक्ष्य वास्तविक समय के संचार के लिए एक एकल मंच का निर्माण करना है जो किसी भी ब्राउज़र और किसी भी ऑपरेटिंग सिस्टम में काम करेगा।

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

फिलहाल यह है: मोज़िला फ़ायरफ़ॉक्स 27+ और वेबकीट-आधारित ब्राउज़र - Google क्रोम 29+, ओपेरा 18+, यैंडेक्स।ब्रोज़र 13+।
यह आशा की जाती है कि सफारी जल्द ही इस सूची में होनी चाहिए क्योंकि कंपनी फरवरी 2014 में WebRTC के कार्य समूह में शामिल हो गई।

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

हम वेबआरटीसी प्रौद्योगिकियों और डेस्कटॉप एप्लिकेशन के काम का उपयोग कैसे करते हैं, इसके बारे में मैंने 1C-बिट्रिक्स विंटर पार्टनर कॉन्फ्रेंस में बात की थी, आप मेरी रिपोर्ट ऑनलाइन देख सकते हैं या वीडियो डाउनलोड कर सकते हैं।

WebRTC कैसे काम करता है?

वास्तव में, सब कुछ बहुत सरल रूप से काम करता है , शाब्दिक रूप से तीन अंक।

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



क्या यह इतना आसान है? हाँ ... लगभग :)

WebRTC तकनीक प्रारंभिक उपयोगकर्ता बंधन के लिए उपकरण प्रदान नहीं करती है, यह वह हिस्सा है जिसे आपको स्वयं करना चाहिए, इस भाग को "सिग्नलिंग" या "सिग्नलिंग प्रोटोकॉल" कहा जाता है।

सिग्नलिंग प्रोटोकॉल क्या है?

सिग्नलिंग प्रोटोकॉल या सिग्नलिंग (सिग्नलिंग) के तहत कमांड और डेटा के आदान-प्रदान के लिए उपयोगकर्ताओं के बीच संचार का संगठन है।

सरलतम योजना में, आपको निम्नलिखित कमांडों के प्रसंस्करण को व्यवस्थित करने की आवश्यकता है:
1. निमंत्रण - कॉल करने के लिए एक निमंत्रण (उपयोगकर्ता आपको जवाब देने या न देने के लिए कहता है);
2. उत्तर - कॉल का उत्तर दें;
3. गिरावट - कॉल रद्द करें;
4. व्यस्त - उपयोगकर्ता एक और कॉल के साथ व्यस्त है;
5. तैयार - उपयोगकर्ता डेटा एक्सचेंज के लिए तैयार है;
6. सिग्नलिंग - डेटा एक्सचेंज;

केवल मूल आदेश ऊपर सूचीबद्ध हैं, वास्तव में उनमें से अधिक हो सकते हैं:
- शामिल हों - एक मौजूदा बातचीत का कनेक्शन;
- प्रतीक्षा करें - उपयोगकर्ता ऑनलाइन है, उत्तर की प्रतीक्षा करें;
- WaitTimeout - किसी अन्य उपयोगकर्ता ने उत्तर की प्रतीक्षा नहीं की;
- errorAccess - उपयोगकर्ता को तकनीकी समस्याएं हैं;
- पुन: कनेक्ट - उपयोगकर्ता कनेक्शन स्थापित नहीं कर सका, पुन: कनेक्शन की आवश्यकता है;

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

मैं सब कुछ समझ गया, मैं एक एप्लिकेशन बनाना चाहता हूं!

WebRTC के साथ काम करने के लिए, आपको यह समझने की आवश्यकता है कि यह स्वीकृत मानक नहीं है , विभिन्न ब्राउज़रों में API थोड़ा भिन्न होता है ।
यह भी सोचने योग्य है कि सिग्नलिंग के लिए रियलटाइम ट्रांसपोर्ट को कैसे व्यवस्थित किया जाए, यह सोचें कि नैट को कैसे बाईपास किया जाए और इसे कैसे काम किया जाए, इस पर निर्देश पढ़ें।

उपरोक्त पंक्तियों को पढ़ने के बाद, आपको सबसे अधिक संभावना है कि आप एक WebRTC एप्लीकेशन बना सकते हैं और पेज को लगभग बंद कर सकते हैं



लेकिन घबराहट अलग! हमारे पास उत्पाद में पहले से ही सब कुछ है, अपने लिए देखें:

1. आप हमारे "पुश एंड पुल" मॉड्यूल के आधार पर एक वास्तविक समय के सिग्नलिंग प्रोटोकॉल को व्यवस्थित कर सकते हैं और nginx सर्वर के लिए मॉड्यूल - nginx-push-stream-मॉड्यूल , उनके साथ कैसे काम कर सकते हैं, इसका वर्णन बिट्रिक्स में मेरे ब्लॉग में किया गया है (यदि यह विकल्प आपके लिए है खुश नहीं है, आप इसे आसानी से किसी अन्य उत्पाद से बदल सकते हैं, उदाहरण के लिए सॉकेट.आईओ );

2. NAT को बायपास करने के लिए, हमने एक क्लाउड सेवा बनाई जो कि उत्पाद के सभी उपयोगकर्ताओं के लिए उपलब्ध है। turn.calls.bitrix / 2010 ;

3. उत्पाद के मूल में, हमने एक विशेष पुस्तकालय core_webrtc जोड़ा है, जो एपीआई में विसंगति और वेबआरटीसी के अधिकांश तर्क (पुस्तकालय मुख्य संस्करण में उपलब्ध है जो संस्करण .0.0.15 से शुरू होता है) से छिपाएगा;

और सबसे अच्छा हिस्सा है

4. हमने एक विशेष घटक विकसित किया है जिसमें सभी तर्क लागू किए जाते हैं ताकि आप जल्दी से अपना आवेदन लिख सकें और लिखना शुरू कर सकें (घटक 14.1.5 संस्करण से शुरू होने वाले पुश एंड पुल मॉड्यूल में उपलब्ध है);

डेमो एप्लिकेशन लॉन्च करें

14.1.5 संस्करण से शुरू, डेमो फ़ोल्डर "पुश एंड पुल" मॉड्यूल (/ बिट्रिक्स / मॉड्यूल / पुल /) में दिखाई दिया है, इसमें दो उदाहरण हैं:
1. "पुश एंड पुल" मॉड्यूल के साथ काम करने का एक उदाहरण;
2. वेबआरटीसी के साथ काम करने का एक उदाहरण;

मैं सिर्फ दूसरे के बारे में बात करना चाहता था:



आरंभ करने के लिए, इन चरणों का पालन करें:
1. / बिट्रिक्स / मॉड्यूल / पुल / डेमो / वेब्रेट / कंपोनेंट / फोल्डर से कंपोनेंट को कॉपी करें, उदाहरण के लिए, यहां / बिट्रिक्स / कॉन्टेंस / आपका कंप्यूटर / उपप्रकार /
2. पृष्ठ / बिट्रिक्स / मॉड्यूल / पुल / डेमो / वीब्र्ट / एचटीएमएल / कॉपी करें, उदाहरण के लिए, आपकी साइट की जड़ में;
3. क्यू सर्वर के साथ काम करने के लिए पुश एंड पुल मॉड्यूल को कॉन्फ़िगर करें;
4. दो उपयोगकर्ताओं को पंजीकृत करें;

यही है, अब आप दो अलग-अलग उपयोगकर्ताओं के तहत इस पृष्ठ पर जा सकते हैं और एक-दूसरे को कॉल करना शुरू कर सकते हैं!

सबसे अच्छा प्रलेखन स्रोत कोड है।

मैं संक्षेप में प्रत्येक फ़ंक्शन के उद्देश्य का वर्णन करूंगा, जिसका उपयोग Demo_webrtc.js (घटक में स्थित) में किया गया है, बाकी सभी, मुझे आशा है, स्रोत कोड से स्पष्ट होगा।

घटक को समझने के लिए और यह कैसे काम करता है, इन दो लेखों को पढ़ें, इससे आपको बेहतर नेविगेट करने में मदद मिलेगी:
अपनी खुद की JS लाइब्रेरी बनाना: JS, CSS, वाक्यांश, निर्भरता।
मॉड्यूल "पुश एंड पुल" के साथ काम करें

---

मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी होगा।
यदि आपके कोई प्रश्न हैं, तो टिप्पणियों में लिखें।