Amazon IVS पर ऑन-डिमांड पास्ट लाइव स्ट्रीम प्लेबैक w/Full Chat Replay बनाएं

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

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

अमेज़न आईवीएस स्ट्रीम मेटाडेटा

इस समस्या को हल करने का प्रयास करते समय, मेरा पहला विचार लाइव स्ट्रीम से जुड़े मेटाडेटा पर एक नज़र डालना था ताकि यह देखा जा सके कि इसमें कोई मूल्यवान जानकारी छिपी हुई है या नहीं। शुक्र है, मेटाडेटा की नियमित धारा में एक मान प्रतीत होता है जिसका उपयोग हमारे चैट प्लेबैक उद्देश्यों के लिए किया जा सकता है। मेरे परीक्षण में, प्रत्येक स्ट्रीम में ID3 मेटाडेटा होता है जो Amazon IVS ट्रांसकोडिंग प्रक्रिया द्वारा इंजेक्ट किया गया प्रतीत होता है। इन ID3 टैग में एक उपयोगी टाइमस्टैम्प होता है जिसका उपयोग हम चैट रीप्ले में मदद के लिए कर सकते हैं। इन घटनाओं को सुनने के लिए, हम एक हैंडलर संलग्न कर सकते हैं जो IVSPlayer.MetadataEventType.ID3 ईवेंट प्रकार को सुनता है। यह घटना प्रकार प्रलेखित है , लेकिन दस्तावेज़ इसके बारे में बहुत कुछ नहीं कहते हैं या इसमें क्या शामिल हो सकता है इसके बारे में कोई गारंटी नहीं देते हैं।

अप्रमाणित सुविधाओं से बचना चाहते हैं ? यदि आप एक गैर-दस्तावेज सुविधा का उपयोग करने के बारे में चिंतित हैं, तो आप अपने समयबद्ध मेटाडेटा को अपने लाइव स्ट्रीम में उचित टाइमस्टैम्प के साथ इंजेक्ट कर सकते हैं जब नए संदेश आपके Amazon IVS चैट रूम में पोस्ट किए जाते हैं। ध्यान रखें कि एपीआई के माध्यम से PutMetadata ईवेंट पोस्ट करने के आकार और आवृत्ति की सीमाएँ हैं।

मेटाडेटा ईवेंट के लिए सुनना

आइए प्लेयर SDK का उपयोग करके रिकॉर्ड की गई स्ट्रीम को प्लेबैक करने के लिए Amazon IVS प्लेयर सेट अप करें। सबसे पहले, हम नवीनतम Amazon IVS प्लेयर SDK को <script> टैग के माध्यम से शामिल करेंगे।

अमेज़ॅन आईवीएस के लिए नया? अमेज़ॅन इंटरएक्टिव वीडियो सेवा के साथ ब्लॉग श्रृंखला प्रारंभ करना देखें। यदि आरंभ करने के बारे में आपके कोई प्रश्न हैं, तो उस श्रृंखला (या नीचे) में किसी भी पोस्ट पर एक टिप्पणी पोस्ट करें!

 <script src="https://player.live-video.net/1.16.0/amazon-ivs-player.min.js"></script>

हमेशा की तरह, हमें अपने HTML मार्कअप में एक <video> तत्व शामिल करना होगा जिसका उपयोग प्लेबैक के लिए किया जाएगा।

 <video id="video-player" muted controls autoplay playsinline></video>

अब हम IVS प्लेयर का उदाहरण बना सकते हैं। मैं नीचे दिए गए यूआरएल को हार्डकोड कर रहा हूं, लेकिन आप इस यूआरएल को इस पोस्ट [टूडू: लिंक] में वर्णित विधि के माध्यम से प्राप्त कर सकते हैं।

 const streamUrl = 'https://[redacted].cloudfront.net/ivs/v1/[redacted]/[redacted]/2022/11/17/18/6/[redacted]/media/hls/master.m3u8'; const videoEl = document.getElementById('video-player'); const ivsPlayer = IVSPlayer.create(); ivsPlayer.attachHTMLVideoElement(videoEl); ivsPlayer.load(streamUrl); ivsPlayer.play();

जैसा ऊपर बताया गया है, इस उद्देश्य के लिए उपयोगी होने के लिए, हमें टाइमस्टैम्प की नियमित स्ट्रीम की आवश्यकता है। यह पता लगाने के लिए कि ID3 मेटाडेटा कितनी बार प्राप्त होता है, आइए कुछ समय जोड़ते हैं। सबसे पहले, स्ट्रीम शुरू होते ही टाइमस्टैम्प कैप्चर करें।

 ivsPlayer.addEventListener(IVSPlayer.PlayerState.PLAYING, (evt) => { window.time = Date.now(); });

अगला, हम ID3 ईवेंट श्रोता जोड़ेंगे, समय लॉग करेंगे और टाइमर को रीसेट करेंगे।

 ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const now = Date.now(); console.log(`${(now - window.time) / 1000} seconds since last event`); window.time = now; });

अब हम प्लेबैक शुरू कर सकते हैं और यह देखने के लिए कंसोल का निरीक्षण कर सकते हैं कि ईवेंट कितनी बार सक्रिय होते हैं।

मेरे परीक्षण में, घटनाओं को हर 1-2 सेकंड में निकाल दिया जाता है। यह रीयलटाइम नहीं है, लेकिन अधिकांश परिदृश्यों के लिए शायद यह काफी अच्छा है। आइए अब इस घटना पर एक नजर डालते हैं कि इसमें क्या डेटा है।

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { console.log(evt); });

जब हम ऊपर दिए गए श्रोता के साथ प्लेबैक शुरू करते हैं, तो हम ब्राउज़र कंसोल में लॉग की गई निम्न जानकारी देख सकते हैं।

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

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; console.log(timestampWithMs); console.log(new Date(timestamp)); });

यह मेरे परीक्षण के लिए निम्न आउटपुट उत्पन्न करता है।

अगर मैं वीडियो में एक यादृच्छिक पल की तलाश करता हूं, तो उचित टाइमस्टैम्प हमेशा सही होता है। इसका मतलब यह है कि हर 1-2 सेकंड में हमें उस समय का एक मान्य GMT टाइमस्टैंप पता चलता है, जब इवेंट को स्ट्रीम में कैप्चर किया गया था। इसका अर्थ है कि हम यह मान सकते हैं कि इस टाइमस्टैम्प से पहले भेजे गए सभी चैट संदेश चैट पर पोस्ट कर दिए गए हैं और चैट कंटेनर में दिखाई देने चाहिए।

चैट लॉग पुनर्प्राप्त करना

जब मेरा पृष्ठ लोड होता है, तो मैं इस श्रृंखला में पिछली पोस्ट [टूडू: लिंक] में उल्लिखित विधि का उपयोग स्ट्रीम के लिए संपूर्ण चैट लॉग को पुनः प्राप्त करने और इसे चैट कंटेनर <div> में प्रस्तुत करने के लिए कर सकता हूं। चूंकि स्ट्रीम की शुरुआत में कोई संदेश दिखाई नहीं देना चाहिए, इसलिए मैं यह सुनिश्चित करूँगा कि वे कॉल में एक वर्ग शामिल करें जो उन्हें उपयोगकर्ता से छुपाता है और डेटा विशेषता को उचित टाइमस्टैम्प के साथ संग्रहीत करता है ताकि मुझे पता चल सके कि कौन से संदेश दिखाई देने चाहिए स्ट्रीम में कोई टाइमस्टैम्प दिया गया।

 window.chatLog = await getChatLogs(logGroupName, chatArn, startTime, endTime); renderChat();

मेरा renderChat() फ़ंक्शन प्रत्येक संदेश को चैट कंटेनर में पोस्ट करने का काम करता है।

 const renderChat = () => { const chatContainer = document.getElementById('chat'); window.chatLog.forEach(msg => { const msgTemplate = document.getElementById('chatMsgTemplate'); const msgEl = msgTemplate.content.cloneNode(true); const ts = new Date(msg.event_timestamp).getTime() * 1000; msgEl.querySelector('.msg-container').setAttribute('data-timestamp', ts); msgEl.querySelector('.chat-username').innerHTML = msg.payload.Attributes.username; msgEl.querySelector('.msg').innerHTML = msg.payload.Content; chatContainer.appendChild(msgEl); }); };

अब मैं replayChat() फ़ंक्शन को कॉल करने के लिए ID3 श्रोता को संशोधित कर सकता हूं और इसे वर्तमान टाइमस्टैम्प पास कर सकता हूं।

 window.ivsPlayer.addEventListener(IVSPlayer.MetadataEventType.ID3, (evt) => { const segmentMetadata = evt.find((tag) => tag.desc === 'segmentmetadata'); const segmentMetadataInfo = JSON.parse(segmentMetadata.info[0]); const timestamp = segmentMetadataInfo['transc_s']; const timestampWithMs = timestamp * 1000; replayChat(timestampWithMs); });

replayChat() में, मैं उन सभी चैट नोड्स को ढूंढ सकता हूं जिनमें रिकॉर्ड किए गए स्ट्रीम से वर्तमान टाइमस्टैम्प से कम या उसके बराबर टाइमस्टैम्प होता है और उस टाइमस्टैम्प के आधार पर कोई चैट संदेश दिखा/छुपा सकता है।

 const replayChat = (currentTimestamp) => { Array.from(document.querySelectorAll('[data-timestamp]')).forEach(node => { const chatMsgTs = Number(node.getAttribute('data-timestamp')); const isVisible = chatMsgTs <= currentTimestamp; if (isVisible) { node.classList.remove('d-none'); } else { node.classList.add('d-none'); } }); const chatContainer = document.getElementById('chat'); chatContainer.scrollTop = chatContainer.scrollHeight; }

इस बिंदु पर, हमने एक रिकॉर्ड किए गए Amazon IVS लाइव स्ट्रीम को पूर्ण चैट रीप्ले के साथ चलाने का लक्ष्य प्राप्त कर लिया है।

सारांश

इस पोस्ट में, हमने ठीक समय पर चैट संदेशों के साथ स्ट्रीम का ऑन-डिमांड रीप्ले बनाने के लिए रिकॉर्ड किए गए Amazon IVS लाइव स्ट्रीम को लॉग चैट संदेशों के साथ संयोजित करने का तरीका देखा।