Comment diffuser en direct avec plusieurs hôtes à l'aide d'un navigateur et d'Amazon IVS

Dans notre dernier article , 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.

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 DOMContentLoaded qui activait les autorisations, obtenait des appareils, configurait l'instance Stage et gérait l'accès à la scène. Nous allons ajouter une autre méthode à ce flux appelée initBroadcastClient() que nous pouvons utiliser pour créer une instance de IVSBroadcastClient . Nous aurons besoin d'un élément <canvas> dans notre balisage pour le flux combiné afin que nos participants puissent prévisualiser ce qui sera finalement diffusé sur le canal Amazon IVS.

 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é addImageSource() pour ajouter une image d'arrière-plan au flux. La méthode addImageSource() reçoit trois arguments : l'image, un nom unique pour la source et un objet VideoComposition utilisé pour définir l' index (ou "calque") de la source. Si vous cochez la documents pour VideoComposition , vous remarquerez également qu'il peut contenir des valeurs pour la position height , width , x et y pour la source. Nous tirerons parti de ces propriétés dans un instant lorsque nous ajouterons nos couches vidéo pour chaque participant.

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 StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED que nous avons défini dans le post précédent. Modifiez cette fonction pour ajouter des appels à deux nouvelles fonctions.

 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 renderVideosToClient() . Ici, je code en dur la VideoComposition sur des valeurs appropriées pour un seul participant. Dans votre application, vous souhaiterez calculer dynamiquement les valeurs height , width , x et y en fonction du nombre d'utilisateurs participant actuellement à la conversation.

 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 renderAudioToClient() est similaire, mais utilise la méthode addAudioInputDevice() du SDK pour ajouter la piste audio.

 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 broadcastClient.startBroadcast('[YOUR STREAM KEY]') . Nous devrons également gérer la suppression des participants du broadcastClient lorsqu'ils quittent une scène. Pour cela, mettez à jour le gestionnaire pour 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.