Dans notre , nous avons appris comment créer une "scène" virtuelle pour créer une expérience de chat vidéo en temps réel pouvant accueillir jusqu'à 12 participants avec Amazon Interactive Video Service (Amazon IVS). En tant que fonctionnalité autonome, c'est assez puissant et nous permet d'ajouter une collaboration en temps réel à nos applications. Cependant, cette fonctionnalité a été créée pour permettre aux développeurs de créer facilement des expériences de diffusion en direct collaboratives similaires à la fonctionnalité "Guest Star" sur Twitch. Dans cet article, nous nous baserons sur la démonstration précédente pour combiner les flux audio et vidéo de tous les participants en un seul flux et diffuser ce flux sur un canal Amazon IVS. dernier article Si vous n'avez pas encore lu le post précédent, vous devriez le faire avant d'aller de l'avant avec ce post. Pour récapituler, dans cet article, nous avons appris à : Créer une ressource d'étape avec le kit AWS SDK pour JavaScript (v3) Créer des jetons de participant d'étape avec le kit AWS SDK pour JavaScript (v3) Utilisez le SDK de diffusion Web pour vous connecter à la scène virtuelle pour un chat vidéo en temps réel entre les participants La prochaine étape pour créer une expérience collaborative de diffusion en direct consiste à combiner (ou « composer ») les participants locaux et distants en un seul flux pouvant être publié sur un canal Amazon IVS. Pour cela, nous pouvons également utiliser le SDK de diffusion Web, voyons donc comment cela se passe. Création d'un client de diffusion Si vous vous souvenez, dans le dernier message, nous avions plusieurs fonctions appelées à l'intérieur d'un gestionnaire qui activait les autorisations, obtenait des appareils, configurait l'instance et gérait l'accès à la scène. Nous allons ajouter une autre méthode à ce flux appelée que nous pouvons utiliser pour créer une instance de . Nous aurons besoin d'un élément dans notre balisage pour le flux combiné afin que nos participants puissent prévisualiser ce qui sera finalement diffusé sur le canal Amazon IVS. 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 }); }; Pour rendre les choses un peu plus attrayantes visuellement, j'ai utilisé pour ajouter une image d'arrière-plan au flux. La méthode reçoit trois arguments : l'image, un nom unique pour la source et un objet utilisé pour définir l' (ou "calque") de la source. Si vous cochez la pour , vous remarquerez également qu'il peut contenir des valeurs pour la position , , et pour la source. Nous tirerons parti de ces propriétés dans un instant lorsque nous ajouterons nos couches vidéo pour chaque participant. addImageSource() addImageSource() VideoComposition index documents VideoComposition height width x y Ajout de l'audio et de la vidéo des participants au client de diffusion Ensuite, nous allons ajouter l'audio et la vidéo de chaque participant au client de diffusion. Nous ferons cela à l'intérieur du gestionnaire que nous avons défini dans le post précédent. Modifiez cette fonction pour ajouter des appels à deux nouvelles fonctions. 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)); }); Créons maintenant la fonction . Ici, je code en dur la sur des valeurs appropriées pour un seul participant. Dans votre application, vous souhaiterez calculer dynamiquement les valeurs , , et en fonction du nombre d'utilisateurs participant actuellement à la conversation. 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); }; La fonction est similaire, mais utilise la méthode du SDK pour ajouter la piste audio. 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) }; À ce stade, la scène est prête à être diffusée sur un canal en appelant . Nous devrons également gérer la suppression des participants du lorsqu'ils quittent une scène. Pour cela, mettez à jour le gestionnaire pour . 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 }); Voici à quoi pourrait ressembler une implémentation avec un seul participant. Notez que chaque participant à l'étape serait affiché sur l'écran du bas et que la vue composite à diffuser est affichée au-dessus. Et lorsque plusieurs participants ont rejoint la scène virtuelle, l'application ajuste la mise en page pour s'adapter à chaque participant. Lorsque le participant « hôte » clique sur le bouton « Diffuser », la conversation combinée sera diffusée sur le canal Amazon IVS sous forme de vue composite avec tous les participants audio et vidéo combinés en un seul flux. Résumé Dans cet article, nous avons appris à créer une diffusion en direct avec l'audio et la vidéo de plusieurs participants distants. Dans un prochain article, nous examinerons d'autres options pour créer le flux composite et le diffuser sur un canal Amazon IVS.
