add webcam_height and webcam_width to specify the resolution of the Webcam (#10032)

* add  webcam_height and webcam_width

* update

* A dictionary that allows developers to specify custom media constraints for the webcam stream. This parameter provides flexibility to control the video stream's properties, such as resolution, frame rate, and facing mode (e.g., front or rear camera on mobile devices). Overrides the default height and width settings when provided.

* add changeset

* add code

* Add code

* add changeset

* Fix tests

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>

.changeset/sharp-towns-play.md

@@ -0,0 +1,7 @@
+---
+"@gradio/image": minor
+"@gradio/video": minor
+"gradio": minor
+---
+
+feat:add  `webcam_height` and `webcam_width` to specify the resolution of the Webcam

demo/webcam_constraints/requirements.txt

@@ -0,0 +1 @@
+opencv-python

demo/webcam_constraints/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: webcam_constraints"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio opencv-python"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import cv2\n", "\n", "def get_video_shape(video):\n", "    cap = cv2.VideoCapture(video)\n", "    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))\n", "    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))\n", "    cap.release()\n", "    return {\"width\": width, \"height\": height}\n", "\n", "def image_mod(image):\n", "    width, height = image.size\n", "    return {\"width\": width, \"height\": height}\n", "\n", "\n", "video = gr.Interface(\n", "    fn=get_video_shape,\n", "    inputs=gr.Video(webcam_constraints={\"video\": {\"width\": 800, \"height\": 600}}, sources=\"webcam\"),\n", "    outputs=gr.JSON()\n", ")\n", "\n", "image = gr.Interface(\n", "        image_mod,\n", "        gr.Image(type=\"pil\", webcam_constraints={\"video\": {\"width\": 800, \"height\": 600}}, sources=\"webcam\"),\n", "        gr.Json())\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"\"\"# Webcam Constraints\n", "                The webcam constraints are set to 800x600 with the following syntax:\n", "                ```python\n", "                gr.Video(webcam_constraints={\"video\": {\"width\": 800, \"height\": 600}}, sources=\"webcam\")\n", "                ```\n", "                \"\"\")\n", "    with gr.Tabs():\n", "        with gr.Tab(\"Video\"):\n", "            video.render()\n", "        with gr.Tab(\"Image\"):\n", "            image.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/webcam_constraints/run.py

@@ -0,0 +1,41 @@
+import gradio as gr
+import cv2
+
+def get_video_shape(video):
+    cap = cv2.VideoCapture(video)
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    cap.release()
+    return {"width": width, "height": height}
+
+def image_mod(image):
+    width, height = image.size
+    return {"width": width, "height": height}
+
+
+video = gr.Interface(
+    fn=get_video_shape,
+    inputs=gr.Video(webcam_constraints={"video": {"width": 800, "height": 600}}, sources="webcam"),
+    outputs=gr.JSON()
+)
+
+image = gr.Interface(
+        image_mod,
+        gr.Image(type="pil", webcam_constraints={"video": {"width": 800, "height": 600}}, sources="webcam"),
+        gr.Json())
+
+with gr.Blocks() as demo:
+    gr.Markdown("""# Webcam Constraints
+                The webcam constraints are set to 800x600 with the following syntax:
+                ```python
+                gr.Video(webcam_constraints={"video": {"width": 800, "height": 600}}, sources="webcam")
+                ```
+                """)
+    with gr.Tabs():
+        with gr.Tab("Video"):
+            video.render()
+        with gr.Tab("Image"):
+            image.render()
+
+if __name__ == "__main__":
+    demo.launch()

gradio/components/image.py

@@ -102,6 +102,7 @@ class Image(StreamingInput, Component):
         show_share_button: bool | None = None,
         placeholder: str | None = None,
         show_fullscreen_button: bool = True,
+        webcam_constraints: dict[str, Any] | None = None,
     ):
         """
         Parameters:
@@ -131,6 +132,7 @@ class Image(StreamingInput, Component):
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
             placeholder: Custom text for the upload area. Overrides default upload messages when provided. Accepts new lines and `#` to designate a heading.
             show_fullscreen_button: If True, will show a fullscreen icon in the corner of the component that allows user to view the image in fullscreen mode. If False, icon does not appear.
+            webcam_constraints: A dictionary that allows developers to specify custom media constraints for the webcam stream. This parameter provides flexibility to control the video stream's properties, such as resolution and front or rear camera on mobile devices. See $demo/webcam_constraints
         """
         self.format = format
         self.mirror_webcam = mirror_webcam
@@ -170,6 +172,8 @@ class Image(StreamingInput, Component):
         )
         self.show_fullscreen_button = show_fullscreen_button
         self.placeholder = placeholder
+        self.webcam_constraints = webcam_constraints
+
         super().__init__(
             label=label,
             every=every,

gradio/components/video.py

@@ -98,6 +98,7 @@ class Video(StreamingOutput, Component):
         loop: bool = False,
         streaming: bool = False,
         watermark: str | Path | None = None,
+        webcam_constraints: dict[str, Any] | None = None,
     ):
         """
         Parameters:
@@ -129,6 +130,7 @@ class Video(StreamingOutput, Component):
             loop: if True, the video will loop when it reaches the end and continue playing from the beginning.
             streaming: when used set as an output, takes video chunks yielded from the backend and combines them into one streaming video output. Each chunk should be a video file with a .ts extension using an h.264 encoding. Mp4 files are also accepted but they will be converted to h.264 encoding.
             watermark: an image file to be included as a watermark on the video. The image is not scaled and is displayed on the bottom right of the video. Valid formats for the image are: jpeg, png.
+            webcam_constraints: A dictionary that allows developers to specify custom media constraints for the webcam stream. This parameter provides flexibility to control the video stream's properties, such as resolution and front or rear camera on mobile devices. See $demo/webcam_constraints
         """
         valid_sources: list[Literal["upload", "webcam"]] = ["upload", "webcam"]
         if sources is None:
@@ -165,6 +167,7 @@ class Video(StreamingOutput, Component):
         self.max_length = max_length
         self.streaming = streaming
         self.watermark = watermark
+        self.webcam_constraints = webcam_constraints
         super().__init__(
             label=label,
             every=every,

gradio/templates.py

@@ -392,6 +392,7 @@ class PlayableVideo(components.Video):
         loop: bool = False,
         streaming: bool = False,
         watermark: str | Path | None = None,
+        webcam_constraints: dict[str, dict[str, int | str]] | None = None,
     ):
         sources = ["upload"]
         super().__init__(
@@ -423,6 +424,7 @@ class PlayableVideo(components.Video):
             loop=loop,
             streaming=streaming,
             watermark=watermark,
+            webcam_constraints=webcam_constraints,
         )
 
 

js/image/Index.svelte

@@ -65,6 +65,7 @@
 	export let placeholder: string | undefined = undefined;
 	export let show_fullscreen_button: boolean;
 	export let input_ready: boolean;
+	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
 	let uploading = false;
 	$: input_ready = !uploading;
 	export let gradio: Gradio<{
@@ -218,6 +219,7 @@
 			{stream_every}
 			bind:modify_stream={_modify_stream}
 			bind:set_time_limit
+			{webcam_constraints}
 			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.client.upload(...args)}

js/image/shared/ImageUploader.svelte

@@ -42,6 +42,8 @@
 	export let uploading = false;
 	export let active_source: source_type = null;
 
+	export let webcam_constraints: { [key: string]: any } | undefined = undefined;
+
 	function handle_upload({ detail }: CustomEvent<FileData>): void {
 		// only trigger streaming event if streaming
 		if (!streaming) {
@@ -205,6 +207,7 @@
 				{upload}
 				bind:modify_stream
 				bind:set_time_limit
+				{webcam_constraints}
 			/>
 		{:else if value !== null && !streaming}
 			<!-- svelte-ignore a11y-click-events-have-key-events-->

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,7 @@
 	export let mode: "image" | "video" = "image";
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
+	export let webcam_constraints: { [key: string]: any } | null = null;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let value: FileData | null | Base64File = null;
@@ -80,21 +82,24 @@
 		const target = event.target as HTMLInputElement;
 		const device_id = target.value;
 
-		await get_video_stream(include_audio, video_source, device_id).then(
-			async (local_stream) => {
-				stream = local_stream;
-				selected_device =
-					available_video_devices.find(
-						(device) => device.deviceId === device_id
-					) || null;
-				options_open = false;
-			}
-		);
+		await get_video_stream(
+			include_audio,
+			video_source,
+			webcam_constraints,
+			device_id
+		).then(async (local_stream) => {
+			stream = local_stream;
+			selected_device =
+				available_video_devices.find(
+					(device) => device.deviceId === device_id
+				) || null;
+			options_open = false;
+		});
 	};
 
 	async function access_webcam(): Promise<void> {
 		try {
-			get_video_stream(include_audio, video_source)
+			get_video_stream(include_audio, video_source, webcam_constraints)
 				.then(async (local_stream) => {
 					webcam_accessed = true;
 					available_video_devices = await get_devices();

js/image/shared/stream_utils.ts

@@ -18,16 +18,17 @@ export function set_local_stream(
 export async function get_video_stream(
 	include_audio: boolean,
 	video_source: HTMLVideoElement,
+	webcam_constraints: { [key: string]: any } | null,
 	device_id?: string
 ): Promise<MediaStream> {
-	const size = {
-		width: { ideal: 1920 },
-		height: { ideal: 1440 }
-	};
-
-	const constraints = {
-		video: device_id ? { deviceId: { exact: device_id }, ...size } : size,
-		audio: include_audio
+	const constraints: MediaStreamConstraints = {
+		video: device_id
+			? { deviceId: { exact: device_id }, ...webcam_constraints?.video }
+			: webcam_constraints?.video || {
+					width: { ideal: 1920 },
+					height: { ideal: 1440 }
+				},
+		audio: include_audio && (webcam_constraints?.audio ?? true) // Defaults to true if not specified
 	};
 
 	return navigator.mediaDevices

js/video/Index.svelte

@@ -28,6 +28,7 @@
 	export let loading_status: LoadingStatus;
 	export let height: number | undefined;
 	export let width: number | undefined;
+	export let webcam_constraints: { [key: string]: any } | null = null;
 
 	export let container = false;
 	export let scale: number | null = null;
@@ -203,6 +204,7 @@
 			{autoplay}
 			{root}
 			{loop}
+			{webcam_constraints}
 			{handle_reset_value}
 			on:clear={() => gradio.dispatch("clear")}
 			on:play={() => gradio.dispatch("play")}

js/video/shared/InteractiveVideo.svelte

@@ -33,6 +33,7 @@
 	export let stream_handler: Client["stream"];
 	export let loop: boolean;
 	export let uploading = false;
+	export let webcam_constraints: { [key: string]: any } | null = null;
 
 	let has_change_history = false;
 
@@ -99,6 +100,7 @@
 					{root}
 					{mirror_webcam}
 					{include_audio}
+					{webcam_constraints}
 					mode="video"
 					on:error
 					on:capture={handle_capture}

test/components/test_image.py

@@ -57,6 +57,7 @@ class TestImage:
             "streamable": False,
             "type": "pil",
             "placeholder": None,
+            "webcam_constraints": None,
         }
         assert image_input.preprocess(None) is None
         image_input = gr.Image()

test/components/test_video.py

@@ -70,6 +70,7 @@ class TestVideo:
             "loop": False,
             "streaming": False,
             "watermark": None,
+            "webcam_constraints": None,
         }
         assert video_input.preprocess(None) is None
         video_input = gr.Video(format="avi")