通話時の音声出力（Web）

Web（ネイティブ）

残念ながら、現時点ではスピーカーの選択機能はサポートされていません。以下の提案 Web API向けですが、現在は実験段階であり、現時点ではモバイルブラウザでの対応が不十分です。

Web（JS）（デスクトップ／ノートPC）

通話が確立された後、音声出力先を切り替えたい場合は、ブラウザのWeb APIを使用して切り替えることができます。

手順 1: オーディオ出力デバイスのオプションを表示する

呼び出しのストリーム出力を目的の出力デバイスに設定する前に、ブラウザがアクセス可能なすべてのユーザー用オーディオ出力デバイスの一覧を取得する必要があります。その enumerateDevices このメソッドは、以下の配列を含むプロミスを返します。 MediaDeviceInfo. エンドユーザーは、このリストから希望のデバイスを選択できる手段が必要となります。

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

ステップ 2: HTML の audio 要素を選択する

コールが作成されると、Vonage Client SDK は HTMLAudioElement そして、その呼び出しの出力ストリームをsrcObjectに接続します。オーディオ要素には、次のようにアクセスできます：

const audioOutputElement = client.getAudioOutputElement()

ステップ 3: HTMLAudioElement のソースを更新する

ユーザーが通話に使用するオーディオ出力デバイスを指定すると、 deviceId をMediaDeviceInfoから取得する必要があります。HTMLAudioElementには、 setSinkId これにより、deviceId が取得され、それに基づいて、HTMLAudioElement のソースとして指定されたオーディオ出力デバイスが設定されます。

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

について setSinkId この機能は、一部の古いブラウザバージョンではサポートされていません。対応する最低バージョンについては、以下の表をご確認ください。

SetSinkId() のブラウザ対応状況

ブラウザ	最小バージョン	サポートレベル
クローム	49	全面的なサポート
エッジ	17	全面的なサポート
ファイアフォックス	116	全面的なサポート
オペラ	36	全面的なサポート
サファリ	16.4	全面的なサポート

async/await の代わりに Promise を使用する

もし、async await の代わりに Promise を使って上記の実装を行いたい場合は、次のようにすることができます：

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