Merge pull request #253 from havfo/feat-output-select

Feat output select

app/public/config/config.example.js

@@ -25,6 +25,16 @@ var config =
 		{ scaleResolutionDownBy: 2 },
 		{ scaleResolutionDownBy: 1 }
 	],
+	/**
+	 * White listing browsers that support audio output device selection.
+	 * It is not yet fully implemented in Firefox.
+	 * See: https://bugzilla.mozilla.org/show_bug.cgi?id=1498512
+	 */
+	audioOutputSupportedBrowsers :
+	[
+		'chrome', 
+		'opera'
+	],
 	// Socket.io request timeout
 	requestTimeout   : 10000,
 	transportOptions :

app/src/RoomClient.js

@@ -244,6 +244,8 @@ export default class RoomClient
 
 		this._audioDevices = {};
 
+		this._audioOutputDevices = {};
+
 		// mediasoup Consumers.
 		// @type {Map<String, mediasoupClient.Consumer>}
 		this._consumers = new Map();
@@ -456,6 +458,7 @@ export default class RoomClient
 
 			await this._updateAudioDevices();
 			await this._updateWebcams();
+			await this._updateAudioOutputDevices();
 
 			store.dispatch(requestActions.notify(
 				{
@@ -1107,6 +1110,37 @@ export default class RoomClient
 			meActions.setAudioInProgress(false));
 	}
 
+	async changeAudioOutputDevice(deviceId)
+	{
+		logger.debug('changeAudioOutputDevice() [deviceId: %s]', deviceId);
+
+		store.dispatch(
+			meActions.setAudioOutputInProgress(true));
+
+		try
+		{
+			const device = this._audioOutputDevices[deviceId];
+
+			if (!device)
+				throw new Error('Selected audio output device no longer avaibale');
+
+			logger.debug(
+				'changeAudioOutputDevice() | new selected [audio output device:%o]',
+				device);
+
+			store.dispatch(settingsActions.setSelectedAudioOutputDevice(deviceId));
+
+			await this._updateAudioOutputDevices();
+		}
+		catch (error)
+		{
+			logger.error('changeAudioOutputDevice() failed: %o', error);
+		}
+
+		store.dispatch(
+			meActions.setAudioOutputInProgress(false));
+	}
+
 	async changeVideoResolution(resolution)
 	{
 		logger.debug('changeVideoResolution() [resolution: %s]', resolution);
@@ -2717,6 +2751,19 @@ export default class RoomClient
 					this.enableWebcam();
 			}
 			
+			await this._updateAudioOutputDevices();
+
+			const { selectedAudioOutputDevice } = store.getState().settings;
+
+			if (!selectedAudioOutputDevice && this._audioOutputDevices !== {})
+			{
+				store.dispatch(
+					settingsActions.setSelectedAudioOutputDevice(
+						Object.keys(this._audioOutputDevices)[0]
+					)
+				);
+			}
+		
 			store.dispatch(roomActions.setRoomState('connected'));
 
 			// Clean all the existing notifications.
@@ -3515,4 +3562,35 @@ export default class RoomClient
 			logger.error('_getWebcamDeviceId() failed:%o', error);
 		}
 	}
+
+	async _updateAudioOutputDevices()
+	{
+		logger.debug('_updateAudioOutputDevices()');
+
+		// Reset the list.
+		this._audioOutputDevices = {};
+
+		try
+		{
+			logger.debug('_updateAudioOutputDevices() | calling enumerateDevices()');
+
+			const devices = await navigator.mediaDevices.enumerateDevices();
+
+			for (const device of devices)
+			{
+				if (device.kind !== 'audiooutput')
+					continue;
+
+				this._audioOutputDevices[device.deviceId] = device;
+			}
+
+			store.dispatch(
+				meActions.setAudioOutputDevices(this._audioOutputDevices));
+		}
+		catch (error)
+		{
+			logger.error('_updateAudioOutputDevices() failed:%o', error);
+		}
+	}
+
 }

app/src/__tests__/Room.spec.js

@@ -31,6 +31,8 @@ beforeEach(() =>
 		me         : {
 			audioDevices          : null,
 			audioInProgress       : false,
+			audioOutputDevices    : null,
+			audioOutputInProgress : false,
 			canSendMic            : false,
 			canSendWebcam         : false,
 			canShareFiles         : false,
@@ -76,6 +78,7 @@ beforeEach(() =>
 			displayName               : 'Jest Tester',
 			resolution                : 'ultra',
 			selectedAudioDevice       : 'default',
+			selectedAudioOutputDevice : 'default',
 			selectedWebcam            : 'soifjsiajosjfoi'
 		},
 		toolarea : {

app/src/actions/meActions.js

@@ -51,6 +51,12 @@ export const setAudioDevices = (devices) =>
 		payload : { devices }
 	});
 
+export const setAudioOutputDevices = (devices) =>
+	({
+		type    : 'SET_AUDIO_OUTPUT_DEVICES',
+		payload : { devices }
+	});
+
 export const setWebcamDevices = (devices) =>
 	({
 		type    : 'SET_WEBCAM_DEVICES',
@@ -69,6 +75,12 @@ export const setAudioInProgress = (flag) =>
 		payload : { flag }
 	});
 
+export const setAudioOutputInProgress = (flag) =>
+	({
+		type    : 'SET_AUDIO_OUTPUT_IN_PROGRESS',
+		payload : { flag }
+	});
+	
 export const setWebcamInProgress = (flag) =>
 	({
 		type    : 'SET_WEBCAM_IN_PROGRESS',

app/src/actions/settingsActions.js

@@ -4,6 +4,12 @@ export const setSelectedAudioDevice = (deviceId) =>
 		payload : { deviceId }
 	});
 
+export const setSelectedAudioOutputDevice = (deviceId) =>
+	({
+		type    : 'CHANGE_AUDIO_OUTPUT_DEVICE',
+		payload : { deviceId }
+	});
+
 export const setSelectedWebcamDevice = (deviceId) =>
 	({
 		type    : 'CHANGE_WEBCAM',

app/src/components/PeerAudio/AudioPeers.js

@@ -7,7 +7,8 @@ import PeerAudio from './PeerAudio';
 const AudioPeers = (props) =>
 {
 	const {
-		micConsumers
+		micConsumers,
+		audioOutputDevice
 	} = props;
 
 	return (
@@ -19,6 +20,7 @@ const AudioPeers = (props) =>
 						<PeerAudio
 							key={micConsumer.id}
 							audioTrack={micConsumer.track}
+							audioOutputDevice={audioOutputDevice}
 						/>
 					);
 				})
@@ -29,12 +31,14 @@ const AudioPeers = (props) =>
 
 AudioPeers.propTypes =
 {
-	micConsumers : PropTypes.array
+	micConsumers      : PropTypes.array,
+	audioOutputDevice : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
 	({
-		micConsumers : micConsumerSelector(state)
+		micConsumers      : micConsumerSelector(state),
+		audioOutputDevice : state.settings.selectedAudioOutputDevice
 	});
 
 const AudioPeersContainer = connect(
@@ -45,7 +49,8 @@ const AudioPeersContainer = connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.consumers === next.consumers
+				prev.consumers === next.consumers &&
+				prev.settings.selectedAudioOutputDevice === next.settings.selectedAudioOutputDevice
 			);
 		}
 	}

app/src/components/PeerAudio/PeerAudio.js

@@ -10,6 +10,7 @@ export default class PeerAudio extends React.PureComponent
 		// Latest received audio track.
 		// @type {MediaStreamTrack}
 		this._audioTrack = null;
+		this._audioOutputDevice = null;
 	}
 
 	render()
@@ -24,17 +25,19 @@ export default class PeerAudio extends React.PureComponent
 
 	componentDidMount()
 	{
-		const { audioTrack } = this.props;
+		const { audioTrack, audioOutputDevice } = this.props;
 
 		this._setTrack(audioTrack);
+		this._setOutputDevice(audioOutputDevice);
 	}
 
 	// eslint-disable-next-line camelcase
 	UNSAFE_componentWillReceiveProps(nextProps)
 	{
-		const { audioTrack } = nextProps;
+		const { audioTrack, audioOutputDevice } = nextProps;
 	
 		this._setTrack(audioTrack);
+		this._setOutputDevice(audioOutputDevice);
 	}
 
 	_setTrack(audioTrack)
@@ -60,9 +63,23 @@ export default class PeerAudio extends React.PureComponent
 			audio.srcObject = null;
 		}
 	}
+
+	_setOutputDevice(audioOutputDevice)
+	{
+		if (this._audioOutputDevice === audioOutputDevice)
+			return;
+		
+		this._audioOutputDevice = audioOutputDevice;
+
+		const { audio } = this.refs;
+
+		if (audioOutputDevice && typeof audio.setSinkId === 'function')
+			audio.setSinkId(audioOutputDevice);
+	}
 }
 
 PeerAudio.propTypes =
 {
-	audioTrack : PropTypes.any
+	audioTrack        : PropTypes.any,
+	audioOutputDevice : PropTypes.string
 };

app/src/components/Settings/Settings.js

@@ -131,6 +131,13 @@ const Settings = ({
 	else
 		audioDevices = [];
 		
+	let audioOutputDevices;
+
+	if (me.audioOutputDevices)
+		audioOutputDevices = Object.values(me.audioOutputDevices);
+	else
+		audioOutputDevices = [];
+
 	return (
 		<Dialog
 			className={classes.root}
@@ -226,6 +233,55 @@ const Settings = ({
 					</FormHelperText>
 				</FormControl>
 			</form>
+			{ 	
+				'audioOutputSupportedBrowsers' in window.config &&
+				window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
+				<form className={classes.setting} autoComplete='off'>
+					<FormControl className={classes.formControl}>
+						<Select
+							value={settings.selectedAudioOutputDevice || ''}
+							onChange={(event) =>
+							{
+								if (event.target.value)
+									roomClient.changeAudioOutputDevice(event.target.value);
+							}}
+							displayEmpty
+							name={intl.formatMessage({
+								id             : 'settings.audioOutput',
+								defaultMessage : 'Audio output device'
+							})}
+							autoWidth
+							className={classes.selectEmpty}
+							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
+						>
+							{ audioOutputDevices.map((audioOutput, index) =>
+							{
+								return (
+									<MenuItem
+										key={index}
+										value={audioOutput.deviceId}
+									>
+										{audioOutput.label}
+									</MenuItem>
+								);
+							})}
+						</Select>
+						<FormHelperText>
+							{ audioOutputDevices.length > 0 ?
+								intl.formatMessage({
+									id             : 'settings.selectAudioOutput',
+									defaultMessage : 'Select audio output device'
+								})
+								:
+								intl.formatMessage({
+									id             : 'settings.cantSelectAudioOutput',
+									defaultMessage : 'Unable to select audio output device'
+								})
+							}
+						</FormHelperText>
+					</FormControl>
+				</form>
+			}
 			<form className={classes.setting} autoComplete='off'>
 				<FormControl className={classes.formControl}>
 					<Select

app/src/deviceInfo.js

@@ -26,7 +26,7 @@ export default function()
 		flag,
 		os       : browser.getOSName(true), // ios, android, linux...
 		platform : browser.getPlatformType(true), // mobile, desktop, tablet
-		name     : browser.getBrowserName(),
+		name     : browser.getBrowserName(true),
 		version  : browser.getBrowserVersion(),
 		bowser   : browser
 	};

app/src/reducers/me.js

@@ -99,6 +99,13 @@ const me = (state = initialState, action) =>
 			return { ...state, audioDevices: devices };
 		}
 
+		case 'SET_AUDIO_OUTPUT_DEVICES':
+		{
+			const { devices } = action.payload;
+
+			return { ...state, audioOutputDevices: devices };
+		}
+
 		case 'SET_WEBCAM_DEVICES':
 		{
 			const { devices } = action.payload;

app/src/reducers/settings.js

@@ -23,6 +23,11 @@ const settings = (state = initialState, action) =>
 			return { ...state, selectedAudioDevice: action.payload.deviceId };
 		}
 
+		case 'CHANGE_AUDIO_OUTPUT_DEVICE':
+		{
+			return { ...state, selectedAudioOutputDevice: action.payload.deviceId };
+		}
+	
 		case 'SET_DISPLAY_NAME':
 		{
 			const { displayName } = action.payload;

app/src/translations/cn.json

@@ -100,6 +100,9 @@
 	"settings.audio": "音频设备",
 	"settings.selectAudio": "选择音频设备",
 	"settings.cantSelectAudio": "无法选择音频设备",
+	"settings.audioOutput": "音频输出设备",
+	"settings.selectAudioOutput": "选择音频输出设备",
+	"settings.cantSelectAudioOutput": "无法选择音频输出设备",
 	"settings.resolution": "选择视频分辨率",
 	"settings.layout": "房间布局",
 	"settings.selectRoomLayout": "选择房间布局",

app/src/translations/cs.json

@@ -97,6 +97,9 @@
 	"settings.audio": "Audio zařízení",
 	"settings.selectAudio": "Vyberte audio zařízení",
 	"settings.cantSelectAudio": "Není možno vybrat audio zařízení",
+	"settings.audioOutput": "Audio output zařízení",
+	"settings.selectAudioOutput": "Vyberte audio output zařízení",
+	"settings.cantSelectAudioOutput": "Není možno vybrat audio output zařízení",
 	"settings.resolution": "Vyberte rozlišení vašeho videa",
 	"settings.layout": "Rozvržení místnosti",
 	"settings.selectRoomLayout": "Vyberte rozvržení místnosti",

app/src/translations/de.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Audiogerät",
 	"settings.selectAudio": "Wähle ein Audiogerät",
 	"settings.cantSelectAudio": "Kann Audiogerät nicht aktivieren",
+	"settings.audioOutput": "Audioausgabegerät",
+	"settings.selectAudioOutput": "Wähle ein Audioausgabegerät",
+	"settings.cantSelectAudioOutput": "Kann Audioausgabegerät nicht aktivieren",
 	"settings.resolution": "Wähle eine Auflösung",
 	"settings.layout": "Raumlayout",
 	"settings.selectRoomLayout": "Wähle ein Raumlayout",

app/src/translations/dk.json

@@ -100,6 +100,10 @@
 	"settings.audio": "Lydenhed",
 	"settings.selectAudio": "Vælg lydenhed",
 	"settings.cantSelectAudio": "Kan ikke vælge lydenhed",
+	"settings.audioOutput": "Audio output enhed",
+	"settings.selectAudioOutput": "Vælg lydudgangsenhed",
+	"settings.cantSelectAudioOutput": "Kan ikke vælge lydoutputenhed",
+
 	"settings.resolution": "Vælg din videoopløsning",
 	"settings.layout": "Møde visning",
 	"settings.selectRoomLayout": "Vælg møde visning",

app/src/translations/el.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Συσκευή ήχου",
 	"settings.selectAudio": "Επιλογή συσκευής ήχου",
 	"settings.cantSelectAudio": "Αδυναμία επιλογής συσκευής ήχου",
+	"settings.audioOutput": "Συσκευή εξόδου ήχου",
+	"settings.selectAudioOutput": "Επιλέξτε συσκευή εξόδου ήχου",
+	"settings.cantSelectAudioOutput": "Δεν είναι δυνατή η επιλογή συσκευής εξόδου ήχου",
 	"settings.resolution": "Επιλέξτε την ανάλυση του video",
 	"settings.layout": "Περιβάλλον δωματίου",
 	"settings.selectRoomLayout": "Επιλογή περιβάλλοντος δωματίου",

app/src/translations/en.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Audio device",
 	"settings.selectAudio": "Select audio device",
 	"settings.cantSelectAudio": "Unable to select audio device",
+	"settings.audioOutput": "Audio output device",
+	"settings.selectAudioOutput": "Select audio output device",
+	"settings.cantSelectAudioOutput": "Unable to select audio output device",
 	"settings.resolution": "Select your video resolution",
 	"settings.layout": "Room layout",
 	"settings.selectRoomLayout": "Select room layout",

app/src/translations/es.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Dispositivo de sonido",
 	"settings.selectAudio": "Seleccione dispositivo de sonido",
 	"settings.cantSelectAudio": "No ha sido posible seleccionar el dispositivo de sonido",
+	"settings.audioOutput": "Dispositivo de salida de audio",
+	"settings.selectAudioOutput": "Seleccionar dispositivo de salida de audio",
+	"settings.cantSelectAudioOutput": "No se puede seleccionar el dispositivo de salida de audio",
 	"settings.resolution": "Seleccione su resolución de imagen",
 	"settings.layout": "Disposición de la sala",
 	"settings.selectRoomLayout": "Seleccione la disposición de la sala",

app/src/translations/fr.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Microphone",
 	"settings.selectAudio": "Sélectionnez votre microphone",
 	"settings.cantSelectAudio": "Impossible de sélectionner votre la caméra",
+	"settings.audioOutput": "Périphérique de sortie audio",
+	"settings.selectAudioOutput": "Sélectionnez le périphérique de sortie audio",
+	"settings.cantSelectAudioOutput": "Impossible de sélectionner le périphérique de sortie audio",
 	"settings.resolution": "Sélectionnez votre résolution",
 	"settings.layout": "Mode d'affichage de la salle",
 	"settings.selectRoomLayout": "Sélectionnez la présentation de la salle",

app/src/translations/hr.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Uređaj za zvuk",
 	"settings.selectAudio": "Odaberi uređaj za zvuk",
 	"settings.cantSelectAudio": "Nije moguće odabrati uređaj za zvuk",
+	"settings.audioOutput": "Uređaj za izlaz zvuka",
+	"settings.selectAudioOutput": "Odaberite audio izlazni uređaj",
+	"settings.cantSelectAudioOutput": "Nije moguće odabrati audio izlazni uređaj",
 	"settings.resolution":  "Odaberi video rezoluciju",
 	"settings.layout":  "Način prikaza",
 	"settings.selectRoomLayout":  "Odaberi način prikaza",

app/src/translations/hu.json

@@ -95,12 +95,15 @@
 
 	"settings.settings": "Beállítások",
 	"settings.camera": "Kamera",
-	"settings.selectCamera": "Válasz videóeszközt",
-	"settings.cantSelectCamera": "Nem lehet a videó eszközt kiválasztani",
+	"settings.selectCamera": "Válassz videoeszközt",
+	"settings.cantSelectCamera": "Nem lehet a videoeszközt kiválasztani",
 	"settings.audio": "Hang eszköz",
-	"settings.selectAudio": "Válasz hangeszközt",
-	"settings.cantSelectAudio": "Nem lehet a hang eszközt kiválasztani",
-	"settings.resolution": "Válaszd ki a videóeszközöd felbontását",
+	"settings.selectAudio": "Válassz hangeszközt",
+	"settings.cantSelectAudio": "Nem sikerült a hangeszközt kiválasztani",
+	"settings.audioOutput": "Kimenti hangeszköz",
+	"settings.selectAudioOutput": "Válassz kimenti hangeszközt",
+	"settings.cantSelectAudioOutput": "Nem sikerült a kimeneti hangeszközt kiválasztani",
+	"settings.resolution": "Válaszd ki a videoeszközöd felbontását",
 	"settings.layout": "A konferencia képkiosztása",
 	"settings.selectRoomLayout": "Válaszd ki a konferencia képkiosztását",
 	"settings.advancedMode": "Részletes információk",

app/src/translations/it.json

@@ -99,6 +99,9 @@
 	"settings.audio": "Dispositivo audio",
 	"settings.selectAudio": "Seleziona dispositivo audio",
 	"settings.cantSelectAudio": "Impossibile selezionare dispositivo audio",
+	"settings.audioOutput": "Dispositivo di uscita audio",
+	"settings.selectAudioOutput": "Seleziona il dispositivo di uscita audio",
+	"settings.cantSelectAudioOutput": "Impossibile selezionare il dispositivo di uscita audio",
 	"settings.resolution": "Seleziona risoluzione",
 	"settings.layout": "Aspetto stanza",
 	"settings.selectRoomLayout": "Seleziona aspetto stanza",

app/src/translations/nb.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Lydenhet",
 	"settings.selectAudio": "Velg lydenhet",
 	"settings.cantSelectAudio": "Kan ikke velge lydenhet",
+	"settings.audioOutput": "Lydutgangsenhet",
+	"settings.selectAudioOutput": "Velg lydutgangsenhet",
+	"settings.cantSelectAudioOutput": "Kan ikke velge lydutgangsenhet",
 	"settings.resolution": "Velg oppløsning",
 	"settings.layout": "Møtelayout",
 	"settings.selectRoomLayout": "Velg møtelayout",

app/src/translations/pl.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Urządzenie audio",
 	"settings.selectAudio": "Wybór urządzenia audio",
 	"settings.cantSelectAudio": "Nie można wybrać urządzenia audio",
+	"settings.audioOutput": "Urządzenie wyjściowe audio",
+	"settings.selectAudioOutput": "Wybierz urządzenie wyjściowe audio",
+	"settings.cantSelectAudioOutput": "Nie można wybrać urządzenia wyjściowego audio",
 	"settings.resolution": "Wybór rozdzielczości wideo",
 	"settings.layout": "Układ konferencji",
 	"settings.selectRoomLayout": "Ustawienia układu konferencji",

app/src/translations/pt.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Dispositivo Áudio",
 	"settings.selectAudio": "Selecione o seu dispositivo de áudio",
 	"settings.cantSelectAudio": "Impossível selecionar o seu dispositivo de áudio",
+	"settings.audioOutput": "Dispositivo de saída de áudio",
+	"settings.selectAudioOutput": "Selecionar dispositivo de saída de áudio",
+	"settings.cantSelectAudioOutput": "Não foi possível selecionar o dispositivo de saída de áudio",
 	"settings.resolution": "Selecione a sua resolução de vídeo",
 	"settings.layout": "Disposição da sala",
 	"settings.selectRoomLayout": "Seleccione a disposição da sala",

app/src/translations/ro.json

@@ -100,6 +100,9 @@
 	"settings.audio": "Dispozitivul audio",
 	"settings.selectAudio": "Selectarea dispozitivul audio",
 	"settings.cantSelectAudio": "Încercarea de a selecta dispozitivul audio a eșuat",
+	"settings.audioOutput": "Dispozitiv de ieșire audio",
+	"settings.selectAudioOutput": "Selectați dispozitivul de ieșire audio",
+	"settings.cantSelectAudioOutput": "Imposibil de selectat dispozitivul de ieșire audio",
 	"settings.resolution": "Selectează rezoluția video",
 	"settings.layout": "Aspectul camerei video",
 	"settings.selectRoomLayout": "Selectează spectul camerei video",

app/src/translations/uk.json

@@ -97,6 +97,9 @@
 	"settings.audio": "Аудіопристрій",
 	"settings.selectAudio": "Вибрати аудіопристрій",
 	"settings.cantSelectAudio": "Неможливо вибрати аудіопристрій",
+	"settings.audioOutput": "Пристрій аудіовиходу",
+	"settings.selectAudioOutput": "Виберіть пристрій аудіовиходу",
+	"settings.cantSelectAudioOutput": "Неможливо вибрати аудіо вихідний пристрій",	
 	"settings.resolution": "Виберіть роздільну здатність відео",
 	"settings.layout": "Розміщення кімнати",
 	"settings.selectRoomLayout": "Вибір розташування кімнати",