हमारी में हमने सीखा कि अमेज़ॅन इंटरएक्टिव वीडियो सर्विस (अमेज़ॅन आईवीएस) के साथ 12 प्रतिभागियों के लिए वास्तविक समय वीडियो चैट अनुभव बनाने के लिए वर्चुअल "स्टेज" कैसे बनाया जाए। एक स्टैंडअलोन सुविधा के रूप में, यह काफी शक्तिशाली है और हमें अपने अनुप्रयोगों में वास्तविक समय सहयोग जोड़ने में सक्षम बनाता है। हालाँकि, यह सुविधा डेवलपर्स को ट्विच पर "गेस्ट स्टार" सुविधा के समान आसानी से सहयोगी लाइव स्ट्रीमिंग अनुभव बनाने के लिए सशक्त बनाने के लिए बनाई गई थी। इस पोस्ट में, हम सभी प्रतिभागियों के ऑडियो और वीडियो फ़ीड को एक ही फ़ीड में संयोजित करने और उस फ़ीड को अमेज़ॅन आईवीएस चैनल पर प्रसारित करने के लिए पिछले डेमो का निर्माण करेंगे। पिछली पोस्ट यदि आपने अभी तक पिछली पोस्ट नहीं पढ़ी है, तो आपको इस पोस्ट पर आगे बढ़ने से पहले यह पढ़ लेना चाहिए। संक्षेप में, उस पोस्ट में हमने सीखा कि कैसे: जावास्क्रिप्ट के लिए AWS SDK के साथ एक स्टेज संसाधन बनाएं (v3) जावास्क्रिप्ट के लिए AWS SDK के साथ एक स्टेज प्रतिभागी टोकन बनाएं (v3) प्रतिभागियों के बीच वास्तविक समय की वीडियो चैट के लिए वर्चुअल स्टेज से जुड़ने के लिए वेब ब्रॉडकास्ट एसडीके का उपयोग करें एक सहयोगी लाइव स्ट्रीमिंग अनुभव बनाने का अगला कदम स्थानीय और दूरस्थ दोनों प्रतिभागियों को एक ही स्ट्रीम में संयोजित (या "समग्र") करना है जिसे अमेज़ॅन आईवीएस चैनल पर प्रकाशित किया जा सकता है। इसके लिए हम वेब ब्रॉडकास्ट एसडीके का भी उपयोग कर सकते हैं, तो आइए देखें कि यह कैसे किया जाता है। एक प्रसारण ग्राहक बनाना यदि आपको याद हो, तो पिछली पोस्ट में हमारे पास हैंडलर के अंदर कई फ़ंक्शन थे, जो अनुमतियाँ सक्षम करते थे, डिवाइस प्राप्त करते थे, इंस्टेंस को कॉन्फ़िगर करते थे, और स्टेज में शामिल होने का प्रबंधन करते थे। हम इस प्रवाह में नामक एक और विधि जोड़ेंगे जिसका उपयोग हम का एक उदाहरण बनाने के लिए कर सकते हैं। हमें संयुक्त स्ट्रीम के लिए अपने मार्कअप में एक तत्व की आवश्यकता होगी ताकि हमारे प्रतिभागी पूर्वावलोकन कर सकें कि अंततः अमेज़ॅन आईवीएस चैनल पर क्या प्रसारित किया जाएगा। DOMContentLoaded Stage initBroadcastClient() IVSBroadcastClient <canvas> const initBroadcastClient = async () => { broadcastClient = IVSBroadcastClient.create({ streamConfig: IVSBroadcastClient.STANDARD_LANDSCAPE, ingestEndpoint: '[YOUR INGEST ENDPOINT]', }); const previewEl = document.getElementById('broadcast-preview'); broadcastClient.attachPreview(previewEl); const bgImage = new Image(); bgImage.src = '/images/stage_bg.png'; broadcastClient.addImageSource(bgImage, 'bg-image', { index: 0 }); }; चीजों को थोड़ा और अधिक आकर्षक बनाने के लिए, मैंने स्ट्रीम में पृष्ठभूमि छवि जोड़ने के लिए उपयोग किया है। विधि को तीन तर्क प्राप्त होते हैं: छवि, स्रोत के लिए एक अद्वितीय नाम, और एक ऑब्जेक्ट जिसका उपयोग स्रोत के लिए (या 'परत') को परिभाषित करने के लिए किया जाता है। यदि आप जाँच करें के लिए, आप यह भी ध्यान देंगे कि इसमें स्रोत के लिए , , और स्थिति के मान शामिल हो सकते हैं। जब हम प्रत्येक भागीदार के लिए अपनी वीडियो परतें जोड़ेंगे तो हम उन गुणों का थोड़ा सा लाभ उठाएंगे। addImageSource() addImageSource() VideoComposition index डॉक्स VideoComposition height width x y प्रसारण क्लाइंट में प्रतिभागी ऑडियो और वीडियो जोड़ना इसके बाद, हम प्रसारण क्लाइंट में प्रत्येक भागीदार के लिए ऑडियो और वीडियो जोड़ने जा रहे हैं। हम इसे हैंडलर के अंदर करेंगे जिसे हमने पिछली पोस्ट में परिभाषित किया था। दो नए फ़ंक्शन में कॉल जोड़ने के लिए उस फ़ंक्शन को संशोधित करें। StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED, (participant, streams) => { renderParticipant(participant, streams); renderVideosToClient(participant, streams.find(s => s.streamType === StreamType.VIDEO)); renderAudioToClient(participant, streams.find(s => s.streamType === StreamType.AUDIO)); }); आइए अब फ़ंक्शन बनाएं। यहां, मैं को एक प्रतिभागी के लिए उपयुक्त मानों पर हार्डकोड कर रहा हूं। अपने एप्लिकेशन में, आप वर्तमान में बातचीत में भाग लेने वाले उपयोगकर्ताओं की संख्या के आधार पर , , और मानों की गतिशील रूप से गणना करना चाहेंगे। renderVideosToClient() VideoComposition height width x y const renderVideosToClient = async (participant, stream) => { const participantId = participant.id; const videoId = `video-${participantId}`; const composition = { index: 1, height: 984, width: 1750, x: 85, y: 48 }; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addVideoInputDevice(mediaStream, videoId, composition); }; फ़ंक्शन समान दिखता है, लेकिन ऑडियो ट्रैक जोड़ने के लिए SDK की विधि का उपयोग करता है। renderAudioToClient() addAudioInputDevice() const renderAudioToClient = async (participant, stream) => { const participantId = participant.id; const audioTrackId = `audio-${participantId}`; const mediaStream = new MediaStream(); mediaStream.addTrack(stream.mediaStreamTrack); broadcastClient.addAudioInputDevice(mediaStream, audioTrackId) }; इस बिंदु पर, पर कॉल करके स्टेज एक चैनल पर प्रसारित होने के लिए तैयार है। जब प्रतिभागी मंच छोड़ते हैं तो हमें उन्हें से हटाने की प्रक्रिया भी संभालनी होगी। इसके लिए, के लिए हैंडलर को अपडेट करें। broadcastClient.startBroadcast('[YOUR STREAM KEY]') broadcastClient StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED stage.on(StageEvents.STAGE_PARTICIPANT_STREAMS_REMOVED, (participant, streams) => { const videoTrackId = `video-${participant.id}`; const audioTrackId = `audio-${participant.id}`; if (broadcastClient.getVideoInputDevice(videoTrackId)) broadcastClient.removeVideoInputDevice(videoTrackId); if (broadcastClient.getAudioInputDevice(audioTrackId)) broadcastClient.removeAudioInputDevice(audioTrackId); const videoId = `${participant.id}-video` document.getElementById(videoId).closest('.participant-col').remove(); updateVideoCompositions(); // function not defined in demo, implementation will vary }); यहां बताया गया है कि किसी एक भागीदार के साथ कार्यान्वयन कैसा दिख सकता है। ध्यान दें कि प्रत्येक चरण के प्रतिभागी को नीचे स्क्रीन पर दिखाया जाएगा, और प्रसारित किया जाने वाला समग्र दृश्य ऊपर दिखाया जाएगा। और जब कई प्रतिभागी वर्चुअल चरण में शामिल हो जाते हैं, तो एप्लिकेशन प्रत्येक प्रतिभागी को समायोजित करने के लिए लेआउट को समायोजित करता है। जब 'होस्ट' प्रतिभागी 'ब्रॉडकास्ट' बटन पर क्लिक करता है, तो संयुक्त बातचीत अमेज़ॅन आईवीएस चैनल पर एक समग्र दृश्य के रूप में प्रसारित की जाएगी, जिसमें सभी प्रतिभागियों के ऑडियो और वीडियो एक ही स्ट्रीम में संयुक्त होंगे। सारांश इस पोस्ट में, हमने सीखा कि कई दूरस्थ प्रतिभागियों के ऑडियो और वीडियो के साथ लाइव स्ट्रीम प्रसारण कैसे बनाया जाए। भविष्य की पोस्ट में, हम समग्र स्ट्रीम बनाने और इसे अमेज़ॅन आईवीएस चैनल पर प्रसारित करने के लिए वैकल्पिक विकल्पों की जांच करेंगे।
