Add UI for setting stream resolution (#252)

ui/src/NumberField.tsx

@@ -11,6 +11,7 @@ export const NumberField = ({
     value,
     min,
     onChange,
+    helperText,
     ...props
 }: NumberFieldProps & Omit<TextFieldProps, 'value' | 'onChange'>) => {
     const [stringValue, setStringValue] = React.useState<string>(value.toString());
@@ -20,7 +21,7 @@ export const NumberField = ({
         <TextField
             value={stringValue}
             type="number"
-            helperText={error}
+            helperText={error || helperText}
             error={error !== ''}
             onChange={(event) => {
                 setStringValue(event.target.value);

ui/src/SettingDialog.tsx

@@ -45,7 +45,7 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
         setOpen(false);
     };
 
-    const {name, preferCodec, displayMode, framerate} = settingsInput;
+    const {name, preferCodec, displayMode, framerate, width, height} = settingsInput;
 
     return (
         <Dialog open={open} onClose={() => setOpen(false)} maxWidth={'xs'} fullWidth>
@@ -111,6 +111,24 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
                             fullWidth
                         />
                     </Box>
+                    <Box sx={{paddingTop: 1, display: 'flex', gap: 1}}>
+                        <NumberField
+                            label="Max Width (px)"
+                            helperText="0 = unlimited"
+                            min={0}
+                            onChange={(width) => setSettingsInput((c) => ({...c, width}))}
+                            value={width}
+                            fullWidth
+                        />
+                        <NumberField
+                            label="Max Height (px)"
+                            helperText="0 = unlimited"
+                            min={0}
+                            onChange={(height) => setSettingsInput((c) => ({...c, height}))}
+                            value={height}
+                            fullWidth
+                        />
+                    </Box>
                 </form>
             </DialogContent>
             <DialogActions>

ui/src/settings.ts

@@ -38,6 +38,8 @@ export interface Settings {
     displayMode: VideoDisplayMode;
     preferCodec?: PreferredCodec;
     framerate: number;
+    width: number;
+    height: number;
 }
 export interface PreferredCodec {
     mimeType: string;
@@ -59,6 +61,8 @@ export const loadSettings = (): Settings => {
     const defaults: Settings = {
         displayMode: VideoDisplayMode.FitToWindow,
         framerate: 30,
+        width: 0,
+        height: 0,
     };
 
     if (settings && typeof settings === 'object') {
@@ -69,6 +73,8 @@ export const loadSettings = (): Settings => {
                 Object.values(VideoDisplayMode).find((mode) => mode === settings.displayMode) ??
                 defaults.displayMode,
             preferCodec: settings.preferCodec ?? CodecDefault,
+            width: settings.width ?? defaults.width,
+            height: settings.height ?? defaults.height,
         };
     }
     return defaults;

ui/src/useRoom.ts

@@ -327,8 +327,13 @@ export const useRoom = (config: UIConfig): UseRoom => {
             return;
         }
         try {
+            const {framerate, width, height} = loadSettings();
             stream.current = await navigator.mediaDevices.getDisplayMedia({
-                video: {frameRate: loadSettings().framerate},
+                video: {
+                    frameRate: framerate,
+                    ...(width > 0 && {width: {max: width}}),
+                    ...(height > 0 && {height: {max: height}}),
+                },
                 audio: {
                     echoCancellation: false,
                     autoGainControl: false,