मिनटों में अपनी जैमस्टैक साइट पर स्ट्रीमिंग कैसे जोड़ें

पिछले हफ्ते, मुझे अपने दोस्त टॉड शार्प की लाइव स्ट्रीम, स्ट्रीमिंग पर स्ट्रीमिंग पर होने का विशेष आनंद मिला। आप उस सत्र की रिकॉर्डिंग यहां देख सकते हैं:

टोड अमेज़ॅन इंटरेक्टिव वीडियो सर्विस (आईवीएस) के लिए प्रमुख डेवलपर वकील है, या अधिक सरलता से, ट्विच प्लेटफॉर्म की अविश्वसनीय शक्ति लेने और इसे अपने हाथों में रखने का एक तरीका है। आईवीएस आपको देता है:

• आपकी सामग्री के लिए चैनल बनाने की क्षमता।

• वेब-आधारित से लेकर ओबीएस जैसे अधिक शक्तिशाली टूल तक अपनी सामग्री प्रसारित करने के कई तरीके।

• अपनी सामग्री प्रदर्शित करने के कई तरीके, जिसमें एक बहुत ही सरल वेब SDK शामिल है।

• सुपर विस्तृत रिपोर्टिंग।

• और स्ट्रीम में गहरा एकीकरण जो ट्रांसक्रिप्शन, लैम्ब्डा-आधारित चैट मॉडरेशन, और बहुत कुछ जैसी चीजों की अनुमति देता है।

  
  

यह एक वाणिज्यिक सेवा है, लेकिन एडब्ल्यूएस में बहुत अधिक सब कुछ की तरह, एक नि: शुल्क स्तर है जो आपको चीजों का परीक्षण करने देता है और देखता है कि यह आपके लिए समझ में आता है या नहीं।

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

मैं डेवलपर एडवोकेसी में अपने करियर में जानता हूं, मेरे लिए डेवलपर ऑनबोर्डिंग पर लगातार जांच और टिप्पणी किए बिना कुछ नया करने की कोशिश करना असंभव है। टॉड अपनी स्ट्रीम पर इसे लाइव करने के लिए अत्यधिक सम्मान के पात्र हैं।

मैं चीजों को तोड़ने, चीजों को गलत करने के लिए अच्छी तरह से जाना जाता हूं, और जब डीएक्स की बात आती है तो आम तौर पर सिर्फ आपका सबसे बुरा सपना होता है, इसलिए वह काफी बहादुर था।

(और स्पष्ट होने के लिए, हमने इनमें से किसी भी स्ट्रीम की पूर्व-योजना नहीं बनाई थी। मुझे पहले से कुछ भी नहीं दिया गया था, और मेरे पास एकमात्र वास्तविक ज्ञान उनके ब्लॉग पोस्ट और सामान्य चैट पढ़ रहा था।)

जैसा कि आप कल्पना कर सकते हैं, "रोल योर ओन आईवीएस" जैसा कुछ वास्तव में जटिल होने वाला है, लेकिन हमारे एक घंटे के सत्र में, हमने अपना चैनल सेट किया, मैंने ओबीएस और एक वेब टूल से प्रसारण किया और एक सरल बनाने में सक्षम था स्ट्रीम प्रदर्शित करने के लिए वेब पेज।

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

आप प्रारंभ करना मार्गदर्शिका के साथ भी प्रारंभ करना चाहेंगे।

इस बात को ध्यान में रखते हुए, आरंभ करने के लिए यह कितना सरल है, इसकी एक मूल रूपरेखा यहां दी गई है।

चरण एक - एडब्ल्यूएस प्राप्त करें

मैं अभी इसे छोड़ रहा हूँ। मेरा मतलब है, मुझे लगता है कि मैं वैसा नहीं हूं जैसा मैं कह रहा हूं, और आपको कभी भी कुछ भी ग्रहण नहीं करना चाहिए, लेकिन लोगों का एक बड़ा प्रतिशत पहले से ही AWS का उपयोग करता है, मेरी धारणा यह है कि आपके पास पहले से ही एक खाता है।

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

चरण दो - अपना चैनल बनाएं

अगली चीज़ जो आप करेंगे वह AWS कंसोल के IVS भाग में एक चैनल को परिभाषित करेगी:

एक अनुस्मारक के रूप में, आईवीएस के विष पर खोज बॉक्स सामान खोजने का वास्तव में अच्छा काम करता है। एडब्ल्यूएस थोड़ा जबरदस्त हो सकता है, लेकिन उनकी खोज ने हाल ही में चीजों को बहुत आसान बना दिया है।

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

अगर मैं अपनी कंपनी की वेबसाइट पर स्ट्रीमिंग जोड़ना चाहता हूं, तो मैं प्रशिक्षण, बाहरी घटनाओं आदि जैसी चीजों के लिए एक चैनल होने की कल्पना कर सकता हूं।

कम से कम एक चैनल की जरूरत है। एक नया चैनल बनाते समय, न्यूनतम नाम है:

ध्यान दें कि विकल्पों में से एक स्वचालित रूप से स्ट्रीम को S3 में संग्रहीत कर रहा है। मैंने उसे टोड के साथ स्ट्रीम पर सक्षम नहीं किया, लेकिन यह वास्तव में अच्छा है कि इसे सक्षम करना इतना आसान है। जाहिर है, बड़ी वीडियो फ़ाइलों को संग्रहीत करने में लागत आने वाली है, लेकिन मैं इसकी सराहना करता हूं कि इसे सक्षम करना कितना आसान है।

चरण तीन - अपने ब्रॉडकास्टर का पता लगाएं

उनके SDKs, OBS स्टूडियो, या FFmpeg का उपयोग करके आपके स्ट्रीमिंग कवर को सेट करने के संबंध में प्रारंभ करना दस्तावेज़। मैंने अतीत में ओबीएस स्टूडियो का उपयोग किया है, इसलिए टोड के साथ स्ट्रीम के दौरान, मैंने उसका उपयोग किया। हालांकि मैं लोगों को चेतावनी देता हूं कि अगर आपने इसे पहले कभी इस्तेमाल नहीं किया है, तो यह काफी भारी हो सकता है।

यह निश्चित रूप से मेरे लिए था (हेक, मैं अभी भी मुश्किल से जानता हूं कि मैं क्या कर रहा हूं)।

इसके बजाय, मुझे एक और विकल्प साझा करने दें जिसे टॉड ने मेरे साथ बाद में स्ट्रीम में साझा किया था, stream.ivs.rocks । यह एक वेब-आधारित स्ट्रीमिंग समाधान है जिसका उपयोग आप आईवीएस का परीक्षण करने के लिए कर सकते हैं।

अपने ब्राउज़र में पृष्ठ खोलें (ध्यान दें कि यह कहता है कि एज समर्थित नहीं है, लेकिन मुझे इससे कोई समस्या नहीं थी), और अपनी सेटिंग पर जाने के लिए गियर आइकन पर क्लिक करें। आप अपना "इनजेस्ट एंडपॉइंट" और "स्ट्रीम कुंजी" निर्दिष्ट करना चाहेंगे, ये दोनों आप अपने चैनल विवरण में AWS कंसोल में पा सकते हैं।

वही गलती न करें जो मैंने की थी - "इनजेस्ट सर्वर" "इनजेस्ट एंडपॉइंट" जैसा नहीं है, आप इसे देखने के लिए "अन्य इनजेस्ट विकल्प" खोलना और विस्तृत करना चाहेंगे।

एक बार जब आप ऐसा कर लेते हैं, तो आप नीचे "स्ट्रीमिंग शुरू करें" बटन पर क्लिक कर सकते हैं, और सचमुच, बस इतना ही! हालांकि यह ऐसा कुछ नहीं है जिसे आप "वास्तविक" स्ट्रीम के लिए करेंगे, यह सेट अप करने के लिए बहुत आसान और तेज़ है।

एक बार जब आप स्ट्रीमिंग कर रहे हों, तो AWS कंसोल पर वापस जाएं, "लाइव चैनल" पर क्लिक करें, और आप अपनी स्ट्रीम को एक्शन में देख सकते हैं:

यदि आप चैनल विवरण पर जाते हैं, तो यह वहां भी प्रदर्शित होता है:

वैसे, वहाँ रहते हुए, और भविष्य में, आप पिछली स्ट्रीम और स्ट्रीम के बारे में सभी प्रकार के बढ़िया मेट्रिक्स देख सकते हैं।

इस उपयोग की गई बहुत सी शब्दावली से मैं परिचित नहीं हूं, इसलिए यह ध्यान में रखना है कि क्या आप स्ट्रीमिंग के लिए नए हैं (और कुछ ऐसा है जिसे मैंने टॉड के साथ प्रतिक्रिया के रूप में साझा किया है), लेकिन यदि आपको आँकड़े पसंद हैं, तो AWS ने आपको कवर कर लिया है।

चरण चार - फ्रंट एंड

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

यहाँ एक संपूर्ण कार्यान्वयन है:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="https://player.live-video.net/1.18.0/amazon-ivs-player.min.js"></script> <style> video#video-player { width: 800px; height: 450px; } </style> </head> <body> <h2>My Stream</h2> <video id="video-player" playsinline controls autoplay></video> <script> const pbURL = 'https://e0e6ec1c389e.us-east-1.playback.live-video.net/api/video/v1/us-east-1.100330257216.channel.4tjprROF5ZWE.m3u8'; document.addEventListener('DOMContentLoaded', init, false); async function init() { if (IVSPlayer.isPlayerSupported) { const player = IVSPlayer.create(); player.attachHTMLVideoElement(document.getElementById('video-player')); console.log('player made'); player.load(pbURL); player.play(); } else console.log('u stink'); } </script> </body> </html>

आइए इसे तोड़ दें। आपको उनका SDK लोड करने के ऊपर एक स्क्रिप्ट टैग मिल गया है। इसके बाद, मुझे अपना HTML <video> टैग और मेरे CSS को ठीक से आकार देने के लिए महत्वपूर्ण बिट्स के साथ मिला है।

जावास्क्रिप्ट IVSPlayer का एक उदाहरण बनाता है और इसे DOM से जोड़ता है। pbURL मान AVS चैनल कॉन्फ़िगरेशन से आता है:

और यहाँ यह क्रिया में है!

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

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

इतना ही!

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

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

तो फिर से - डॉक्स देखें। पचाने के लिए बहुत कुछ होने जा रहा है, लेकिन जितना मैंने यहां छुआ है, उससे कहीं अधिक है।

इसके बाद, टोड की पोस्ट dev.to पर देखें, जहां उन्होंने उदाहरणों का एक गुच्छा साझा किया है। हाल ही में, उन्होंने ब्राउज़र में एक रीयल-टाइम मल्टी-होस्ट वीडियो चैट का प्रदर्शन किया और उसके बाद कई होस्ट और लाइव स्ट्रीमिंग, फिर से ब्राउज़र का उदाहरण दिया।

मुझे लगता है कि चैट और मॉडरेट करने की शक्ति वाली उनकी पोस्टें मेरी पसंदीदा हैं। मैं विशेष रूप से कूल होने के रूप में आपका अपना "लोफ़ी" रेडियो स्टेशन बनाने पर लिखे गए एक की भी सिफारिश करूँगा।