एक ब्राउज़र और अमेज़ॅन आईवीएस का उपयोग करके एकाधिक होस्ट के साथ लाइव स्ट्रीम कैसे करें

हमारी पिछली पोस्ट में हमने सीखा कि अमेज़ॅन इंटरएक्टिव वीडियो सर्विस (अमेज़ॅन आईवीएस) के साथ 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); };

renderAudioToClient() फ़ंक्शन समान दिखता है, लेकिन ऑडियो ट्रैक जोड़ने के लिए SDK की 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 });

यहां बताया गया है कि किसी एक भागीदार के साथ कार्यान्वयन कैसा दिख सकता है। ध्यान दें कि प्रत्येक चरण के प्रतिभागी को नीचे स्क्रीन पर दिखाया जाएगा, और प्रसारित किया जाने वाला समग्र दृश्य ऊपर दिखाया जाएगा।

और जब कई प्रतिभागी वर्चुअल चरण में शामिल हो जाते हैं, तो एप्लिकेशन प्रत्येक प्रतिभागी को समायोजित करने के लिए लेआउट को समायोजित करता है।

जब 'होस्ट' प्रतिभागी 'ब्रॉडकास्ट' बटन पर क्लिक करता है, तो संयुक्त बातचीत अमेज़ॅन आईवीएस चैनल पर एक समग्र दृश्य के रूप में प्रसारित की जाएगी, जिसमें सभी प्रतिभागियों के ऑडियो और वीडियो एक ही स्ट्रीम में संयुक्त होंगे।

सारांश

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