fix(audio): change audioOutput device for participant tracks in call

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/composables/useDevices.js

@@ -10,7 +10,7 @@ import { useSoundsStore } from '../stores/sounds.js'
 import attachMediaStream from '../utils/attachmediastream.js'
 import TrackToStream from '../utils/media/pipeline/TrackToStream.js'
 import VirtualBackground from '../utils/media/pipeline/VirtualBackground.js'
-import { mediaDevicesManager as mediaDevicesManagerInstance } from '../utils/webrtc/index.js'
+import { callParticipantsAudioPlayer, mediaDevicesManager as mediaDevicesManagerInstance } from '../utils/webrtc/index.js'
 
 /**
  * Check whether the user joined the call of the current token in this PHP session or not
@@ -110,6 +110,10 @@ export function useDevices(video, initializeOnMounted) {
 	watch(audioOutputId, (deviceId) => {
 		if (initialized && deviceId !== undefined) {
 			soundsStore.setGeneralAudioOutput(deviceId)
+
+			if (callParticipantsAudioPlayer) {
+				callParticipantsAudioPlayer.setGeneralAudioOutput(deviceId)
+			}
 		}
 	})
 

src/utils/webrtc/CallParticipantsAudioPlayer.js

@@ -4,6 +4,7 @@
  */
 
 import attachMediaStream from '../attachmediastream.js'
+import { mediaDevicesManager } from '../webrtc/index.js'
 
 /**
  * Player for audio of call participants.
@@ -39,6 +40,7 @@ export default function CallParticipantsAudioPlayer(callParticipantCollection, m
 	} else {
 		this._audioElements = new Map()
 	}
+	this.setGeneralAudioOutput(mediaDevicesManager.attributes.audioOutputId)
 
 	this._handleCallParticipantAddedBound = this._handleCallParticipantAdded.bind(this)
 	this._handleCallParticipantRemovedBound = this._handleCallParticipantRemoved.bind(this)
@@ -142,6 +144,8 @@ CallParticipantsAudioPlayer.prototype = {
 		}
 
 		audioElement = attachMediaStream(stream, null, { audio: true })
+		this._setAudioElementOutput(mediaDevicesManager.attributes.audioOutputId, audioElement)
+
 		if (mute) {
 			audioElement.muted = true
 		}
@@ -149,6 +153,26 @@ CallParticipantsAudioPlayer.prototype = {
 		this._audioElements.set(id, audioElement)
 	},
 
+	async setGeneralAudioOutput(deviceId) {
+		if (!mediaDevicesManager.isAudioOutputSelectSupported) {
+			console.debug('Your browser does not support audio output selecting')
+			return
+		}
+
+		const promises = []
+		for (const audioElement of this._audioElements.values()) {
+			promises.push(this._setAudioElementOutput(deviceId, audioElement))
+		}
+		await Promise.all(promises)
+	},
+
+	async _setAudioElementOutput(deviceId, audioElement = null) {
+		if (audioElement instanceof HTMLAudioElement) {
+			await audioElement.setSinkId(deviceId)
+			console.debug('Set audio output to %s', deviceId)
+		}
+	},
+
 	_handleAudioAvailableChanged(callParticipantModel, audioAvailable) {
 		if (this._mixAudio) {
 			const audioNode = this._audioNodes.get(callParticipantModel.get('peerId') + '-stream')

src/utils/webrtc/index.js

@@ -514,6 +514,8 @@ export {
 
 	mediaDevicesManager,
 
+	callParticipantsAudioPlayer,
+
 	callAnalyzer,
 
 	signalingGetSettingsForRecording,