RTMP वीडियो कॉल स्ट्रीमिंग

आज, स्ट्रीमिंग प्लेटफॉर्म लोकप्रियता के चरम पर हैं, क्योंकि लाखों प्रतिभाशाली लोग नियमित रूप से अपने ज्ञान को साझा करते हैं - पढ़ते हैं, वे पूरी तरह से स्ट्रीमिंग का उपयोग करते हैं। जैसे-जैसे यह बाजार बढ़ रहा है, ऐसे कई एप्लिकेशन हैं जो स्मार्टफोन या लैपटॉप कैमरा का उपयोग करके लाइव वीडियो स्ट्रीम कर सकते हैं। शायद आप भी इस तरह की कार्यक्षमता को अपने आवेदन में पेश करना चाहते हैं; यदि ऐसा है, तो हम जल्दबाजी करते हैं - अब वोक्सिमप्लांट आपको आरटीएम से किसी भी सीडीएन के माध्यम से वीडियो कॉल अग्रेषित करने की अनुमति देता है जो इस प्रोटोकॉल का समर्थन करता है।

यह कार्यक्षमता नए Voxengine मॉड्यूल - StreamingAgent द्वारा संभव है। कटौती के तहत आप इस एकीकरण को कॉन्फ़िगर करने के लिए 5 चरणों की प्रतीक्षा कर रहे हैं, स्वागत है!

योजना

मोबाइल / वेब एप्लिकेशन या एसआईपी से एक वीडियो कॉल हमारे क्लाउड पर आता है, जो इसे एक स्ट्रीमिंग सीडीएन को निर्देशित करता है। बदले में, सीडीएन उपयोगकर्ताओं को ऑडियो और वीडियो स्ट्रीम भेजता है - जैसा कि आमतौर पर होता है। कृपया ध्यान दें कि RTMP केवल H.264 का समर्थन करता है, इसलिए स्ट्रीमिंग करते समय इस कोडेक को स्पष्ट रूप से निर्दिष्ट करना बहुत महत्वपूर्ण है।

आपको आवश्यकता होगी

• स्ट्रीमिंग सेवा पर एक खाता, उदाहरण के लिए, चिकोटी या Youtube ;
• Voximplant खाता। यदि आपके पास यह नहीं है, तो पंजीकरण यहां रहता है ;
• Voximplant आवेदन, साथ ही एक स्क्रिप्ट, एक नियम और एक उपयोगकर्ता। हम इस ट्यूटोरियल में यह सब बनाएंगे;
• वीडियो और ऑडियो कैप्चर करने के लिए वेब क्लाइंट - हम अपने डेमो वीडियोचैट का उपयोग करेंगे

1. स्ट्रीमिंग सेटिंग्स

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

ऐंठन

अपने खाते में प्रवेश करें, ऊपरी दाएं कोने में प्रोफ़ाइल चित्र पर क्लिक करें और वीडियो निर्माता चुनें।



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

सर्वर url को खोजने के लिए, stream.twitch.tv/ingests पृष्ठ पर जाएं, अनुशंसित सर्वरों में से एक का चयन करें और इसे अंतिम स्लैश के बिना कॉपी करें, उदाहरण के लिए: rtmp: //live-sfo.twitch.tv/app

यूट्यूब

अपने खाते में प्रवेश करें, ऊपरी दाएं कोने में अवतार पर क्लिक करें और YouTube स्टूडियो (बीटा) का चयन करें।



यदि आपके पास YouTube चैनल नहीं है, तो एक चैनल बनाने के बारे में एक संवाद दिखाई देगा। क्रिएट चैनल पर क्लिक करें और आपको एक नोटिफिकेशन के साथ बनाए गए चैनल का एक डैशबोर्ड दिखाई देगा, जिसे 24 घंटे के भीतर स्ट्रीमिंग करना संभव होगा।



YouTube स्टूडियो में रहते हुए, अन्य सुविधाओं पर जाएं -> बाईं ओर मेनू के माध्यम से लाइव स्ट्रीम करें। एक नया पेज खुलता है, जिसके नीचे एनकोडर सेटअप ब्लॉक होता है। यहां से, आपको सर्वर URL और स्ट्रीम नाम / कुंजी मान (या पृष्ठ को खुला छोड़ना) लेने की आवश्यकता है।

2. VOXIMPLANT सेटिंग्स

अब आपको वोक्सिमप्लांट की तरफ से सेटिंग करने की जरूरत है। सबसे पहले अपने खाते में लॉग इन करें: https://manage.voximplant.com/auth बाईं ओर स्थित मेनू में, "एप्लिकेशन", फिर "नया एप्लिकेशन" पर क्लिक करें और स्ट्रीमिंग नामक एक एप्लिकेशन बनाएं। नए एप्लिकेशन में जाएं, इस कोड के साथ एक स्टार्टस्ट्रीम स्क्रिप्ट बनाने के लिए "लिपियों" टैब पर जाएं (8 और 9 लाइनों में पिछले चरण से मानों को बदलना न भूलें):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); }); 

यह एक सरल स्क्रिप्ट है जो एक स्ट्रीम शुरू करता है और इसके सभी संभावित राज्यों पर भी नज़र रखता है, जैसे: कनेक्टेड, कनेक्शन विफल, स्ट्रीमस्टेड, आदि। - स्क्रिप्ट का विवरण थोड़ा कम होगा। अब आपको अपने आवेदन के “रूटिंग” टैब पर जाकर “न्यू रूल” पर क्लिक करना होगा। इसे सुव्यवस्थित नाम दें, स्टार्टस्ट्रीम स्क्रिप्ट निर्दिष्ट करें और डिफ़ॉल्ट मास्क (। *) छोड़ दें।


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


Voximplant का कॉन्फ़िगरेशन पूरा हो गया है, लेकिन इससे पहले कि हम वेब क्लाइंट पर जाते हैं, मैं यह समझने का प्रस्ताव करता हूं कि हमारे परिदृश्य में StreamingAgent मॉड्यूल कैसे काम करता है।

3. परिदृश्य

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

 require(Modules.StreamingAgent); 

अगला, आपको स्पष्ट रूप से उस कोडेक को निर्दिष्ट करना होगा जो स्ट्रीमिंग करते समय उपयोग किया जाएगा। चूंकि कई प्लेटफ़ॉर्म (ट्विच और यूट्यूब सहित) RTMP का उपयोग करते हैं, जो बदले में, H.264 का समर्थन करता है, यही वह है जो हम इंगित करेंगे:

 VoxEngine.setVideoCodec("H264"); 

यदि कोडेक निर्दिष्ट नहीं है, तो StreamingAgentEvents.StreamError ईवेंट को उठाया जा सकता है, जिसमें त्रुटि पाठ है:

 "Video codec mismatch. " + codecName + " granted, but should be H.264" 

फिर हम वेब क्लाइंट से वीडियो कॉल को संभालने के लिए CallAlerting इवेंट के लिए एक हैंडलर जोड़ते हैं (हाँ, हम इसे जल्द ही प्राप्त करेंगे)। सबसे पहले, हम हैंडलर को createStreamingAgent पद्धति में एक कॉल जोड़ देंगे। विधि में निम्नलिखित पैरामीटर हैं, उनमें से अधिकांश आवश्यक हैं, वैकल्पिक रूप से अलग-अलग चिह्नित हैं:

• प्रोटोकॉल - अभी तक केवल RTMP का समर्थन किया जाता है;
• url - सर्वर URL, चरण 1 देखें;
• स्ट्रीमनाम - स्ट्रीम नाम / कुंजी, चरण 1 देखें;
• ApplicationName (वैकल्पिक) - streamName का हिस्सा, जैसे live2। इस विकल्प का उपयोग करें यदि चयनित प्लेटफ़ॉर्म को इसकी आवश्यकता है;
• keyframeInterval (वैकल्पिक, सेकंड) - स्ट्रीम में कितनी बार कुंजी फ़्रेम उत्पन्न होगा। यदि निर्दिष्ट नहीं है, तो डिफ़ॉल्ट मान 2 है।

ऊपर स्क्रिप्ट लिस्टिंग में, createStreamingAgent पद्धति का कॉल इस तरह दिखता है:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); 

लेकिन हम keyframeInterval को छोड़ सकते हैं और अनुप्रयोगनाम का उपयोग कर सकते हैं, जैसे:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" }); 

स्ट्रीमिंग ऑब्जेक्ट बनने के बाद, स्क्रिप्ट हैंडलर के अंदर कॉल को संसाधित करना जारी रखती है। अगला कदम वेब क्लाइंट से आने वाली वीडियो स्ट्रीम को बनाए गए स्ट्रीमिंग ऑब्जेक्ट पर निर्देशित करना है:

 e.call.sendMediaTo(streaming); 

फिर हम डिबगिंग के लिए सभी संभावित स्ट्रीमिंग घटनाओं का उपयोग करते हैं: हैंडलर कुछ भी नहीं करते हैं, लेकिन वॉक्सिमप्लांट सत्र के लॉग में जानकारी भेजते हैं। यदि आप चाहें तो आप इस कोड का उपयोग नहीं कर सकते।

घटनाओं को संसाधित करने के बाद, स्क्रिप्ट आने वाली कॉल का जवाब देती है:

 e.call.answer(); 

अंत में, जब वेब क्लाइंट वीडियो भेजना बंद कर देता है, तो हमें स्ट्रीमिंग के अंत को सही ढंग से संभालना चाहिए। औपचारिक रूप से, हम इस हैंडलर का भी उपयोग नहीं कर सकते हैं, लेकिन वीडियो भेजने के 60 सेकंड के बाद ही सत्र समाप्त हो जाएगा। इस अपेक्षा में कोई दम नहीं है, इसलिए सत्र को समाप्त करना बेहतर है, जो डिस्कनेक्ट की गई घटनाओं से शुरू होता है:

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); 

परिदृश्य के तर्क को समझते हुए, हम अपने कॉन्फ़िगरेशन के अंतिम - लेकिन कम से कम - का हिस्सा शुरू करने के लिए तैयार हैं।

4. वेब क्लाइंट

क्लोन या हमारे वीडियोकोच डेमो डाउनलोड करें। फिर रिपॉजिटरी फोल्डर में जाएं और टेक्स्ट एडिटर / आईडीई में WebApp / JS / app.js फाइल खोलें । लाइन 5 पर एप्लिकेशन का नाम बदलें और फ़ाइल को सहेजें:


दरअसल, बस इतना ही।

5. स्ट्रीमिंग शुरू करें

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

  http://127.0.0.1:8080/index.html#accname=johngalt 

क्लाइंट लॉन्च करने के बाद, चरण 2 से लॉगिन-पासवर्ड जोड़ी दर्ज करें:


@ चिह्न के बगल में स्थित कोई भी वर्ण दर्ज करें और कॉल दबाएं। यदि सब कुछ सही ढंग से किया गया था, तो आपकी स्ट्रीम जल्द ही शुरू हो जाएगी :) आपके लिए सफल धाराएं और उत्पादक विकास!