Repository: gradio-app/gradio
Pull request: add  `webcam_height` and `webcam_width` to specify the resolution of the Webcam
## Description

try to add  `webcam_height` and `webcam_width` to specify the resolution of the Webcam.
The following code can be executed correctly.

```python
import gradio as gr

with gr.Blocks() as demo:
    image = gr.Image(label="Input", sources="webcam", webcam_height=720, webcam_width=1280)

demo.launch()
```

However, I don't have a very thorough understanding of resolution, so I didn't see if the image actually changed to a different resolution after modifying the code, which may need help.

Closes: #10027
  


Problem statement:
I want to specify the resolution of the Webcam
- [x] I have searched to see if a similar issue already exists.


**Is your feature request related to a problem? Please describe.**  
Currently the resolution is hardcoded.

gradio/js/image/shared/stream_utils.ts
```gradio/js/image/shared/stream_utils.ts
export async function get_video_stream(
	include_audio: boolean,
	video_source: HTMLVideoElement,
	device_id?: string
): Promise<MediaStream> {
	const size = {
		width: { ideal: 1920 },
		height: { ideal: 1440 }
	};
```

**Describe the solution you'd like**  
It would be great if you could specify the resolution.

```
gradio.Image(label="Input", sources="webcam",webcam_height=720,webcam_width=1280)
```

Hints from issue discussion:
i get it, i'll try for it.

Commit message: add  webcam_height and webcam_width

Patch to review:
diff --git a/gradio/components/image.py b/gradio/components/image.py
index a5fa53cd1e..7ba4da9201 100644
--- a/gradio/components/image.py
+++ b/gradio/components/image.py
@@ -102,6 +102,8 @@ def __init__(
         show_share_button: bool | None = None,
         placeholder: str | None = None,
         show_fullscreen_button: bool = True,
+        webcam_height: int = 1440,
+        webcam_width: int = 1920,
     ):
         """
         Parameters:
@@ -170,6 +172,9 @@ def __init__(
         )
         self.show_fullscreen_button = show_fullscreen_button
         self.placeholder = placeholder
+        self.webcam_height = webcam_height
+        self.webcam_width = webcam_width
+
         super().__init__(
             label=label,
             every=every,
diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte
index cd8b509335..4ddfc7ad96 100644
--- a/js/image/shared/Webcam.svelte
+++ b/js/image/shared/Webcam.svelte
@@ -18,6 +18,7 @@
 		set_available_devices
 	} from "./stream_utils";
 	import type { Base64File } from "./types";
+	import type { int } from "babylonjs";
 
 	let video_source: HTMLVideoElement;
 	let available_video_devices: MediaDeviceInfo[] = [];
@@ -52,6 +53,8 @@
 	export let mode: "image" | "video" = "image";
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
+	export let webcam_height:int;
+	export let webcam_width: int;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let value: FileData | null | Base64File = null;
@@ -80,7 +83,7 @@
 		const target = event.target as HTMLInputElement;
 		const device_id = target.value;
 
-		await get_video_stream(include_audio, video_source, device_id).then(
+		await get_video_stream(include_audio, video_source, webcam_height, webcam_width, device_id).then(
 			async (local_stream) => {
 				stream = local_stream;
 				selected_device =
@@ -94,7 +97,7 @@
 
 	async function access_webcam(): Promise<void> {
 		try {
-			get_video_stream(include_audio, video_source)
+			get_video_stream(include_audio, video_source, webcam_height, webcam_width)
 				.then(async (local_stream) => {
 					webcam_accessed = true;
 					available_video_devices = await get_devices();
diff --git a/js/image/shared/stream_utils.ts b/js/image/shared/stream_utils.ts
index 2583eeec50..183d9fa1fe 100644
--- a/js/image/shared/stream_utils.ts
+++ b/js/image/shared/stream_utils.ts
@@ -18,12 +18,14 @@ export function set_local_stream(
 export async function get_video_stream(
 	include_audio: boolean,
 	video_source: HTMLVideoElement,
-	device_id?: string
+	width?: number,
+	height?: number,
+	device_id?: string,
 ): Promise<MediaStream> {
 	const size = {
-		width: { ideal: 1920 },
-		height: { ideal: 1440 }
-	};
+		width: { ideal: width || 1920 },
+		height: { ideal: height || 1440 }
+};
 
 	const constraints = {
 		video: device_id ? { deviceId: { exact: device_id }, ...size } : size,


Code review comments:
diff_hunk: @@ -102,6 +102,8 @@ def __init__(
         show_share_button: bool | None = None,
         placeholder: str | None = None,
         show_fullscreen_button: bool = True,
+        webcam_height: int = 1440,
path: gradio/components/image.py
text: @user1:
Thanks @author for the nice contribution! 

I prefer we instead just let developers specify the [media constraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints#applying_constraints) as a python dictionary and we pass that into the get_stream function. It will be more flexible that way. We can add docstring examples for controlling the height and width specifically. I think we can call this parameter `webcam_constraints`.

BTW, you also need to specify the new props in `image/Index.svelte` and `image/ImageUploader.svelte` and pass them into the Webcam component.

BTW can you do this for video as well now that you're at it? 😊