Added resolution setting.

app/src/RoomClient.js

@@ -29,8 +29,31 @@ let ROOM_OPTIONS =
 
 const VIDEO_CONSTRAINS =
 {
-	width       : { ideal: 1280 },
-	aspectRatio : 1.334
+	'low' :
+	{
+		width       : { ideal: 320 },
+		aspectRatio : 1.334
+	},
+	'medium' :
+	{
+		width       : { ideal: 640 },
+		aspectRatio : 1.334
+	},
+	'high' :
+	{
+		width       : { ideal: 1280 },
+		aspectRatio : 1.334
+	},
+	'veryhigh' :
+	{
+		width       : { ideal: 1920 },
+		aspectRatio : 1.334
+	},
+	'ultra' :
+	{
+		width       : { ideal: 3840 },
+		aspectRatio : 1.334
+	}
 };
 
 let store;
@@ -839,6 +862,56 @@ export default class RoomClient
 			stateActions.setAudioInProgress(false));
 	}
 
+	async changeVideoResolution(resolution)
+	{
+		logger.debug('changeVideoResolution() [resolution: %s]', resolution);
+
+		store.dispatch(
+			stateActions.setWebcamInProgress(true));
+
+		try
+		{
+			const deviceId = await this._getWebcamDeviceId();
+
+			const device = this._webcams[deviceId];
+
+			if (!device)
+				throw new Error('no webcam devices');
+
+			logger.debug('changeVideoResolution() | calling getUserMedia()');
+
+			const stream = await navigator.mediaDevices.getUserMedia(
+				{
+					video :
+					{
+						deviceId : { exact: device.deviceId },
+						...VIDEO_CONSTRAINS[resolution]
+					}
+				});
+
+			const track = stream.getVideoTracks()[0];
+
+			const newTrack = await this._webcamProducer.replaceTrack(track);
+
+			track.stop();
+
+			store.dispatch(
+				stateActions.setProducerTrack(this._webcamProducer.id, newTrack));
+
+			store.dispatch(stateActions.setSelectedWebcamDevice(deviceId));
+			store.dispatch(stateActions.setVideoResolution(resolution));
+
+			await this._updateWebcams();
+		}
+		catch (error)
+		{
+			logger.error('changeVideoResolution() failed: %o', error);
+		}
+
+		store.dispatch(
+			stateActions.setWebcamInProgress(false));
+	}
+
 	async changeWebcam(deviceId)
 	{
 		logger.debug('changeWebcam() [deviceId: %s]', deviceId);
@@ -849,6 +922,7 @@ export default class RoomClient
 		try
 		{
 			const device = this._webcams[deviceId];
+			const resolution = store.getState().settings.resolution;
 
 			if (!device)
 				throw new Error('no webcam devices');
@@ -864,7 +938,7 @@ export default class RoomClient
 					video :
 					{
 						deviceId : { exact: device.deviceId },
-						...VIDEO_CONSTRAINS
+						...VIDEO_CONSTRAINS[resolution]
 					}
 				});
 
@@ -1666,6 +1740,7 @@ export default class RoomClient
 			const deviceId = await this._getWebcamDeviceId();
 
 			const device = this._webcams[deviceId];
+			const resolution = store.getState().settings.resolution;
 
 			if (!device)
 				throw new Error('no webcam devices');
@@ -1681,7 +1756,7 @@ export default class RoomClient
 					video :
 					{
 						deviceId : { exact: deviceId },
-						...VIDEO_CONSTRAINS
+						...VIDEO_CONSTRAINS[resolution]
 					}
 				});
 

app/src/actions/stateActions.js

@@ -113,6 +113,14 @@ export const setSelectedWebcamDevice = (deviceId) =>
 	};
 };
 
+export const setVideoResolution = (resolution) =>
+{
+	return {
+		type    : 'SET_VIDEO_RESOLUTION',
+		payload : { resolution }
+	};
+};
+
 export const setFileSharingSupported = (supported) =>
 {
 	return {

app/src/components/Settings/Settings.js

@@ -59,13 +59,33 @@ const styles = (theme) =>
 	label : 'Filmstrip view'
 } ]; */
 
+const resolutions = [ {
+	value : 'low',
+	label : 'Low'
+},
+{
+	value : 'medium',
+	label : 'Medium'
+},
+{
+	value : 'high',
+	label : 'High (HD)'
+},
+{
+	value : 'veryhigh',
+	label : 'Very high (FHD)'
+},
+{
+	value : 'ultra',
+	label : 'Ultra (UHD)'
+} ];
+
 const Settings = ({
 	roomClient,
 	room,
 	me,
 	settings,
 	onToggleAdvancedMode,
-	// handleChangeMode,
 	handleCloseSettings,
 	classes
 }) =>
@@ -156,32 +176,38 @@ const Settings = ({
 					</FormHelperText>
 				</FormControl>
 			</form>
+			<form className={classes.setting} autoComplete='off'>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.resolution || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.changeVideoResolution(event.target.value);
+						}}
+						name='Video resolution'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ resolutions.map((resolution, index) =>
+						{
+							return (
+								<MenuItem key={index} value={resolution.value}>
+									{resolution.label}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						Select your video resolution
+					</FormHelperText>
+				</FormControl>
+			</form>
 			<FormControlLabel
 				className={classes.setting}
 				control={<Checkbox checked={settings.advancedMode} onChange={onToggleAdvancedMode} value='advancedMode' />}
 				label='Advanced mode'
 			/>
-			{ /* <form className={classes.setting} autoComplete='off'>
-				<FormControl className={classes.formControl}>
-					<Select
-						value={room.mode || ''}
-						onChange={(event) => handleChangeMode(event.target.value)}
-						name='Room mode'
-						autoWidth
-						className={classes.selectEmpty}
-					>
-						{ modes.map((mode, index) =>
-						{
-							return (
-								<MenuItem key={index} value={mode.value}>{mode.label}</MenuItem>
-							);
-						})}
-					</Select>
-					<FormHelperText>
-						Select room layout
-					</FormHelperText>
-				</FormControl>
-			</form> */ }
 			<DialogActions>
 				<Button onClick={() => handleCloseSettings({ settingsOpen: false })} color='primary'>
 					Close

app/src/reducers/settings.js

@@ -4,7 +4,8 @@ const initialState =
 	picture             : null,
 	selectedWebcam      : null,
 	selectedAudioDevice : null,
-	advancedMode        : false
+	advancedMode        : false,
+	resolution          : 'high' // low, medium, high, veryhigh, ultra
 };
 
 const settings = (state = initialState, action) =>
@@ -44,6 +45,13 @@ const settings = (state = initialState, action) =>
 			return { ...state, advancedMode };
 		}
 
+		case 'SET_VIDEO_RESOLUTION':
+		{
+			const { resolution } = action.payload;
+
+			return { ...state, resolution };
+		}
+
 		default:
 			return state;
 	}