As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
Conceitos básicos
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'
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 MediaDevices
Listar dispositivos disponíveis
Para ver quais dispositivos estão disponíveis para captura, consulte o método MediaDevices.enumerateDevices
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
Para streaming em tempo real, certifique-se de que a mídia esteja restrita à resolução de 720p. Especificamente, seus valores getUserMedia
e de getDisplayMedia
restrição 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 }, });