Audioausgabe für Anrufe (Web)

Web (nativ)

Leider wird die Lautsprecherauswahl derzeit nicht unterstützt. Es gibt eine Vorschlag für die Web-API, diese befindet sich jedoch derzeit noch im Versuchsstadium, und die Unterstützung durch mobile Browser ist derzeit noch unzureichend.

Web (JS) (Desktop/Laptop)

Sobald eine Verbindung hergestellt ist, können Sie die Audioausgabe über die Web-API des Browsers umschalten, falls Sie dies wünschen.

Schritt 1: Die Optionen für das Audioausgabegerät aufrufen

Bevor wir die Stream-Ausgabe des Aufrufs auf das gewünschte Ausgabegerät einstellen können, müssen wir eine Liste aller Audio-Ausgabegeräte des Benutzers abrufen, auf die der Browser Zugriff hat. Die Geräte auflisten Die Methode gibt ein Promise mit einem Array von MediaDeviceInfo. Der Endbenutzer muss die Möglichkeit haben, das gewünschte Gerät aus dieser Liste auszuwählen.

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

Schritt 2: HTML-Audio-Element auswählen

Wenn ein Anruf aufgebaut wird, erstellt das Vonage Client SDK eine HTMLAudioElement und den Ausgabestrom des Aufrufs an dessen `srcObject` anhängen. Auf das Audio-Element kannst du wie folgt zugreifen:

const audioOutputElement = client.getAudioOutputElement()

Schritt 3: Aktualisieren der Quelle des HTMLAudioElement

Sobald der Benutzer angegeben hat, welches Audio-Ausgabegerät er für den Anruf verwenden möchte, wird die deviceId müssen aus der `MediaDeviceInfo` extrahiert werden. Das `HTMLAudioElement` verfügt über eine Methode namens setSinkId die die deviceId übernimmt und damit das gewünschte Audioausgabegerät auf die Quelle des HTMLAudioElement-Elements einstellt.

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

SetSinkId() – Browser-Unterstützung

Verwendung von Promises anstelle von async/await

Wenn Sie das oben Genannte mit Promises anstelle von `async await` umsetzen möchten, können Sie wie folgt vorgehen:

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