Adding frame rate option to videos. Make resolution and frame rate of screen sharing configurable.

app/public/config/config.example.js

@@ -27,14 +27,27 @@ var config =
 	},
 
 	/**
-	 * If defaultResolution is set, it will override user settings when joining:
+	 * Resolutions:
+	 * 
 	 * low ~ 320x240
 	 * medium ~ 640x480
 	 * high ~ 1280x720
 	 * veryhigh ~ 1920x1080
 	 * ultra ~ 3840x2560
+	 * 
 	 **/
+
+	/**
+	 * Frame rates:
+	 * 
+	 * 1, 5, 10, 15, 20, 25, 30
+	 * 
+	 **/
+
 	defaultResolution             : 'medium',
+	defaultFrameRate              : 15,
+	defaultScreenResolution       : 'veryhigh',
+	defaultScreenSharingFrameRate : 5,
 	// Enable or disable simulcast for webcam video
 	simulcast                     : true,
 	// Enable or disable simulcast for screen sharing video

app/src/RoomClient.js

@@ -1192,17 +1192,19 @@ export default class RoomClient
 				sampleSize
 			} = store.getState().settings;
 
-			if (restart || !this._micProducer)
+			if (restart)
 			{
 				this.disconnectLocalHark();
 
+				store.dispatch(settingsActions.setSelectedAudioDevice(deviceId));
+
 				if (this._micProducer)
 					await this.disableMic();
 
 				const stream = await navigator.mediaDevices.getUserMedia(
 					{
 						audio : {
-							deviceId : { ideal: device.deviceId },
+							deviceId : { ideal: deviceId },
 							sampleRate,
 							channelCount,
 							volume,
@@ -1264,7 +1266,7 @@ export default class RoomClient
 
 				this.connectLocalHark(track);
 			}
-			else
+			else if (this._micProducer)
 			{
 				({ track } = this._micProducer);
 
@@ -1318,13 +1320,19 @@ export default class RoomClient
 		store.dispatch(meActions.setAudioInProgress(false));
 	}
 
-	async updateWebcam({ restart = false, newDeviceId = null, newResolution = null } = {})
+	async updateWebcam({
+		restart = false,
+		newDeviceId = null,
+		newResolution = null,
+		newFrameRate = null
+	} = {})
 	{
 		logger.debug(
-			'updateWebcam() [restart:"%s", newDeviceId:"%s", newResolution:"%s"]',
+			'updateWebcam() [restart:"%s", newDeviceId:"%s", newResolution:"%s", newFrameRate:"%s"]',
 			restart,
 			newDeviceId,
-			newResolution
+			newResolution,
+			newFrameRate
 		);
 
 		let track;
@@ -1343,6 +1351,9 @@ export default class RoomClient
 			if (newResolution)
 				store.dispatch(settingsActions.setVideoResolution(newResolution));
 
+			if (newFrameRate)
+				store.dispatch(settingsActions.setVideoFrameRate(newFrameRate));
+
 			store.dispatch(meActions.setWebcamInProgress(true));
 
 			const deviceId = await this._getWebcamDeviceId();
@@ -1351,10 +1362,15 @@ export default class RoomClient
 			if (!device)
 				throw new Error('no webcam devices');
 
-			const { resolution } = store.getState().settings;
+			const {
+				resolution,
+				frameRate
+			} = store.getState().settings;
 
-			if (restart || !this._webcamProducer)
+			if (restart)
 			{
+				store.dispatch(settingsActions.setSelectedWebcamDevice(deviceId));
+
 				if (this._webcamProducer)
 					await this.disableWebcam();
 
@@ -1362,8 +1378,9 @@ export default class RoomClient
 					{
 						video :
 						{
-							deviceId : { ideal: device.deviceId },
-							...VIDEO_CONSTRAINS[resolution]
+							deviceId : { ideal: deviceId },
+							...VIDEO_CONSTRAINS[resolution],
+							frameRate
 						}
 					});
 
@@ -1441,13 +1458,14 @@ export default class RoomClient
 					this.disableWebcam();
 				});
 			}
-			else
+			else if (this._webcamProducer)
 			{
 				({ track } = this._webcamProducer);
 
 				await track.applyConstraints(
 					{
-						...VIDEO_CONSTRAINS[resolution]
+						...VIDEO_CONSTRAINS[resolution],
+						frameRate
 					}
 				);
 
@@ -1458,13 +1476,12 @@ export default class RoomClient
 
 					await track.applyConstraints(
 						{
-							...VIDEO_CONSTRAINS[resolution]
+							...VIDEO_CONSTRAINS[resolution],
+							frameRate
 						}
 					);
 				}
 			}
-
-			await this._updateWebcams();
 		}
 		catch (error)
 		{
@@ -3559,24 +3576,16 @@ export default class RoomClient
 		store.dispatch(meActions.setAudioInProgress(false));
 	}
 
-	async enableScreenSharing()
+	async updateScreenSharing({
+		restart = false,
+		newResolution = null,
+		newFrameRate = null
+	} = {})
 	{
-		logger.debug('enableScreenSharing()');
-
-		if (this._screenSharingProducer)
-			return;
-
-		if (!this._mediasoupDevice.canProduce('video'))
-		{
-			logger.error('enableScreenSharing() | cannot produce video');
-
-			return;
-		}
+		logger.debug('updateScreenSharing() [restart:"%s"]', restart);
 
 		let track;
 
-		store.dispatch(meActions.setScreenShareInProgress(true));
-
 		try
 		{
 			const available = this._screenSharing.isScreenShareAvailable();
@@ -3584,10 +3593,27 @@ export default class RoomClient
 			if (!available)
 				throw new Error('screen sharing not available');
 
+			if (!this._mediasoupDevice.canProduce('video'))
+				throw new Error('cannot produce video');
+
+			if (newResolution)
+				store.dispatch(settingsActions.setScreenSharingResolution(newResolution));
+
+			if (newFrameRate)
+				store.dispatch(settingsActions.setScreenSharingFrameRate(newFrameRate));
+
+			store.dispatch(meActions.setScreenShareInProgress(true));
+
+			const {
+				screenSharingResolution,
+				screenSharingFrameRate
+			} = store.getState().settings;
+
+			if (restart)
+			{
 				const stream = await this._screenSharing.start({
-				width     : 1920,
-				height    : 1080,
-				frameRate : 5
+					...VIDEO_CONSTRAINS[screenSharingResolution],
+					frameRate : screenSharingFrameRate
 				});
 
 				([ track ] = stream.getVideoTracks());
@@ -3669,15 +3695,24 @@ export default class RoomClient
 							})
 						}));
 
-				this.disableScreenSharing()
-					.catch(() => {});
+					this.disableScreenSharing();
 				});
+			}
+			else if (this._screenSharingProducer)
+			{
+				({ track } = this._screenSharingProducer);
 
-			logger.debug('enableScreenSharing() succeeded');
+				await track.applyConstraints(
+					{
+						...VIDEO_CONSTRAINS[screenSharingResolution],
+						frameRate : screenSharingFrameRate
+					}
+				);
+			}
 		}
 		catch (error)
 		{
-			logger.error('enableScreenSharing() [error:"%o"]', error);
+			logger.error('updateScreenSharing() [error:"%o"]', error);
 
 			store.dispatch(requestActions.notify(
 				{

app/src/actions/settingsActions.js

@@ -22,6 +22,24 @@ export const setVideoResolution = (resolution) =>
 		payload : { resolution }
 	});
 
+export const setVideoFrameRate = (frameRate) =>
+	({
+		type    : 'SET_VIDEO_FRAME_RATE',
+		payload : { frameRate }
+	});
+
+export const setScreenSharingResolution = (screenSharingResolution) =>
+	({
+		type    : 'SET_SCREEN_SHARING_RESOLUTION',
+		payload : { screenSharingResolution }
+	});
+
+export const setScreenSharingFrameRate = (screenSharingFrameRate) =>
+	({
+		type    : 'SET_SCREEN_SHARING_FRAME_RATE',
+		payload : { screenSharingFrameRate }
+	});
+
 export const setDisplayName = (displayName) =>
 	({
 		type    : 'SET_DISPLAY_NAME',

app/src/components/Containers/Me.js

@@ -599,7 +599,7 @@ const Me = (props) =>
 													onClick={() =>
 													{
 														if (screenState === 'off')
-															roomClient.enableScreenSharing();
+															roomClient.updateScreenSharing({ restart: true });
 														else if (screenState === 'on')
 															roomClient.disableScreenSharing();
 													}}
@@ -631,7 +631,7 @@ const Me = (props) =>
 													onClick={() =>
 													{
 														if (screenState === 'off')
-															roomClient.enableScreenSharing();
+															roomClient.updateScreenSharing({ restart: true });
 														else if (screenState === 'on')
 															roomClient.disableScreenSharing();
 													}}

app/src/components/Controls/ButtonControlBar.js

@@ -243,7 +243,7 @@ const ButtonControlBar = (props) =>
 					onClick={() =>
 					{
 						if (screenState === 'off')
-							roomClient.enableScreenSharing();
+							roomClient.updateScreenSharing({ restart: true });
 						else if (screenState === 'on')
 							roomClient.disableScreenSharing();
 					}}

app/src/components/Settings/MediaSettings.js

@@ -233,6 +233,90 @@ const MediaSettings = ({
 						/>
 					</FormHelperText>
 				</FormControl>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.frameRate || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.updateWebcam({ newFrameRate: event.target.value });
+						}}
+						name='Frame rate'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ [ 1, 5, 10, 15, 20, 25, 30 ].map((frameRate) =>
+						{
+							return (
+								<MenuItem key={frameRate} value={frameRate}>
+									{frameRate}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						<FormattedMessage
+							id='settings.frameRate'
+							defaultMessage='Select your video frame rate'
+						/>
+					</FormHelperText>
+				</FormControl>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.screenSharingResolution || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.updateScreenSharing({ newResolution: event.target.value });
+						}}
+						name='Screen sharing resolution'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{resolutions.map((resolution, index) =>
+						{
+							return (
+								<MenuItem key={index} value={resolution.value}>
+									{resolution.label}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						<FormattedMessage
+							id='settings.screenSharingResolution'
+							defaultMessage='Select your screen sharing resolution'
+						/>
+					</FormHelperText>
+				</FormControl>
+				<FormControl className={classes.formControl}>
+					<Select
+						value={settings.screenSharingFrameRate || ''}
+						onChange={(event) =>
+						{
+							if (event.target.value)
+								roomClient.updateScreenSharing({ newFrameRate: event.target.value });
+						}}
+						name='Frame rate'
+						autoWidth
+						className={classes.selectEmpty}
+					>
+						{ [ 1, 5, 10, 15, 20, 25, 30 ].map((screenSharingFrameRate) =>
+						{
+							return (
+								<MenuItem key={screenSharingFrameRate} value={screenSharingFrameRate}>
+									{screenSharingFrameRate}
+								</MenuItem>
+							);
+						})}
+					</Select>
+					<FormHelperText>
+						<FormattedMessage
+							id='settings.screenSharingFrameRate'
+							defaultMessage='Select your screen sharing frame rate'
+						/>
+					</FormHelperText>
+				</FormControl>
 			</form>
 			<form className={classes.setting} autoComplete='off'>
 				<FormControl className={classes.formControl}>

app/src/reducers/settings.js

@@ -15,6 +15,9 @@ const initialState =
 	sampleSize              : 16,
 	// low, medium, high, veryhigh, ultra
 	resolution              : window.config.defaultResolution || 'medium',
+	frameRate               : window.config.defaultFrameRate || 15,
+	screenSharingResolution : window.config.defaultScreenResolution || 'veryhigh',
+	screenSharingFrameRate  : window.config.defaultScreenSharingFrameRate || 5,
 	lastN                   : 4,
 	permanentTopBar         : true,
 	hiddenControls          : false,
@@ -184,6 +187,27 @@ const settings = (state = initialState, action) =>
 			return { ...state, resolution };
 		}
 
+		case 'SET_VIDEO_FRAME_RATE':
+		{
+			const { frameRate } = action.payload;
+
+			return { ...state, frameRate };
+		}
+
+		case 'SET_SCREEN_SHARING_RESOLUTION':
+		{
+			const { screenSharingResolution } = action.payload;
+
+			return { ...state, screenSharingResolution };
+		}
+
+		case 'SET_SCREEN_SHARING_FRAME_RATE':
+		{
+			const { screenSharingFrameRate } = action.payload;
+
+			return { ...state, screenSharingFrameRate };
+		}
+
 		default:
 			return state;
 	}

app/src/translations/cn.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "选择音频输出设备",
 	"settings.cantSelectAudioOutput": "无法选择音频输出设备",
 	"settings.resolution": "选择视频分辨率",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "房间布局",
 	"settings.selectRoomLayout": "选择房间布局",
 	"settings.advancedMode": "高级模式",

app/src/translations/cs.json

@@ -131,6 +131,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Rozvržení místnosti",
 	"settings.selectRoomLayout": "Vyberte rozvržení místnosti",
 	"settings.advancedMode": "Pokočilý mód",

app/src/translations/de.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Wähle ein Audioausgabegerät",
 	"settings.cantSelectAudioOutput": "Kann Audioausgabegerät nicht aktivieren",
 	"settings.resolution": "Wähle eine Auflösung",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Raumlayout",
 	"settings.selectRoomLayout": "Wähle ein Raumlayout",
 	"settings.advancedMode": "Erweiterter Modus",

app/src/translations/dk.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Vælg lydudgangsenhed",
 	"settings.cantSelectAudioOutput": "Kan ikke vælge lydoutputenhed",
 	"settings.resolution": "Vælg din videoopløsning",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Møde visning",
 	"settings.selectRoomLayout": "Vælg møde visning",
 	"settings.advancedMode": "Avanceret tilstand",

app/src/translations/el.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Επιλέξτε συσκευή εξόδου ήχου",
 	"settings.cantSelectAudioOutput": "Δεν είναι δυνατή η επιλογή συσκευής εξόδου ήχου",
 	"settings.resolution": "Επιλέξτε την ανάλυση του video",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Περιβάλλον δωματίου",
 	"settings.selectRoomLayout": "Επιλογή περιβάλλοντος δωματίου",
 	"settings.advancedMode": "Προηγμένη λειτουργία",

app/src/translations/en.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Select audio output device",
 	"settings.cantSelectAudioOutput": "Unable to select audio output device",
 	"settings.resolution": "Select your video resolution",
+	"settings.frameRate": "Select your video frame rate",
+	"settings.screenSharingResolution": "Select your screen sharing resolution",
+	"settings.screenSharingFrameRate": "Select your screen sharing frame rate",
 	"settings.layout": "Room layout",
 	"settings.selectRoomLayout": "Select room layout",
 	"settings.advancedMode": "Advanced mode",

app/src/translations/es.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Disposición de la sala",
 	"settings.selectRoomLayout": "Seleccione la disposición de la sala",
 	"settings.advancedMode": "Modo avanzado",

app/src/translations/fr.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Mode d'affichage de la salle",
 	"settings.selectRoomLayout": "Sélectionnez la présentation de la salle",
 	"settings.advancedMode": "Mode avancé",

app/src/translations/hr.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Odaberite izlazni uređaj za zvuk",
 	"settings.cantSelectAudioOutput": "Nije moguće odabrati izlazni uređaj za zvuk",
 	"settings.resolution":  "Odaberi video rezoluciju",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout":  "Način prikaza",
 	"settings.selectRoomLayout":  "Odaberi način prikaza",
 	"settings.advancedMode": "Napredne mogućnosti",

app/src/translations/hu.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"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

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Seleziona il dispositivo di uscita audio",
 	"settings.cantSelectAudioOutput": "Impossibile selezionare il dispositivo di uscita audio",
 	"settings.resolution": "Seleziona risoluzione",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Aspetto stanza",
 	"settings.selectRoomLayout": "Seleziona aspetto stanza",
 	"settings.advancedMode": "Modalità avanzata",

app/src/translations/lv.json

@@ -126,6 +126,9 @@
 	"settings.selectAudio": "Izvēlieties skaņas ierīci",
 	"settings.cantSelectAudio": "Nav iespējams lietot šo skaņas (audio) ierīci",
 	"settings.resolution": "Iestatiet jūsu video izšķirtspēju",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Sapulces telpas izkārtojums",
 	"settings.selectRoomLayout": "Iestatiet sapulces telpas izkārtojumu",
 	"settings.advancedMode": "Advancētais režīms",

app/src/translations/nb.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Velg lydutgangsenhet",
 	"settings.cantSelectAudioOutput": "Kan ikke velge lydutgangsenhet",
 	"settings.resolution": "Velg oppløsning",
+	"settings.frameRate": "Velg bildefrekvens",
+	"settings.screenSharingResolution": "Velg skjermdelingsoppløsning",
+	"settings.screenSharingFrameRate": "Velg skjermdelingsbildefrekvens",
 	"settings.layout": "Møtelayout",
 	"settings.selectRoomLayout": "Velg møtelayout",
 	"settings.advancedMode": "Avansert modus",

app/src/translations/pl.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Układ konferencji",
 	"settings.selectRoomLayout": "Ustawienia układu konferencji",
 	"settings.advancedMode": "Tryb zaawansowany",

app/src/translations/pt.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Disposição da sala",
 	"settings.selectRoomLayout": "Seleccione a disposição da sala",
 	"settings.advancedMode": "Modo avançado",

app/src/translations/ro.json

@@ -132,6 +132,9 @@
 	"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.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Aspectul camerei video",
 	"settings.selectRoomLayout": "Selectează spectul camerei video",
 	"settings.advancedMode": "Mod avansat",

app/src/translations/tr.json

@@ -129,6 +129,9 @@
 	"settings.selectAudio": "Ses aygıtını seç",
 	"settings.cantSelectAudio": "Ses aygıtı seçilemiyor",
 	"settings.resolution": "Video çözünürlüğü ayarla",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Oda düzeni",
 	"settings.selectRoomLayout": "Oda düzeni seç",
 	"settings.advancedMode": "Detaylı mod",

app/src/translations/tw.json

@@ -131,6 +131,9 @@
 	"settings.selectAudioOutput": "選擇音訊輸出設備",
 	"settings.cantSelectAudioOutput": "無法選擇音訊輸出設備",
 	"settings.resolution": "選擇視訊解析度",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "房間佈局",
 	"settings.selectRoomLayout": "選擇房間佈局",
 	"settings.advancedMode": "進階模式",

app/src/translations/uk.json

@@ -132,6 +132,9 @@
 	"settings.selectAudioOutput": "Виберіть пристрій аудіовиходу",
 	"settings.cantSelectAudioOutput": "Неможливо вибрати аудіо вихідний пристрій",	
 	"settings.resolution": "Виберіть роздільну здатність відео",
+	"settings.frameRate": null,
+	"settings.screenSharingResolution": null,
+	"settings.screenSharingFrameRate": null,
 	"settings.layout": "Розміщення кімнати",
 	"settings.selectRoomLayout": "Вибір розташування кімнати",
 	"settings.advancedMode": "Розширений режим",