Sortie audio pour les appels (Web)

Web (natif)

Malheureusement, la sélection des haut-parleurs n'est pas prise en charge pour le moment. Il existe une proposition pour l'API Web, mais celle-ci est encore au stade expérimental et n'est pour l'instant pas suffisamment prise en charge par les navigateurs mobiles.

Web (JS) (ordinateur de bureau/portable)

Une fois l'appel établi, si vous souhaitez changer de sortie audio, vous pouvez le faire à l'aide de l'API Web du navigateur.

Étape 1 : Afficher les options du périphérique de sortie audio

Avant de pouvoir configurer la sortie audio de l'appel vers le périphérique de sortie souhaité, nous devons récupérer la liste de tous les périphériques de sortie audio de l'utilisateur auxquels le navigateur a accès. Le énumérer les périphériques Cette méthode renverra une promesse contenant un tableau de MediaDeviceInfo. L'utilisateur final devra pouvoir sélectionner l'appareil de son choix dans cette liste.

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

Étape 2 : Sélectionner l'élément HTML « audio »

Lorsqu'un appel est créé, le Client SDK de Vonage créera un fichier HTMLAudioElement et associez le flux de sortie de l'appel à son srcObject. Vous pouvez accéder à l'élément audio de la manière suivante :

const audioOutputElement = client.getAudioOutputElement()

Étape 3 : Mettre à jour la source de l'élément HTMLAudioElement

Une fois que l'utilisateur a indiqué quel périphérique de sortie audio il souhaite utiliser pour l'appel, le deviceId devra être extrait de MediaDeviceInfo. L'objet HTMLAudioElement dispose d'une méthode appelée setSinkId qui récupérera l'identifiant de périphérique (deviceId) et l'utilisera pour définir le périphérique de sortie audio souhaité comme source de l'élément HTMLAudioElement.

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

Prise en charge de la fonction SetSinkId() par les navigateurs

Utilisation des « Promises » à la place d'`async await`

Si vous souhaitez réaliser ce qui précède en utilisant des « promises » plutôt que « async await », vous pouvez procéder comme suit :

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