मैंने हाल ही में अमेज़ॅन इंटरएक्टिव वीडियो सर्विस (अमेज़ॅन आईवीएस) के साथ मल्टी-होस्ट लाइव स्ट्रीम के बारे में कुछ पोस्ट लिखी हैं। यह एक रोमांचक सुविधा है जो संभावनाओं की दुनिया खोलती है जो हाल तक उपलब्ध नहीं थी। हमने सबसे पहले देखा कि । मल्टी-होस्ट लाइव चैट एप्लिकेशन कैसे बनाया जाए इसके बाद, हमने देखा कि उस लाइव चैट सत्र को अमेज़ॅन आईवीएस चैनल पर कैसे प्रसारित किया जाए। जब हमने उस आखिरी पोस्ट में प्रसारण क्लाइंट में चैट प्रतिभागियों को जोड़ने पर ध्यान दिया, तो आपने शायद देखा कि मैंने थोड़ा धोखा दिया और मानों को हार्डकोड किया जो प्रसारण क्लाइंट को क्लाइंट पर प्रतिभागी के वीडियो का आकार और स्थिति बताता है। VideoComposition खैर - धोखा एक मजबूत शब्द है - मान लीजिए कि मैंने लाइव चैट सत्र को प्रसारित करने की प्रक्रिया पर ध्यान केंद्रित करने के लिए जानबूझकर कोड को सरल बना दिया है। मूल रूप से हम यहां जो खोज रहे हैं वह प्रसारण में प्रतिभागी के वीडियो के आकार और स्थिति को संशोधित करना है ताकि जब एक वीडियो हो, तो लेआउट कुछ इस तरह दिखे: लेकिन जब दो वीडियो होंगे, तो लेआउट कुछ इस तरह बदल जाएगा: और जब पाँच हों: आपको यह विचार मिल गया है - एक गतिशील लेआउट जो प्रतिभागियों की संख्या के आधार पर बदलता है। इस पोस्ट में, हम एक ऐसे तरीके पर नज़र डालेंगे जिसका उपयोग करके आप डायनामिक लेआउट बनाना थोड़ा आसान बना सकते हैं। हम पिछली पोस्ट में समाधान का निर्माण करेंगे, इसलिए यदि आपने अभी तक वह पोस्ट नहीं पढ़ी है, तो शायद अभी ऐसा करना एक अच्छा विचार है। पिछली पोस्ट में, हमने नामक एक इवेंट के बारे में सुना। उस इवेंट के इवेंट हैंडलर में, हमने अपने प्रतिभागियों को DOM में जोड़ा और ऑडियो और वीडियो को उदाहरण में प्रस्तुत किया। STAGE_PARTICIPANT_STREAMS_ADDED IVSBroadcastClient एक गतिशील लेआउट प्रस्तुत करने के लिए, हमें यह ट्रैक करना होगा कि वर्तमान में सत्र में कितने प्रतिभागी हैं, इसलिए हम एक वैश्विक चर के रूप में नामक एक सरणी जोड़ देंगे। आइए वर्तमान प्रतिभागी आईडी को उस सरणी में धकेलने के लिए इवेंट हैंडलर को संशोधित करें। participantIds stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { //add participant id to array participantIds.push(participant.id); renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); updateVideoCompositions(); }); पिछली पोस्ट में, मैंने उल्लेख किया था कि विधि नहीं दिखाई गई क्योंकि कार्यान्वयन अलग-अलग होगा। हम थोड़ी देर में एक संभावित कार्यान्वयन के बारे में बात करेंगे। updateVideoCompositions() अभी के लिए, आइए देखें कि हम हार्डकोडिंग के बजाय डायनामिक लेआउट कॉन्फ़िगरेशन कैसे प्राप्त कर सकते हैं जैसा कि हमने पिछली पोस्ट में किया था। गतिशील आकार और स्थिति प्राप्त करने का एक तरीका प्रतिभागी सरणी पर लूप करना और प्रतिभागियों की संख्या, के आकार और पंक्तियों, स्तंभों और पैडिंग की वांछित मात्रा के आधार पर उनकी गणना करना है। लेकिन, ? <canvas> क्यों जब आपको पता चलता है कि ये मान कभी नहीं बदलते हैं तो यह बहुत कठिन कोड और अनावश्यक काम लगता है। यदि आपके पास एक प्रतिभागी है, तो वीडियो एक निश्चित आकार का होगा और में केंद्रित होगा। <canvas> इससे कोई फर्क नहीं पड़ता कि कितने प्रतिभागी जुड़ते हैं - प्रत्येक वीडियो का लेआउट प्रतिभागियों की दी गई संख्या के लिए हमेशा समान रहेगा। तो जब हम इन मूल्यों की पूर्व-गणना कर सकते हैं और उन्हें सरणी की एक श्रृंखला में संग्रहीत कर सकते हैं तो समय और सीपीयू चक्र क्यों बर्बाद करें? अपने डेमो के लिए, मैंने प्रत्येक संभावित लेआउट के लिए संरचना मान निर्धारित करने के लिए एक पेन, कागज और कैलकुलेटर के साथ गहन 30 मिनट के साथ सर्वोत्तम मान निर्धारित करने में कुछ समय बिताया। कृपया ध्यान दें: जैसा कि निम्नलिखित रेखाचित्र से पता चलता है, मैं गणित या कला का विषय था। नहीं इस डेमो के लिए, मैंने अपनी लाइव स्ट्रीम को केवल पहले 6 प्रतिभागियों के लिए वीडियो दिखाने तक ही सीमित रखा। आपका उपयोग मामला कुछ अलग निर्देशित कर सकता है, लेकिन एक लाइव स्ट्रीम में 6 से अधिक प्रतिभागी वीडियो होना मेरे अनुभव में थोड़ा व्यस्त हो जाता है। यहाँ मेरी गणना का परिणाम है: const layouts = [ [{ height: 720, width: 1280, x: 320, y: 180 }], [{ height: 450, width: 800, x: 80, y: 315 }, { height: 450, width: 800, x: 1040, y: 315 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 560, y: 585 }], [{ height: 450, width: 800, x: 80, y: 45 }, { height: 450, width: 800, x: 1040, y: 45 }, { height: 450, width: 800, x: 80, y: 585 }, { height: 450, width: 800, x: 1040, y: 585 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 340, y: 640 }, { height: 337, width: 600, x: 980, y: 640 }], [{ height: 337, width: 600, x: 20, y: 100 }, { height: 337, width: 600, x: 650, y: 100 }, { height: 337, width: 600, x: 1280, y: 100 }, { height: 337, width: 600, x: 20, y: 640 }, { height: 337, width: 600, x: 650, y: 640 }, { height: 337, width: 600, x: 1280, y: 640 }] ]; यह अत्याधिक लग सकता है, लेकिन विचार करें कि बाहरी सरणी तत्व के प्रत्येक तत्व में प्रत्येक वीडियो के लिए रचनाओं की एक श्रृंखला होती है। यदि 3 प्रतिभागी हैं, तो हम बाहरी सरणी में तीसरे तत्व को संदर्भित कर सकते हैं, और आईडी सरणी में प्रतिभागी आईडी की स्थिति यह निर्धारित करेगी कि कौन सी रचना उस वीडियो पर लागू होगी। participantIds उचित संरचना प्राप्त करने के लिए हम अपने फ़ंक्शन को संशोधित कर सकते हैं और जब हम प्रसारण क्लाइंट में वीडियो जोड़ते हैं तो उन मानों का उपयोग कर सकते हैं। renderVideosToClient() const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; // get the index of this participantId const pIdx = participantIds.indexOf(participantId); let composition = layouts[participantIds.length - 1][pIdx]; config.index = 2; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); }; लेकिन याद रखें - यदि हम ऐसा केवल तभी करते हैं जब किसी प्रतिभागी को जोड़ा जाता है, तो पिछली वीडियो रचनाएँ अभी भी उस रचना को प्रतिबिंबित करेंगी जो उन्हें जोड़े जाने पर लागू की गई थी। यहीं पर फ़ंक्शन चित्र में आता है। updateVideoCompositions() यहां हम सरणी पर लूप करते हैं, से उचित संरचना लेते हैं, और का उपयोग करते हैं। ) की विधि। participantIds layouts updateVideoDeviceComposition() डॉक्स broadcastClient const updateVideoCompositions = async () => { let idx = 0; for (const p of participantIds) { const videoId = `video-${p}`; let config = layouts[filteredParticipantIds.length - 1][idx]; config.index = 2; broadcastClient.updateVideoDeviceComposition(videoId, config); idx = idx + 1; } }; हमें यह भी सुनिश्चित करना चाहिए कि जब कोई प्रतिभागी मंच छोड़ता है तो हम प्रतिभागी आईडी को सरणी से हटा दें और सभी वीडियो के लिए संरचना को फिर से अपडेट करें। stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const participantId = participant.id; // remove participant id from array const pIdx = participantIds.findIndex(id => id === participantId); participantIds.splice(pIdx, 1); const videoTrackId = `video-${participantId}`; const audioTrackId = `audio-${participantId}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participantId}-video`; document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); }); जैसा कि ऊपर उल्लेख किया गया है, आप संभवतः प्रसारण क्लाइंट के माध्यम से लाइव स्ट्रीम में जोड़े जाने वाले वीडियो की मात्रा को सीमित करना चाहेंगे। हो सकता है कि आप यह दिखाने के लिए अंतिम वीडियो के बजाय एक स्थिर छवि जोड़ना चाहें कि दिखाए गए प्रतिभागियों की तुलना में अधिक प्रतिभागी हैं: सारांश इस पोस्ट में, हमने अमेज़ॅन आईवीएस के साथ मल्टी-होस्ट चरण को प्रसारित करते समय गतिशील लेआउट के लिए एक दृष्टिकोण सीखा। भविष्य की पोस्ट में, हम एकाधिक होस्ट के साथ प्रसारण के लिए अतिरिक्त विकल्पों पर गौर करेंगे। हमेशा की तरह, यदि आपका कोई प्रश्न या टिप्पणी है, तो कृपया उन्हें नीचे छोड़ें। भी प्रकाशित किया गया यहाँ
