🐾 💪 👴🏽 2020 में अपनी वेबसाइट पर आरटीएसपी कैसे पकाने के लिए, या क्यों बोअर्स को दूर भागने का मौका नहीं मिलेगा 👰🏻 🛌 🧕🏿

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

उदाहरण के लिए, हमारे पास एक आईपी कैमरा है जो आरटीएसपी का समर्थन करता है। जिस किसी ने भी शार्कवायर केबल के साथ ट्रैफ़िक का परीक्षण किया है, वह आपको बताएगा कि पहले वहां DESCRIBE आता है, फिर PLAY होता है, और फिर ट्रैफ़िक आरटीपी के माध्यम से सीधे डालना शुरू होता है या उदाहरण के लिए टीसीपी चैनल में लिपटा होता है।

RTSP कनेक्शन स्थापित करने की एक विशिष्ट योजना इस प्रकार है:

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

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

इस लेख में हम यह पता लगाने जा रहे हैं कि यह कैसे प्राप्त किया जा सकता है। और जैसा कि आगामी वर्ष में एक गोल आंकड़ा शामिल है, चलो हमारे लेख में कुछ सामयिकता जोड़ते हैं और 2020 तक इसके साथ एक लेबल चिपकाते हैं, खासकर जब यह वास्तव में ऐसा है।

तो, एक वेब पेज के लिए कौन सी वीडियो डिस्प्ले प्रौद्योगिकियों को 2020 के वर्ष में भूलना होगा? यह ब्राउज़र में फ्लैश है। यह मर चुका है। यह अब मौजूद नहीं है, सूची से इसे पार करें।

तीन उपयोगी विधियाँ

वे उपकरण जो आज आपके ब्राउज़र में एक वीडियो स्ट्रीम देखने की अनुमति देंगे:

WebRTC
HLS
वेबसोकेट + एमएसई

WebRTC में क्या गलत है

दो शब्दों में: यह संसाधन-गहन और जटिल है।

आप इसे दूर करेंगे, "संसाधन-गहनता से आपका क्या मतलब है?", चूंकि आजकल सीपीयू शक्तिशाली हैं, मेमोरी सस्ती है, तो समस्या क्या है? ठीक है, सबसे पहले, यह सभी यातायात का अनिवार्य एन्क्रिप्शन है भले ही आपको इसकी आवश्यकता न हो। दूसरे, वेबआरटीसी एक जटिल दो-तरफ़ा कनेक्शन है और चैनल गुणवत्ता के बारे में पीयर-टू-पीयर फीडबैक एक्सचेंज (इस मामले में पीयर-टू-सर्वर): समय के प्रत्येक क्षण में बिटरेट की गणना की जाती है, पैकेट के नुकसान का पता लगाया जाता है, निर्णय लेते हैं। उनके पुनर्निर्देशन, और ऑडियो-टू-वीडियो सिंक्रनाइज़ेशन की गणना उन सभी के संबंध में की जाती है, जो तथाकथित लिपसिंक है, जो वक्ता के होंठों को उनके शब्दों के साथ मेल खाता है। इन सभी गणनाओं, साथ ही सर्वर पर आने वाले ट्रैफ़िक, वास्तविक समय में RAM के आवंटित और मुफ्त गीगाबाइट्स को आवंटित करते हैं, और अगर कुछ भी गलत होता है तो 48-कोर सीपीयू के साथ 256-गीगाबाइट सर्वर आसानी से होने के बावजूद टेल-स्पिन में चला जाएगा बोर्ड पर सभी गिगाहर्ज़, नैनोमीटर और डीडीआर 10।

तो, यह एक इस्कंदर मिसाइल के साथ शिकार गिलहरी की तरह है। हमें केवल एक आरटीएसपी स्ट्रीम चूसने की जरूरत है, और फिर इसे प्रदर्शित करें, और वेबआरटीसी जो कहता है वह है, "हां, c'mon, लेकिन आपको इसके लिए भुगतान करना होगा।"

क्यों WebRTC अच्छा है

विलंबता। यह वास्तव में कम है। यदि आप कम विलंबता के लिए प्रदर्शन और जटिलता का त्याग करने के लिए तैयार हैं, तो WebRTC आपके लिए सबसे उपयुक्त संस्करण है।

क्यों HLS अच्छा है

दो शब्दों में: यह हर जगह काम कर सकता है

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

यह सब काफी अच्छा है, लेकिन ...

क्यों HLS खराब है

विलंबता। उदाहरण के लिए, निर्माण स्थल वीडियो निगरानी की परियोजनाएँ हैं। एक सुविधा वर्षों से निर्माणाधीन है, और उस समय के दौरान खराब कैमरा निर्माण स्थल के वीडियो को दिन और रात 24/7 रिकॉर्ड करता है। यह एक ऐसी स्थिति का उदाहरण है जहां कम विलंबता की आवश्यकता नहीं है।

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

यहां एक और उदाहरण है: वीडियो प्रस्तुतिकरण जहां कोई व्यक्ति आपके लिए एक उत्पाद प्रदर्शित करता है और एक त्वरित प्रतिक्रिया की अपेक्षा करता है। एक उच्च विलंबता के मामले में, वे आपको कैमरे पर उत्पाद दिखाएंगे, फिर पूछेंगे, "तो आप इसे कैसे पसंद करते हैं?", और यह केवल 15 सेकंड में आप तक पहुंच जाएगा। 15 सेकंड के भीतर, सिग्नल 12 बार चंद्रमा और वापस यात्रा कर सकता है। नहीं, हम ऐसी विलंबता नहीं चाहते हैं। यह लाइव की तुलना में पहले से रिकॉर्ड किए गए वीडियो की तरह दिखता है। लेकिन पूर्व-रिकॉर्ड किया गया वीडियो, जैसा कि यह है कि एचएलएस कैसे काम करता है: यह एक डिस्क पर या सर्वर की मेमोरी में एक वीडियो के भाग को रिकॉर्ड करता है, और खिलाड़ी रिकॉर्ड किए गए भागों को डाउनलोड करता है। यह कैसे HTTP लाइव काम करता है जो बिल्कुल भी लाइव नहीं है।

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

यहां यह ध्यान रखना होगा कि Apple ने 2019 की शरद ऋतु में अपने HLS लो लेटेंसी की घोषणा की, लेकिन यह पहले से ही एक अलग कहानी है। आइए बाद में उनके परिणामों पर अधिक विस्तृत नज़र डालें। और अब हमारे पास स्टॉक में एमएसई भी है।

क्यों MSE अच्छा है

मीडिया सोर्स एक्सटेंशन ब्राउज़र में पैकेट वीडियो चलाने का मूल समर्थन है। इसे H.264 और AAC के लिए एक मूल खिलाड़ी कहा जा सकता है, जिसे आप HLS के विपरीत, वीडियो सेगमेंट में फ़ीड कर सकते हैं, और जो ट्रांसपोर्ट प्रोटोकॉल के लिए बाध्य नहीं है। इस कारण से, आप वेबसोकेट्स प्रोटोकॉल के माध्यम से परिवहन का चयन कर सकते हैं। दूसरे शब्दों में, खंडों को अब प्राचीन रिक्वेस्ट-रिस्पांस (HTTP) तकनीक का उपयोग करके डाउनलोड नहीं किया जाएगा, लेकिन वेबसोकेट्स कनेक्शन के माध्यम से आसानी से डालना, जो लगभग सीधा टीसीपी चैनल है। यह देरी को कम करने के संबंध में बहुत मदद करता है जो 3-5 सेकंड के रूप में कम हो सकता है। इस तरह की विलंबता शानदार नहीं है, लेकिन अधिकांश परियोजनाओं के लिए उपयुक्त है जिनके लिए कठिन वास्तविक समय की आवश्यकता नहीं है। एक टीसीपी चैनल खोला जाता है, क्योंकि जटिलता और संसाधन-तीव्रता अपेक्षाकृत कम है, और लगभग एचएलएस सेगमेंट इसके माध्यम से डालते हैं, जो खिलाड़ी द्वारा एकत्र किए जाते हैं और खेले जाने के लिए भेजे जाते हैं।

क्यों MSE खराब है

यह हर जगह काम नहीं कर सकता। WebRTC के समान, ब्राउज़र में इसकी पहुंच कम है। iPhones (iOS) में MSE खेलने में विफलता का विशेष रूप से उल्लेखनीय इतिहास है, जो MSE को स्टार्टअप के लिए एकमात्र समाधान के रूप में उपयुक्त नहीं बनाता है।
यह निम्नलिखित ब्राउज़रों में पूरी तरह से उपलब्ध है: एज, फ़ायरफ़ॉक्स, क्रोम, सफारी, एंड्रॉइड ब्राउज़र, ओपेरा मोबाइल, एंड्रॉइड के लिए क्रोम, एंड्रॉइड के लिए फ़ायरफ़ॉक्स, एंड्रॉइड के लिए यूसी ब्राउज़र।

MSE का सीमित समर्थन iOS सफारी में काफी कम समय पहले दिखाई दिया, जिसकी शुरुआत iOS 13 से हुई।

आरटीएसपी पैर

हमने वीडियो सर्वर> ब्राउज़र दिशा में वितरण पर चर्चा की है। इसके अलावा, आपको इन दो चीजों की भी आवश्यकता होगी:

1) अपने वीडियो को आईपी कैमरा से सर्वर तक पहुंचाने के लिए।
2) ऊपर वर्णित स्वरूपों / प्रोटोकॉल में से एक में वीडियो परिवर्तित करने के लिए।

यह वह जगह है जहाँ सर्वर साइड अंदर आता है।

टा-दह ... वेब कॉल सर्वर 5 से मिलो (या दोस्तों के लिए बस डब्ल्यूसीएस)। किसी को आरटीएसपी ट्रैफ़िक प्राप्त करना है, वीडियो को सही ढंग से डी-पैकेट करना है, इसे वेबआरटीसी, एचएलएस या एमएसई में परिवर्तित करना है, अधिमानतः ट्रांसकोडर द्वारा ओवरलैम्प किए बिना, और इसे प्रस्तुत करने योग्य आकार में ब्राउज़र की ओर भेजें, कलाकृतियों और फ्रीज से दूषित नहीं।

यह कार्य पहली नज़र में जटिल नहीं है, लेकिन इसके पीछे बहुत सारे छिपे हुए नुकसान, चीनी कैमरे और रूपांतरण की बारीकियाँ हो सकती हैं जो वास्तव में भयानक है। यह हैक के बिना संभव नहीं है तथ्य की बात है, लेकिन यह काम करता है, और अच्छी तरह से काम करता है। उत्पादन में।

वितरण योजना

नतीजतन, एक मध्यवर्ती सर्वर पर रूपांतरण के साथ आरटीएसपी सामग्री वितरण की एक पूरी योजना आकार लेना शुरू कर देती है।

हमारे भारतीय सहयोगियों से सबसे अधिक पूछे जाने वाले प्रश्नों में से एक है, “क्या यह संभव है? सीधे, बिना सर्वर के? ”। नहीं, यह नहीं है; आपको सर्वर साइड की आवश्यकता होगी जो काम करेगा। क्लाउड में, हार्डवेयर में, आपकी बालकनी में corei7 पर, लेकिन आप इसके बिना नहीं कर सकते।

आइए हम अपने वर्ष 2020 तक वापस आ जाएं

तो, आपके ब्राउज़र में RTSP पकाने की विधि यहाँ दी गई है:

एक ताजा WCS (वेब कॉल सर्वर) लें ।
स्वाद के लिए WebRTC, HLS या MSE जोड़ें।
उन्हें वेब पेज पर परोसें।

अपने भोजन का आनंद लें!

नहीं, यह सब अभी तक नहीं है।

पूछताछ करने वाले न्यूरॉन्स निश्चित रूप से यह सवाल पूछना चाहेंगे, “कैसे? वास्तव में, यह कैसे किया जा सकता है ? यह ब्राउज़र में कैसा दिखेगा? ”

हम आपके ध्यान को रसोई-टेबल प्रयास के रूप में इकट्ठे किए गए न्यूनतर WebRTC प्लेयर पर लाना चाहते हैं।

1) मुख्य एपीआई स्क्रिप्ट फ़्लैशफोनर.जेएस और स्क्रिप्ट my_player.js, जो हम थोड़ी देर बाद वेब पेज पर बनाने जा रहे हैं, से कनेक्ट करें।

<script type="text/javascript" src="../../../../flashphoner.js"></script> <script type="text/javascript" src=my_player.js"></script>

2) वेब पेज के शरीर में एपीआई एपीआई

 <body onload="init_api()">

3) पृष्ठ पर, वीडियो के लिए एक कंटेनर के रूप में काम करेगा, जो div जोड़ें। इसके लिए आकार और सीमा निर्धारित करें।

 <div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>

4) प्ले बटन जोड़ें, जिस पर क्लिक करने से सर्वर से कनेक्शन शुरू हो जाएगा और वीडियो खेलना शुरू हो जाएगा

 <input type="button" onclick="connect()" value="PLAY"/>

5) अब स्क्रिप्ट my_player.js बनाते हैं जिसमें हमारे खिलाड़ी का मुख्य कोड होगा। स्थिरांक और चर का वर्णन करें

 var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var session;

6) HTML पेज लोड होने पर API को इनिशियलाइज़ करें

 function init_api() { console.log("init api"); Flashphoner.init({ }); }

7) WebSocket के माध्यम से WCS सर्वर से कनेक्ट करें। सब कुछ सही ढंग से कार्य करने के लिए, अपने WCS पते के साथ "wss: //demo.flashphoner.com" बदलें

 function connect() { session = Flashphoner.createSession({urlServer: "wss://demo.flashphoner.com"}).on(SESSION_STATUS.ESTABLISHED, function(session){ console.log("connection established"); playStream(session); }); }

8) उसके बाद, निम्नलिखित दो मापदंडों, "नाम" और "प्रदर्शन" को प्रसारित करें, जहां "नाम" खेली जा रही धारा का आरटीएसपी URL है, और "प्रदर्शन" myVideo का तत्व है जिसे हमारा खिलाड़ी स्थापित करेगा। अपनी स्ट्रीम का URL यहां भी सेट करें, हमारी जगह।

 function playStream() { var options = {name:"rtsp://b1.dnsdojo.com:1935/live/sys2.stream",display:document.getElementById("myVideo")}; var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) { console.log("playing"); }); stream.play(); }

फ़ाइलों को सहेजें और खिलाड़ी को लॉन्च करने का प्रयास करें। क्या आपका आरटीएसपी स्ट्रीम खेला जाता है?

जब हमने इसका परीक्षण किया , तो यह एक खेला गया: rtsp: //b1.dnsdojo.com: 1935 / live / sys2.stream।

और ऐसा ही दिखता है:

प्ले बटन से पहले खिलाड़ी पर क्लिक किया जाता है

वीडियो के साथ खिलाड़ी लॉन्च किया गया

बहुत अधिक कोड नहीं है:

एचटीएमएल

 <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="../../../../flashphoner.js"></script> <script type="text/javascript" src=my_player.js"></script> </head> <body onload="init_api()"> <div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div> <br/><input type="button" onclick="connect()" value="PLAY"/> </body> </html>

जावास्क्रिप्ट

 //Status constants var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; //Websocket session var session; //Init Flashphoner API on page load function init_api() { console.log("init api"); Flashphoner.init({ }); } //Connect to WCS server over websockets function connect() { session = Flashphoner.createSession({urlServer: "wss://demo.flashphoner.com"}).on(SESSION_STATUS.ESTABLISHED, function(session){ console.log("connection established"); playStream(session); }); } //Playing stream with given name and mount the stream into myVideo div element function playStream() { var options = {"rtsp://b1.dnsdojo.com:1935/live/sys2.stream",display:document.getElementById("myVideo")}; var stream = session.createStream(options).on(STREAM_STATUS.PLAYING, function(stream) { console.log("playing"); }); stream.play(); }

Demo.flashphoner.com का उपयोग सर्वर साइड के रूप में किया जाता है। उदाहरण का पूरा कोड नीचे दिए गए लिंक के पृष्ठ के पैर पर उपलब्ध है।
एक सुखद स्ट्रीमिंग है!

लिंक

गिथब पर प्लेयर कोड

एक वेब पेज या मोबाइल एप्लिकेशन में एक आरटीएसपी खिलाड़ी का एकीकरण

2020 में अपनी वेबसाइट पर आरटीएसपी कैसे पकाने के लिए, या क्यों बोअर्स को दूर भागने का मौका नहीं मिलेगा