diff --git a/backend/gradio_webrtc/webrtc.py b/backend/gradio_webrtc/webrtc.py index a722ca3..87d7755 100644 --- a/backend/gradio_webrtc/webrtc.py +++ b/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 {} diff --git a/demo/app.py b/demo/app.py index 068a56f..9b0b4a6 100644 --- a/demo/app.py +++ b/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( diff --git a/frontend/Index.svelte b/frontend/Index.svelte index 8c996e5..aedac63 100644 --- a/frontend/Index.svelte +++ b/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} diff --git a/frontend/shared/InteractiveVideo.svelte b/frontend/shared/InteractiveVideo.svelte index bf07ece..9af1bdf 100644 --- a/frontend/shared/InteractiveVideo.svelte +++ b/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 @@ { @@ -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 { 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} - {#if isKeepLocal} + {#if show_local_video}