Detect devices

lib/audioPlayer.js

@@ -38,12 +38,13 @@ module.exports =
 		initialized = true;
 	},
 
-	/**
-	 * Play a sound
-	 * @param {String} name - Sound name
-	 * @param {[Float]} relativeVolume - Relative volume (0.0 - 1.0)
-	 */
-	play(name, relativeVolume)
+  /**
+    * Play a sound
+    * @param {String} name - Sound name
+    * @param {String} deviceId - DeviceId to use for audio output
+    * @param {[Float]} relativeVolume - Relative volume (0.0 - 1.0)
+   */
+	play(name, deviceId, relativeVolume)
 	{
 		this.initialize();
 
@@ -62,6 +63,11 @@ module.exports =
 			sound.audio.pause();
 			sound.audio.currentTime = 0.0;
 			sound.audio.volume = (sound.volume || 1.0) * relativeVolume;
+
+			if (deviceId && sound.audio.setSinkId) {
+				sound.audio.setSinkId(deviceId);
+			}
+
 			sound.audio.play();
 		}
 		catch (error)

lib/components/App.jsx

@@ -9,6 +9,8 @@ import Snackbar from 'material-ui/Snackbar';
 import Notifier from './Notifier';
 import Login from './Login';
 import Phone from './Phone';
+import DevicesWatcher from './DevicesWatcher';
+import clone from 'clone';
 
 const logger = new Logger('App');
 
@@ -71,6 +73,12 @@ export default class App extends React.Component
 				<div data-component='App'>
 					<Notifier ref='Notifier'/>
 
+					<DevicesWatcher
+						mediaDevices={state.settings.media}
+						onNotify={this.handleNotify.bind(this)}
+						onMediaSettingsChange={this.handleMediaSettingsChange.bind(this)}
+					/>
+
 					{component}
 
 					<Snackbar
@@ -151,6 +159,21 @@ export default class App extends React.Component
 			});
 	}
 
+  handleMediaSettingsChange(key, deviceId)
+	{
+		const settings = clone(this.state.settings);
+
+		logger.debug('handleMediaSettingsChange() [key:%s] [old:%s] [new:%s]', key, settings.media[key], deviceId);
+
+		// Merge media settings without mutating
+		settings.media[key] = deviceId;
+		settingsManager.set(settings);
+
+    this.setState({
+			settings: settingsManager.get()
+		});
+	}
+
 	handlePhoneExit()
 	{
 		logger.debug('handlePhoneExit()');

lib/components/DevicesWatcher.js

@@ -0,0 +1,162 @@
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Logger from '../Logger';
+
+const logger = new Logger('DevicesWatcher');
+
+export default class Dialer extends React.Component
+{
+  constructor(props)
+  {
+    super(props);
+  }
+
+  reloadDevices() {
+    navigator.mediaDevices.enumerateDevices({audio:true, video:true})
+      .then(devices => {
+        const devicesOld = localStorage.getItem('devices')
+          ? JSON.parse(localStorage.getItem('devices'))
+          : devices;
+
+        devicesOld.map((item) => {
+          if (!devices.find(x => x.deviceId === item.deviceId)) {
+            this.deviceRemoved(item, devices);
+          }
+        });
+
+        devices.map((item) => {
+          if (!devicesOld.find(x => x.deviceId === item.deviceId)) {
+            this.deviceAdded(item, devices);
+          }
+        });
+
+        localStorage.setItem('devices', JSON.stringify(devices));
+      });
+  }
+
+  deviceAdded(device) {
+    const {
+      mediaDevices: {
+        audioInput,
+        audioOutput,
+        videoInput
+      },
+      onMediaSettingsChange,
+      onNotify
+    } = this.props;
+
+    logger.debug('deviceAdded() [device:%o]', device);
+
+    onNotify({
+      level   : 'success',
+      title   : 'Device added',
+      message : device.label
+    });
+
+    if (device.kind === 'audioinput') {
+      localStorage.setItem('audioInputOld', audioInput);
+      onMediaSettingsChange('audioInput', device.deviceId);
+    } else if (device.kind === 'audiooutput') {
+      localStorage.setItem('audioOutputOld', audioOutput);
+      onMediaSettingsChange('audioOutput', device.deviceId);
+    } else if (device.kind === 'videoinput') {
+      localStorage.setItem('videoInputOld', videoInput);
+      onMediaSettingsChange('videoInput', device.deviceId);
+    }
+  }
+
+  deviceRemoved(device, devices) {
+    const {
+      mediaDevices: {
+        audioInput,
+        audioOutput,
+        videoInput
+      },
+      onMediaSettingsChange,
+      onNotify
+    } = this.props;
+
+    logger.debug('deviceRemoved() [device:%o]', device);
+
+    onNotify({
+      level   : 'error',
+      title   : 'Device removed',
+      message : device.label
+    });
+
+    // if (device.deviceId === audioInput) {
+    //   if (audioInput && devices.find(x => x.deviceId === audioInput)) {
+    //     onMediaSettingsChange('audioInput', audioInput)
+    //   } else {
+    //     onMediaSettingsChange('audioInput', 'default')
+    //   }
+    // }
+    //
+    // if (device.deviceId === audioOutput) {
+    //   if (audioOutput && devices.find(x => x.deviceId === audioOutput)) {
+    //     onMediaSettingsChange('audioOutput', audioOutput)
+    //   } else {
+    //     onMediaSettingsChange('audioOutput', 'default')
+    //   }
+    // }
+    //
+    // if (device.deviceId === videoInput) {
+    //   const videoInput = localStorage.getItem('videoInput')
+    //   if (videoInput && devices.find(x => x.deviceId === videoInput)) {
+    //     onMediaSettingsChange('videoInput', videoInput)
+    //   } else {
+    //     onMediaSettingsChange('videoInput', null)
+    //   }
+    // }
+
+    if (device.deviceId === audioInput) {
+      const audioInputOld = localStorage.getItem('audioInputOld');
+      if (audioInputOld && devices.find(x => x.deviceId === audioInputOld)) {
+        onMediaSettingsChange('audioInput', audioInputOld);
+        localStorage.removeItem('audioInputOld');
+      } else {
+        onMediaSettingsChange('audioInput', 'default');
+      }
+    }
+
+    if (device.deviceId === audioOutput) {
+      const audioOutputOld = localStorage.getItem('audioOutputOld');
+      if (audioOutputOld && devices.find(x => x.deviceId === audioOutputOld)) {
+        onMediaSettingsChange('audioOutput', audioOutputOld);
+        localStorage.removeItem('audioOutputOld');
+      } else {
+        onMediaSettingsChange('audioOutput', 'default');
+      }
+    }
+
+    if (device.deviceId === videoInput) {
+      const videoInputOld = localStorage.getItem('videoInputOld');
+      if (videoInputOld && devices.find(x => x.deviceId === videoInputOld)) {
+        onMediaSettingsChange('videoInput', videoInputOld);
+        localStorage.removeItem('videoInputOld');
+      } else {
+        onMediaSettingsChange('videoInput', null);
+      }
+    }
+  }
+
+  componentWillMount() {
+    this.reloadDevices();
+    navigator.mediaDevices.ondevicechange = () => this.reloadDevices();
+  }
+
+  render()
+  {
+    return null;
+  }
+}
+
+Dialer.propTypes =
+  {
+    settings: PropTypes.object.isRequired,
+    onNotify: PropTypes.func.isRequired,
+    onMediaSettingsChange: PropTypes.func.isRequired,
+    mediaDevices: PropTypes.object.isRequired
+  };

lib/components/Phone.jsx

@@ -103,6 +103,7 @@ export default class Phone extends React.Component
 								session={state.session}
 								onNotify={props.onNotify}
 								onHideNotification={props.onHideNotification}
+								mediaDevices={props.settings.media}
 							/>
 						:
 							null
@@ -266,7 +267,7 @@ export default class Phone extends React.Component
 				return;
 			}
 
-			audioPlayer.play('ringing');
+			audioPlayer.play('ringing', settings.media.audioRinging);
 			this.setState({ incomingSession: session });
 
 			session.on('failed', () =>
@@ -349,15 +350,27 @@ export default class Phone extends React.Component
 
 	handleOutgoingCall(uri)
 	{
+		const {
+			settings: {
+				media: {
+					audioInput,
+					audioOutput,
+					videoInput
+				},
+        pcConfig
+			},
+			onNotify
+		} = this.props;
+
 		logger.debug('handleOutgoingCall() [uri:"%s"]', uri);
 
 		let session = this._ua.call(uri,
 			{
-				pcConfig : this.props.settings.pcConfig || { iceServers: [] },
+				pcConfig : pcConfig || { iceServers: [] },
 				mediaConstraints :
 				{
-					audio : true,
-					video : true
+          audio: audioInput ? {deviceId: {exact: audioInput}} : true,
+					video : videoInput ? {deviceId: {exact: videoInput}} : true
 				},
 				rtcOfferConstraints :
 				{
@@ -373,21 +386,20 @@ export default class Phone extends React.Component
 
 		session.on('progress', () =>
 		{
-			audioPlayer.play('ringback');
+			audioPlayer.play('ringback', audioOutput);
 		});
 
 		session.on('failed', (data) =>
 		{
 			audioPlayer.stop('ringback');
-			audioPlayer.play('rejected');
+			audioPlayer.play('rejected', audioOutput);
 			this.setState({ session: null });
 
-			this.props.onNotify(
-				{
-					level   : 'error',
-					title   : 'Call failed',
-					message : data.cause
-				});
+			onNotify({
+				level   : 'error',
+				title   : 'Call failed',
+				message : data.cause
+			});
 		});
 
 		session.on('ended', () =>
@@ -399,7 +411,7 @@ export default class Phone extends React.Component
 		session.on('accepted', () =>
 		{
 			audioPlayer.stop('ringback');
-			audioPlayer.play('answered');
+			audioPlayer.play('answered', audioOutput);
 		});
 	}