Saída de áudio para chamadas (Web)

Web (Nativa)

Infelizmente, no momento, não há suporte para a seleção de alto-falantes. Há um proposta para a API da Web, mas, no momento, ela ainda está em fase experimental e não há suporte suficiente dos navegadores móveis para isso.

Web (JS) (Desktop/Laptop)

Depois que a chamada estiver estabelecida, se você quiser mudar a saída de áudio, isso é possível usando a API da Web do navegador.

Passo 1: Acesse as opções do dispositivo de saída de áudio

Antes de podermos definir a saída de stream da chamada para o dispositivo de saída desejado, precisamos obter uma lista de todos os dispositivos de saída de áudio do usuário aos quais o navegador tem acesso. O enumerarDispositivos O método retornará uma promessa com um array de MediaDeviceInfo. O usuário final precisará de uma maneira de selecionar o dispositivo desejado nessa lista.

const audioOutputDevices = await navigator.mediaDevices.enumerateDevices().then(devices => devices.filter(d => d.kind == "audiooutput"))

Etapa 2: Selecionar o elemento de áudio HTML

Quando uma chamada é criada, o Vonage Client SDK criará um HTMLAudioElement e anexe o fluxo de saída da chamada ao seu srcObject. Você pode acessar o elemento de áudio da seguinte forma:

const audioOutputElement = client.getAudioOutputElement()

Etapa 3: Atualizar a fonte do HTMLAudioElement

Assim que o usuário indicar qual dispositivo de saída de áudio deseja usar para a chamada, o deviceId precisará ser extraído do MediaDeviceInfo. O HTMLAudioElement possui um método chamado setSinkId que irá pegar o deviceId e usá-lo para definir o dispositivo de saída de áudio desejado como fonte do HTMLAudioElement.

// Use the device selected by the user (e.g. from a dropdown)
const selectedDevice = audioOutputDevices[selectedIndex]
audioOutputElement.setSinkId(selectedDevice.deviceId)

Suporte dos navegadores à função SetSinkId()

Usando Promises em vez de async/await

Se você quiser fazer o que foi mostrado acima usando promessas em vez de `async await`, pode proceder da seguinte forma:

navigator.mediaDevices.enumerateDevices().then(devices => {
	// Get the Audio Output Device Options
	const audioOutputDevices = devices.filter(d => d.kind == "audiooutput")
        // Get the html audio element used by the client to attach the stream output
        const audioOutputElement = client.getAudioOutputElement()
        // Set the desired audio output device to be used by the audioElement
	const selectedDevice = audioOutputDevices[selectedIndex]
	audioOutputElement.setSinkId(selectedDevice.deviceId)
})