हम विज्ञापनों को दिखाए बिना अपनी साइट पर HD वीडियो प्रसारण के लिए Ustream.tv को वश में करते हैं

मैं एक साइट पर लाइव एचडी वीडियो प्रसारण के आयोजन में अपना अनुभव प्रदान करता हूं जो निम्नलिखित विशेषताओं के कारण आपके लिए रुचि हो सकती है:

• शून्य वित्तीय लागत और विज्ञापन की कमी
• आगंतुकों की आमद के लिए प्रतिरोध
• उच्च परिभाषा वीडियो

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

के साथ शुरू करने के लिए, साइट पर लाइव वीडियो को सामान्य रूप से प्रसारित करने के बारे में कुछ परिचयात्मक शब्द (यदि यह विषय आपके लिए नया नहीं है, तो बेझिझक छोड़ें)।

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



फिर साइट पृष्ठ पर आपको एक आईपी कैमरा के लाइव वीडियो देखने वाले अतिथि के लिए एक पृष्ठ के साथ एक आइफ्रेम डालना होगा।

लाभ बहुत "स्वादिष्ट" हैं:

• कोई पीसी 24/7 की आवश्यकता है
• गतिशीलता - आईपी कैमरा कॉम्पैक्ट है और इसे वाईफाई के माध्यम से जोड़ा जा सकता है
• तृतीय-पक्ष सेवाओं और संसाधनों पर निर्भरता नहीं
• एक TF कार्ड पर प्रसारण रिकॉर्ड करने की क्षमता

लेकिन नुकसान ऐसे हैं कि इस तरह के समाधान का दायरा बहुत कम है:

• एक ही समय में अधिकतम 2-8 दर्शक
• 1 बिंदु से उत्पन्न होने वाली अविश्वसनीयता: यह हमलावर के लिए वीडियो प्रसारण के साथ एक दर्जन पृष्ठ खोलने के लिए पर्याप्त है, और (सामान्य) कैमरा नए अनुरोधों का जवाब देना बंद कर देगा।

अपने स्वयं के वीडियो सर्वर के साथ समाधान में अधिक लचीलापन और विश्वसनीयता है। यह किसी भी स्रोत से वीडियो को एन्कोड करता है और स्ट्रीम को एक मीडिया सर्वर में स्थानांतरित करता है, जिस पर विशेष सॉफ्टवेयर (एडोब फ्लैश स्ट्रीमिंग सर्वर, Wowza, Erlyvideo, Red5, आदि) सभी को वीडियो वितरित करता है। सर्किट कुछ इस तरह है:



कुछ फायदे

• वीडियो स्रोत चुनने में लचीलापन
• दर्शकों की संख्या केवल उस सर्वर की क्षमता पर निर्भर करती है जिस पर साइट स्थित है
• असीमित TF कार्ड वीडियो रिकॉर्डिंग

... कमियों से अधिक ऑफसेट

• कार्यान्वयन की उच्च जटिलता
• अधिकांश सॉफ्टवेयर समाधानों का भुगतान किया जाता है।
• सस्ते वर्चुअल होस्टिंग साइट की स्थितियों में लागू करना लगभग असंभव है
• आगंतुकों की अचानक आमद के लिए अनुपयुक्तता

... जो इस तरह के समाधान के लिए पेशेवर वीडियो प्रसारण के आला को निर्धारित करते हैं, जहां लाइव वीडियो में न्यूनतम देरी की आवश्यकता होती है, और पृष्ठभूमि में जटिलता और लागत का मुद्दा लुप्त होता है।

एक विशिष्ट साइट के लिए, सबसे दिलचस्प समाधान तब होता है जब मीडिया सर्वर बड़े डेटा केंद्रों की सुविधाओं पर स्थित होता है, और वीडियो प्रसारण को एक सेवा के रूप में पेश किया जाता है। ड्राइविंग:



फायदे:

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

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

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

स्वतंत्र और सस्ते सस्ते प्रसारण सेवा पैकेजों को ध्यान में रखते हुए, मैं ustream.tv पर बस गया। यहां तक ​​कि सेवाओं के एक मुफ्त पैकेज में, वह इस तरह के अद्भुत गुणों को जोड़ती है:

• वीडियो के आकार पर कृत्रिम प्रतिबंधों की कमी। आप अपने वीडियो को स्ट्रीम कर सकते हैं या नहीं यह बिटरेट और कोडेक पर निर्भर करता है। 2013 में मेरे द्वारा स्वीकार की गई अधिकतम बिटरेट वीपी 6 कोडेक (2011 में 6 एमबीपीएस) के साथ 2.5 एमबीपीएस है। और वीडियो का आकार क्या होगा - सेवा कोई फर्क नहीं पड़ता। दोनों 1x1 और 1920x1080 समस्याओं के बिना प्रसारित होते हैं।
• तृतीय-पक्ष संसाधनों पर वीडियो प्रसारण के प्रतिबंध पर प्रतिबंध की कमी
• बाहरी वीडियो स्रोत समर्थन

एकमात्र दोष - वीडियो के शीर्ष पर विज्ञापन दिखाना (एक निशुल्क पैकेज में) - को आसानी से दरकिनार किया जा सकता है।

तो, आपकी साइट पर उच्च-गुणवत्ता वाले वीडियो प्रसारण प्राप्त करने के लिए क्या करने की आवश्यकता है?

उपयोगकर्ता मेनू में ustream.tv पर पंजीकृत होने के बाद , "डैशबोर्ड" चुनें



फिर, " अधिक " बटन के साथ सूची को खोलना, " रिमोट " चुनें

अपने "RTMP URL" और "स्ट्रीम कुंजी" को याद रखें।



अब एडोब फ्लैश मीडिया लाइव एनकोडर को डाउनलोड और इंस्टॉल करें (एडोब वेबसाइट पर पंजीकरण आवश्यक है)।

एडोब फ्लैश मीडिया लाइव एनकोडर की मुख्य विंडो में, कॉपी किए गए पते "RTMP URL" को "FMS URL" फ़ील्ड में, और "स्ट्रीम कुंजी" को "स्ट्रीम" में पेस्ट करें



प्रसारण से पहले आपको जो मुख्य पैरामीटर कॉन्फ़िगर करने होंगे:

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

प्रारूप - संपीड़न का प्रकार (h.264 / VP6)। मैं VP6 का उपयोग करने की सलाह देता हूं - इसके साथ यह साइट एक उच्च बिटरेट को स्वीकार करती है।

फ्रेम दर - फ्रेम की संख्या प्रति सेकंड।

बिट दर - बिट दर (संपीड़न अनुपात)। अधिक बिटरेट - बेहतर तस्वीर - वास्तविक समय से अधिक देरी। मैं 256 से 2048 तक मूल्यों की सलाह देता हूं। अधिक के साथ - प्रसारण नहीं जा सकता है।

प्रारंभ पर क्लिक करें - प्रसारण चल रहा है! Ustream वेबसाइट पर, " गो टू चैनल " लिंक का उपयोग करके, हम प्रसारण पृष्ठ पर पहुंचते हैं, "शेयर", "<>", "कॉपी टू क्लिपबोर्ड" पर क्लिक करें। अब आपके पास अपनी साइट के पृष्ठ में सम्मिलित करने के लिए कोड है:

<iframe width="480" height="302" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe> <br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Broadcasting live with Ustream</a> 

जिसमें से आप समापन टैग के बाद तुरंत भाग को हटा सकते हैं, स्वत: प्रसारण शुरू करने के लिए autoplay=true कुंजी जोड़ सकते हैं और उन वीडियो आयामों को भी सेट कर सकते हैं जिनकी आपको width (चौड़ाई) और height (ऊंचाई) मानों को iframe टैग के मानों की आवश्यकता होती है। आपको कुछ ऐसा मिलता है:

 <iframe width="1920" height="1080" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> 

आपकी साइट के पृष्ठ पर कॉपी किए गए कोड को चिपकाए जाने पर, आपको पहले से ही एक काम करने वाला वीडियो प्रसारण प्राप्त होगा, लेकिन प्रसारण खुलने पर बाइस सेकंड तक विज्ञापन के रूप में बोनस के साथ।



और पॉप-अप वीडियो बैनर



जो अच्छा नहीं है। विज्ञापन दिखाना बंद करने की सेवा के लिए, आपको अपने आप को "गरीब रिश्तेदार" के रूप में पेश करना होगा - इस सेवा को दिखाने के लिए कि हमारा वीडियो इतना छोटा है कि उस पर विज्ञापन लगाना भी शर्मनाक है। 96x65 पिक्सेल, हम वीडियो का आकार बदलते हैं:

 <iframe width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> 

और विज्ञापन चमत्कारिक रूप से गायब हो जाता है! हालाँकि, और प्रसारण का अर्थ (इस संकल्प में)। इसलिए, हमारे छोटे धोखे के तुरंत बाद, हमें वीडियो को सामान्य मूल्यों पर वापस करने के लिए "मास्क रीसेट करना" चाहिए। यह हमें जावास्क्रिप्ट में मदद करेगा। किसी भी id (उदाहरण के लिए, "UstreamIframe") में iframe असाइन करें और एक छोटी स्क्रिप्ट के साथ कोड को पूरक करें:

 <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> <script> document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;"; </script> 

हो गया! वीडियो है, विज्ञापन नहीं है। लेकिन परीक्षणों से पता चला कि ऐसे प्रोसेसर पर काम करते समय, जो कमजोर होते हैं या अन्य कार्यों से बहुत अधिक लोड होते हैं, फ्लैश एक छोटे वीडियो आकार को ठीक नहीं कर सकता है, लेकिन इसे तुरंत जावास्क्रिप्ट का उपयोग करके सामान्य मूल्यों तक बढ़ा दिया गया है। "माथे पर" समाधान एक टाइमर जोड़ना होगा, जिसके लिए डोम के तत्वों को खींचने के बाद रोलर का आकार वापस आ जाएगा, लेकिन यह "सच" नहीं है, हालांकि यह एक कार्यशील समाधान है। Ustream सर्वर के साथ फ्लैश कनेक्शन को शुरू करने के तुरंत बाद आकार को वापस करना सही होगा। ऐसा करने के लिए, आपको ustream API का उपयोग करने की आवश्यकता है, क्योंकि यह मुफ़्त पैकेज में भी उपलब्ध है। एपीआई को जोड़ने के लिए आपको एक बाहरी स्क्रिप्ट को head सेक्शन में जोड़ना होगा:

  <script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script> 

और एक अलग फ़ंक्शन का आकार भी बनाते हैं, जिसे फ्लैश कहा जाता है जब ustream सर्वर बताता है कि हमें विज्ञापन दिखाने की आवश्यकता नहीं है

 <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe> <script> function restoreSize() { document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;"; } //    API Ustream $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', restoreSize); </script> 

यह विज्ञापन से लड़ने के लिए पर्याप्त है, लेकिन अभी भी एक "मालिकाना" Ustream नियंत्रण कक्ष है, अपने लोगो लिंक और बटन के साथ, किसी को भी कोड लेने और इसे खुद में पेस्ट करने की अनुमति देता है। सीएसएस टूल्स और पहले से जुड़े एपीआई से निपटना आसान है। हम iframe को एक div में लपेटते हैं, और जानबूझकर iframe की ऊँचाई को div की ऊँचाई से अधिक बनाते हैं ताकि Ustream का निचला पैनल बिल्कुल फिट न हो। फिर, CSS overflow संपत्ति के लिए धन्यवाद, यह दिखाई नहीं देगा:

 <div> <iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border: 0px none transparent;"></iframe> </div> <script> $videoW = 1920; //   $videoH = 1080; //   window.skipAd = function () { $extraH = 200; $barH = 32; //   Ustream $videoContainer.style.height = ($videoH+$extraH)+"px"; $videoContainer.style.width = $videoW+"px"; $videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px"; $videoContainer.parentNode.style.width = $videoW; $videoContainer.parentNode.style.height = $videoH; } $videoContainer = document.getElementById('UstreamIframe'); $videoContainer.parentNode.style.overflow = 'hidden'; //   CSS $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', skipAd); </script> 

अब आपके पास "makeweights" के बिना एक साफ वीडियो है। क्या अच्छा नहीं है - वीडियो को नियंत्रित करने की क्षमता अभी भी आवश्यक है। Ustream API का उपयोग करके, आप आसानी से अपनी जरूरत के कार्यों के लिए अपना नियंत्रण बना सकते हैं। उदाहरण के लिए, "कोड", "चलाएं", "म्यूट / अनम्यूट" बटन को पेज कोड में जोड़ें:

 <button onclick="$ustreamAPI.callMethod('play')"> [ > ] Play </button> <button onclick="$ustreamAPI.callMethod('pause')"> [ || ] Pause </button> <button onclick="$ustreamAPI.callMethod('volume', 0)"> [ ? ] Mute </button> <button onclick="$ustreamAPI.callMethod('volume', 100)"> [ )) ] Unmute </button> 

... और वे तुरंत काम करेंगे। आदेशों की एक पूरी सूची के लिए, आधिकारिक Ustream एम्बेड एपीआई प्रलेखन देखें।

डेमो

पूरी तरह से संकलित डेमो पेज (क्रॉस-डोमेन नीति के कारण स्थानीयहोस्ट के साथ काम नहीं करेगा!):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Video stream demo</title> <script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script> </head> <body> <div> <iframe id=UstreamIframe width="96" height="65" src="http://www.ustream.tv/embed/11435186?v=3&autoplay=true&wmode=direct&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border : 0px none transparent;"></iframe> </div> <button onclick="$ustreamAPI.callMethod('play')">[ > ] Play</button> <button onclick="$ustreamAPI.callMethod('pause')">[ || ] Pause</button> <button onclick="$ustreamAPI.callMethod('volume', 0)">[ ? ] Mute</button> <button onclick="$ustreamAPI.callMethod('volume', 100)">[ )) ] Unmute</button> <script> $videoW = 1920; //   $videoH = 1080; //   window.restoreSize = function () { $extraH = 200; $barH = 32; $videoContainer.style.height = ($videoH+$extraH)+"px"; $videoContainer.style.width = $videoW+"px"; $videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px"; $videoContainer.parentNode.style.width = $videoW; $videoContainer.parentNode.style.height = $videoH; } $videoContainer = document.getElementById('UstreamIframe'); $videoContainer.parentNode.style.overflow = 'hidden'; $ustreamAPI = UstreamEmbed('UstreamIframe'); $ustreamAPI.addListener('playing', restoreSize); </script> </body> </html> 

यदि आपकी साइट SSL का उपयोग करती है, तो आपको ustream (https: //www.ustream.tv/embed/123 ...) पर वीडियो पते पर https भी जोड़ना होगा।

मैं अब दो साल से Ustream.tv सेवाओं का उपयोग कर रहा हूं, और, अजीब तरह से, वे शर्तों को कड़ा नहीं करते हैं। संभवतः, लोड बढ़ने के कारण, सर्वर को शायद ही कभी 2.5 Mbit / s से अधिक की धाराएं प्राप्त होने लगीं, इसलिए, विश्वसनीयता के लिए, मैं 2 Mbit / s से अधिक की स्ट्रीम का उपयोग नहीं करता।

मुझे आशा है कि प्रस्तुत अनुभव आपको सोशल नेटवर्क पर अपनी वेबसाइट या पेज पर उच्च गुणवत्ता वाले वीडियो प्रसारण बनाने में मदद करेगा!