diff --git a/ui/src/NumberField.tsx b/ui/src/NumberField.tsx index 72bb661..4e03a7b 100644 --- a/ui/src/NumberField.tsx +++ b/ui/src/NumberField.tsx @@ -11,6 +11,7 @@ export const NumberField = ({ value, min, onChange, + helperText, ...props }: NumberFieldProps & Omit) => { const [stringValue, setStringValue] = React.useState(value.toString()); @@ -20,7 +21,7 @@ export const NumberField = ({ { setStringValue(event.target.value); diff --git a/ui/src/SettingDialog.tsx b/ui/src/SettingDialog.tsx index ab454fb..84082e1 100644 --- a/ui/src/SettingDialog.tsx +++ b/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 ( setOpen(false)} maxWidth={'xs'} fullWidth> @@ -111,6 +111,24 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting fullWidth /> + + setSettingsInput((c) => ({...c, width}))} + value={width} + fullWidth + /> + setSettingsInput((c) => ({...c, height}))} + value={height} + fullWidth + /> + diff --git a/ui/src/settings.ts b/ui/src/settings.ts index 2ba8d1b..bb7d601 100644 --- a/ui/src/settings.ts +++ b/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; diff --git a/ui/src/useRoom.ts b/ui/src/useRoom.ts index bebbf29..92c6579 100644 --- a/ui/src/useRoom.ts +++ b/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,