Salida de audio para llamadas (web)

Web (nativa)

Lamentablemente, por el momento no es posible seleccionar el altavoz. Hay un propuesta para la API web, pero actualmente se encuentra en fase experimental y, por el momento, no cuenta con suficiente compatibilidad con los navegadores móviles.

Web (JS) (ordenador de sobremesa/portátil)

Una vez establecida la llamada, si deseas cambiar la salida de audio, puedes hacerlo mediante la API web del navegador.

Paso 1: Acceder a las opciones del dispositivo de salida de audio

Antes de poder configurar la salida de audio de la llamada en el dispositivo de salida deseado, necesitamos obtener una lista de todos los dispositivos de salida de audio del usuario a los que tiene acceso el navegador. El enumerarDispositivos El método devolverá una promesa con un array de MediaDeviceInfo. El usuario final necesitará una forma de seleccionar el dispositivo que desee de esta lista.

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

Paso 2: Seleccionar el elemento de audio HTML

Cuando se crea una llamada, el Vonage Client SDK creará una HTMLAudioElement y adjunta el flujo de salida de la llamada a su srcObject. Puedes acceder al elemento de audio de la siguiente manera:

const audioOutputElement = client.getAudioOutputElement()

Paso 3: Actualizar la fuente del elemento HTMLAudioElement

Una vez que el usuario haya indicado qué dispositivo de salida de audio desea utilizar para la llamada, el deviceId habrá que extraerlo de MediaDeviceInfo. El HTMLAudioElement tiene un método llamado setSinkId que tomará el «deviceId» y lo utilizará para configurar el dispositivo de salida de audio deseado como fuente del elemento «HTMLAudioElement».

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

Compatibilidad de los navegadores con SetSinkId()

Uso de «Promises» en lugar de «async-await»

Si quieres hacer lo anterior utilizando «promises» en lugar de «async await», puedes hacerlo de la siguiente manera:

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)
})