feat: add show_local_video param

backend/gradio_webrtc/webrtc.py

@@ -703,6 +703,7 @@ class WebRTC(Component):
         time_limit: float | None = None,
         mode: Literal["send-receive", "receive", "send"] = "send-receive",
         modality: Literal["video", "audio", "audio-video"] = "video",
+        show_local_video: bool = False,
         rtp_params: dict[str, Any] | None = None,
         icon: str | None = None,
         icon_button_color: str | None = None,
@@ -734,6 +735,7 @@ class WebRTC(Component):
             time_limit: Maximum duration in seconds for recording.
             mode: WebRTC mode - "send-receive", "receive", or "send".
             modality: Type of media - "video" or "audio".
+            show_local_video: in send-receive mode and audio-video modality, whether to show the local video stream.
             rtp_params: See https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender/setParameters. If you are changing the video resolution, you can set this to {"degradationPreference": "maintain-framerate"} to keep the frame rate consistent.
             icon: Icon to display on the button instead of the wave animation. The icon should be a path/url to a .svg/.png/.jpeg file.
             icon_button_color: Color of the icon button. Default is var(--color-accent) of the demo theme.
@@ -748,6 +750,7 @@ class WebRTC(Component):
         self.rtc_configuration = rtc_configuration
         self.mode = mode
         self.modality = modality
+        self.show_local_video = show_local_video
         self.icon_button_color = icon_button_color
         self.pulse_color = pulse_color
         self.rtp_params = rtp_params or {}

demo/app.py

@@ -100,6 +100,7 @@ with gr.Blocks(css=css) as demo:
             label="Local",
             modality="audio-video",
             mode="send-receive",
+            show_local_video=True,
             elem_id="video-source",
         )
         webrtc.stream(

frontend/Index.svelte

@@ -33,6 +33,7 @@
 	export let time_limit: number | null = null;
 	export let modality: "video" | "audio" | "audio-video" = "video";
 	export let mode: "send-receive" | "receive" | "send" = "send-receive";
+	export let show_local_video = false;
 	export let rtp_params: RTCRtpParameters = {} as RTCRtpParameters;
 	export let track_constraints: MediaTrackConstraints = {};
 	export let icon: string | undefined = undefined;
@@ -107,6 +108,7 @@
 			{show_label}
 			active_source={"webcam"}
 			include_audio={modality === "audio-video"}
+			show_local_video={mode === "send-receive" && modality === "audio-video" && show_local_video}
 			{server}
 			{rtc_configuration}
 			{time_limit}

frontend/shared/InteractiveVideo.svelte

@@ -12,6 +12,7 @@
 	export let label: string | undefined = undefined;
 	export let show_label = true;
 	export let include_audio: boolean;
+	export let show_local_video: boolean;
 	export let i18n: I18nFormatter;
 	export let active_source: "webcam" | "upload" = "webcam";
 	export let handle_reset_value: () => void = () => {};
@@ -56,6 +57,7 @@
 	<Webcam
 		{rtc_configuration}
 		{include_audio}
+		{show_local_video}
 		{time_limit}
 		{track_constraints}
 		{mode}

frontend/shared/Webcam.svelte

@@ -62,9 +62,9 @@
 	};
 
 	export let include_audio: boolean;
+	export let show_local_video: boolean;
 	export let i18n: I18nFormatter;
 
-	$: isKeepLocal = mode === "send-receive" && include_audio
 	let volumeMuted = false
 	let micMuted = false
 	const handel_volume_mute = () => {
@@ -98,7 +98,7 @@
 		} else {
 			videoDeviceId = device_id
 		}
-		const node = isKeepLocal ? local_video_source : video_source; 
+		const node = show_local_video ? local_video_source : video_source; 
 		await get_video_stream(audioDeviceId ? {
 				deviceId: { exact: audioDeviceId },
 		}: include_audio, node, videoDeviceId, track_constraints).then(
@@ -121,7 +121,7 @@
 
 	async function access_webcam(): Promise<void> {
 		try {
-			const node = isKeepLocal ? local_video_source : video_source; 
+			const node = show_local_video ? local_video_source : video_source; 
 			get_video_stream(include_audio, node, null, track_constraints)
 				.then(async (local_stream) => {
 					webcam_accessed = true;
@@ -257,7 +257,7 @@
 	{/if}
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<!-- need to suppress for video streaming https://github.com/sveltejs/svelte/issues/5967 -->
-	 {#if isKeepLocal}
+	 {#if show_local_video}
 	 	<div class="video-wrap">
         	<video
             	bind:this={local_video_source}