En nuestra aprendimos cómo crear un "escenario" virtual para crear una experiencia de chat de video en tiempo real para hasta 12 participantes con Amazon Interactive Video Service (Amazon IVS). Como función independiente, es bastante poderosa y nos permite agregar colaboración en tiempo real a nuestras aplicaciones. Sin embargo, esta función se creó para permitir a los desarrolladores crear fácilmente experiencias colaborativas de transmisión en vivo similares a la función "Estrella invitada" en Twitch. En esta publicación, nos basaremos en la demostración anterior para combinar las fuentes de audio y video de todos los participantes en una sola fuente y transmitir esa fuente a un canal de Amazon IVS. última publicación, Si aún no ha leído la publicación anterior, debe hacerlo antes de continuar con esta publicación. En resumen, en esa publicación aprendimos cómo: Cree un recurso de etapa con AWS SDK para JavaScript (v3) Cree tokens de participantes de una etapa con AWS SDK para JavaScript (v3) Use el SDK de transmisión web para conectarse al escenario virtual para chatear por video en tiempo real entre los participantes El siguiente paso para crear una experiencia colaborativa de transmisión en vivo es combinar (o "componer") a los participantes locales y remotos en una sola transmisión que se puede publicar en un canal de Amazon IVS. Para esto también podemos usar el SDK de Web Broadcast, así que veamos cómo se hace. Creación de un cliente de difusión Si recuerda, en la última publicación teníamos varias funciones llamadas dentro de un controlador que habilitaba permisos, obtenía dispositivos, configuraba la instancia y manejaba unirse al escenario. Agregaremos un método más a este flujo llamado que podemos usar para crear una instancia de . Necesitaremos un elemento en nuestro marcado para la transmisión combinada para que nuestros participantes puedan obtener una vista previa de lo que finalmente se transmitirá al 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 }); }; Para hacer las cosas un poco más atractivas visualmente, he usado para agregar una imagen de fondo a la transmisión. El método recibe tres argumentos: la imagen, un nombre único para la fuente y un objeto que se usa para definir el (o 'capa') de la fuente. Si revisas el para , también notará que puede contener valores para la , , la posición e para la fuente. Aprovecharemos esas propiedades en un momento cuando agreguemos nuestras capas de video para cada participante. addImageSource() addImageSource() VideoComposition index documentos VideoComposition height width x y Adición de audio y video de participantes al cliente de transmisión A continuación, agregaremos el audio y el video de cada participante al cliente de transmisión. Haremos esto dentro del controlador que definimos en la publicación anterior. Modifique esa función para agregar llamadas a dos nuevas funciones. 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)); }); Ahora vamos a crear la función . Aquí, estoy codificando a valores apropiados para un solo participante. En su aplicación, querrá calcular dinámicamente los valores de , , e según la cantidad de usuarios que participan actualmente en la conversación. 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 función parece similar, pero usa el método del SDK para agregar la pista de 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) }; En este punto, el escenario está listo para transmitirse a un canal llamando . También tendremos que gestionar la eliminación de los participantes de cuando abandonen un escenario. Para ello, actualice el controlador de . 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 }); Así es como se vería una implementación con un solo participante. Tenga en cuenta que cada participante de la etapa se mostrará en la pantalla inferior y la vista compuesta que se transmitirá se muestra arriba. Y cuando varios participantes se han unido al escenario virtual, la aplicación ajusta el diseño para acomodar a cada participante. Cuando el participante "anfitrión" haga clic en el botón "Transmitir", la conversación combinada se transmitirá al canal de Amazon IVS como una vista compuesta con el audio y el video de todos los participantes combinados en una sola transmisión. Resumen En esta publicación, aprendimos cómo crear una transmisión en vivo con audio y video de múltiples participantes remotos. En una publicación futura, examinaremos opciones alternativas para crear la transmisión compuesta y transmitirla a un canal de Amazon IVS.
