Introdução ao SDK de Transmissão na Web do IVS | Streaming em tempo real

Este documento descreve as etapas envolvidas ao começar a usar o SDK de Transmissão na Web para streaming em tempo real do IVS.

Importações

Os blocos de criação para tempo real estão localizados em um namespace diferente dos módulos de transmissão raiz.

Uso de uma etiqueta de script

Ao usar as mesmas importações de script, as classes e as enumerações definidas nos exemplos abaixo podem ser encontradas no objeto global IVSBroadcastClient:

const { Stage, SubscribeType } = IVSBroadcastClient;

Uso de npm

As classes, as enumerações e os tipos também podem ser importados do módulo do pacote:

import { Stage, SubscribeType, LocalStageStream } from 'amazon-ivs-web-broadcast'

Suporte para renderização do servidor

A biblioteca dos palcos do SDK de transmissão para a Web não pode ser carregada em um contexto do servidor, pois faz referência às primitivas do navegador necessárias para o funcionamento da biblioteca quando carregada. Para contornar isso, carregue a biblioteca dinamicamente, conforme demonstrado na Demonstração de transmissão da Web usando Next e React.

Solicitar permissões

Sua aplicação deverá solicitar permissão para acessar a câmera e o microfone do usuário, e isso deverá ser servido por meio de HTTPS. (Isso não é específico do Amazon IVS; é necessário para qualquer site que precise acessar câmeras e microfones.)

Aqui está um exemplo de função que mostra como é possível solicitar e capturar permissões para ambos os dispositivos de áudio e vídeo:

async function handlePermissions() {
   let permissions = {
       audio: false,
       video: false,
   };
   try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
       for (const track of stream.getTracks()) {
           track.stop();
       }
       permissions = { video: true, audio: true };
   } catch (err) {
       permissions = { video: false, audio: false };
       console.error(err.message);
   }
   // If we still don't have permissions after requesting them display the error message
   if (!permissions.video) {
       console.error('Failed to get video permissions.');
   } else if (!permissions.audio) {
       console.error('Failed to get audio permissions.');
   }
}

Para obter informações adicionais, consulte a API de permissões e MediaDevices.getUserMedia().

Listar dispositivos disponíveis

Para ver quais dispositivos estão disponíveis para captura, consulte o método mediaDevices.enumerateDevices() do navegador:

const devices = await navigator.mediaDevices.enumerateDevices();
window.videoDevices = devices.filter((d) => d.kind === 'videoinput');
window.audioDevices = devices.filter((d) => d.kind === 'audioinput');

Recuperar um MediaStream de um dispositivo

Depois de adquirir a lista de dispositivos disponíveis, é possível recuperar um stream de qualquer número de dispositivos. Por exemplo, é possível usar o método getUserMedia() para recuperar um stream de uma câmera.

Se você quiser especificar de qual dispositivo capturar o stream, é possível definir explicitamente o deviceId na seção audio ou video das restrições de mídia. Como alternativa, é possível omitir o deviceId e fazer com que os usuários selecionem seus dispositivos no prompt do navegador.

Também é possível especificar uma resolução de câmera ideal usando as restrições width e height. (Leia mais sobre essas restrições aqui.) O SDK aplica automaticamente restrições de largura e altura que correspondem à resolução máxima de transmissão, mas é melhor você mesmo também aplicá-las para garantir que a proporção da fonte não seja alterada depois que ela for adicionada ao SDK.

Para streaming em tempo real, certifique-se de que a mídia esteja restrita à resolução de 720p. Especificamente, seus valores de restrição getUserMedia e getDisplayMedia para largura e altura não devem exceder 921600 (1280*720) quando multiplicados juntos.

const videoConfiguration = {
  maxWidth: 1280,
  maxHeight: 720,
  maxFramerate: 30,
}

window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: videoConfiguration.maxWidth,
       },
       height: {
           ideal:videoConfiguration.maxHeight,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});