🎞️ 🦃 🤳 2020 में साइट पर आरटीएसपी कैसे तैयार किया जाए, या बोअर्स के पास भागने का समय क्यों नहीं है 🔋 🍎 🚆

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

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

एक विशिष्ट RTSP कनेक्शन सेटअप निम्नानुसार है:

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

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

इस लेख में, हम यह पता लगाएंगे कि इसे कैसे प्राप्त किया जाए। और जब से यार्ड में एक गोल संख्या है, हम लेख को प्रासंगिकता नहीं देंगे और लेबल 2020 को लटका देंगे, खासकर जब से यह ऐसा है।

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

तीन अच्छे तरीके

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

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

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

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

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

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

WebRTC के बारे में क्या अच्छा है

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

एचएलएस के बारे में क्या अच्छा है

दो शब्द: हर जगह काम करता है

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

और सब ठीक हो जाएगा, लेकिन।

खराब एचएलएस से

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

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

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

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

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

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

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

MSE क्या बुरा है

यह हर जगह काम नहीं करता है WebRTC की तरह, ब्राउज़र पैठ कम है। IPhones (iOS) विशेष रूप से MSE नहीं खेलने में शामिल हैं, जो MSE को किसी भी स्टार्टअप के लिए एकमात्र समाधान के रूप में अनुपयुक्त बनाता है।

ब्राउज़र में पूरी तरह से उपलब्ध: एज, फ़ायरफ़ॉक्स, क्रोम, सफारी, एंड्रॉइड ब्राउज़र, ओपेरा मोबाइल, एंड्रॉइड के लिए क्रोम, एंड्रॉइड के लिए फ़ायरफ़ॉक्स, एंड्रॉइड के लिए यूसी ब्राउज़र

IOS Safari को हाल ही में MSE के लिए सीमित समर्थन मिला है, जो iOS के संस्करण 13 से शुरू होता है।

Rtsp पैर

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

1) आईपी कैमरा से सर्वर पर वीडियो वितरित करें।

2) उपरोक्त प्रारूप / प्रोटोकॉल में से किसी एक के लिए प्राप्त वीडियो को कनवर्ट करें।

यहां सर्वर साइड दृश्य में प्रवेश करता है।

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

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

वितरण योजना

नतीजतन, एक मध्यवर्ती सर्वर पर रूपांतरण के साथ RTSP सामग्री वितरित करने के लिए एक समग्र योजना उभरती है।

हमारे भारतीय सहयोगियों के सबसे लगातार अनुरोधों में से एक “क्या यह संभव है? बिना सर्वर के सीधे? ” नहीं, यह असंभव है - आपको एक सर्वर भाग की आवश्यकता है जो यह काम करेगा। बादल में, लोहे के टुकड़े पर, बालकनी पर कोरी 7 पर, लेकिन किसी भी तरह से इसके बिना।

हमारे 2020 पर वापस

तो, ब्राउज़र में RTSP के लिए नुस्खा:

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

बोन एपेटिट!

नहीं, अभी तक नहीं

जिज्ञासु न्यूरॉन्स निश्चित रूप से सवाल होगा "कैसे?" वैसे यह कैसे करना है? यह एक ब्राउज़र में कैसा दिखेगा? ” आपका ध्यान घुटने पर बना न्यूनतम वेबआरटीसी खिलाड़ी है:

1) हम मुख्य एपीआई के वेब पेज के लिए Flashphoner.js स्क्रिप्ट और 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 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 पेज को लोड करते समय एपीआई को इनिशियलाइज़ करते हैं

 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) अगला, हम दो पैरामीटर पास करते हैं: नाम और प्रदर्शन: नाम - स्ट्रीम का RTSP 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(); }

सर्वर का साइड डेमो है ।flashphoner.com पूर्ण उदाहरण कोड नीचे बेसमेंट में लिंक के साथ उपलब्ध है। एक अच्छी स्ट्रीमिंग है!

संदर्भ

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

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

2020 में साइट पर आरटीएसपी कैसे तैयार किया जाए, या बोअर्स के पास भागने का समय क्यों नहीं है