增加静音和闭麦

2026-02-04 17:39:23 +08:00 · 2025-01-21 17:03:04 +08:00
parent 0d6466541c
commit 4b1727021d
2 changed files with 74 additions and 13 deletions
--- a/demo/app.py
+++ b/demo/app.py
@@ -38,7 +38,7 @@ class GeminiHandler(AsyncAudioVideoStreamHandler):
            expected_layout,
            output_sample_rate,
            output_frame_size,
-            input_sample_rate=16000,
+            input_sample_rate=24000,
        )
        self.audio_queue = asyncio.Queue()
        self.video_queue = asyncio.Queue()
@@ -69,13 +69,6 @@ class GeminiHandler(AsyncAudioVideoStreamHandler):
    async def video_emit(self) -> VideoEmitType:
        return await self.video_queue.get()

-    async def generator(self):
-        while not self.quit.is_set():
-            turn = self.session.receive()
-            async for response in turn:
-                if data := response.data:
-                    yield data
-
    async def receive(self, frame: tuple[int, np.ndarray]) -> None:
        frame_size, array = frame
        self.audio_queue.put_nowait(array)
@@ -95,19 +88,19 @@ class GeminiHandler(AsyncAudioVideoStreamHandler):


 css = """
-#video-source {max-width: 600px !important; max-height: 600 !important;}
+#video-source {max-width: 1500px !important; max-height: 600px !important;}
 """

 with gr.Blocks(css=css) as demo:

    with gr.Column():
        webrtc = WebRTC(
-            label="Video Chat",
+            width=1500,
+            height=500,
+            label="Local",
            modality="audio-video",
            mode="send-receive",
            elem_id="video-source",
-            pulse_color="rgb(35, 157, 225)",
-            icon_button_color="rgb(35, 157, 225)",
        )
        webrtc.stream(
            GeminiHandler(),
--- a/frontend/shared/Webcam.svelte
+++ b/frontend/shared/Webcam.svelte
@@ -6,7 +6,9 @@
 		Square,
 		DropdownArrow,
 		Spinner,
-        Microphone as Mic
+		Microphone as Mic,
+		VolumeMuted,
+		VolumeHigh
 	} from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { StreamingBar } from "@gradio/statustracker";
@@ -63,6 +65,18 @@
 	export let i18n: I18nFormatter;

 	let isKeepLocal = mode === "send-receive" && include_audio
+	let volumeMuted = false
+	let micMuted = false
+	const handel_volume_mute = () => {
+		volumeMuted = !volumeMuted
+	}
+	const handle_mic_mute = () => {
+		micMuted = !micMuted
+		stream.getTracks().forEach(track => {
+			if (track.kind.includes('audio'))
+			track.enabled = !micMuted
+		})
+	}

 	const dispatch = createEventDispatcher<{
 		tick: undefined;
@@ -258,6 +272,7 @@
            	class:flip={stream_state != "open" ||
                	(stream_state === "open" && include_audio)}
            	autoplay={true}
+							muted={volumeMuted}
            	playsinline={true}
        	/>
    	</div>
@@ -267,6 +282,7 @@
 	 		class:hide={!webcam_accessed}
 	 		class:flip={(stream_state != "open") || (stream_state === "open" && include_audio)}
 	 		autoplay={true}
+			muted={volumeMuted}
 	 		playsinline={true}
 		/>
 	 {/if}
@@ -319,7 +335,35 @@
 					<DropdownArrow />
 				</button>
 			{/if}
+			{#if include_audio === true && stream_state === "open"}
+			<div class="action-wrap">
+				<button
+					class="icon"
+					on:click={handle_mic_mute}
+					aria-label="select input source"
+				>
+					{#if !micMuted}
+					<svg t="1737450006667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12366" width="200" height="200"><path d="M285.216 562.9408a248.64 248.64 0 0 0 37.6448 59.7312 249.008 249.008 0 0 0 52.5056 46.64 245.5232 245.5232 0 0 0 64.0672 30.288c23.52 7.2032 47.712 10.8032 72.5664 10.8032 24.8544 0 49.0432-3.6 72.5664-10.8032a245.5296 245.5296 0 0 0 64.0672-30.288 248.896 248.896 0 0 0 52.5056-46.64 248.5888 248.5888 0 0 0 37.648-59.7312 32 32 0 1 1 58.4256 26.1184 312.2432 312.2432 0 0 1-47.2832 75.0336 312.6752 312.6752 0 0 1-65.936 58.5664 309.168 309.168 0 0 1-80.688 38.1376C573.6768 769.8688 543.2416 774.4 512 774.4c-31.2416 0-61.6768-4.5344-91.3056-13.6064a309.184 309.184 0 0 1-80.688-38.1376 312.6912 312.6912 0 0 1-65.936-58.5664 312.32 312.32 0 0 1-47.2832-75.0336 32 32 0 1 1 58.4256-26.1184z" p-id="12367"></path><path d="M339.4304 219.68a183.6896 183.6896 0 0 1 41.3312-62.9184 183.6896 183.6896 0 0 1 62.9184-41.3312A183.9712 183.9712 0 0 1 512 102.4a183.9712 183.9712 0 0 1 68.32 13.0304 183.6896 183.6896 0 0 1 62.9184 41.3312 183.696 183.696 0 0 1 41.3312 62.9184A183.9616 183.9616 0 0 1 697.6 288v198.4a183.952 183.952 0 0 1-13.0304 68.3168 183.7088 183.7088 0 0 1-41.3312 62.9216 183.6896 183.6896 0 0 1-62.9184 41.3312A183.9616 183.9616 0 0 1 512 672a183.9616 183.9616 0 0 1-68.32-13.0304 183.6896 183.6896 0 0 1-62.9184-41.3312 183.7024 183.7024 0 0 1-41.3312-62.9216A183.9616 183.9616 0 0 1 326.4 486.4V288a183.9712 183.9712 0 0 1 13.0304-68.32z m86.5856 352.704a120.3392 120.3392 0 0 0 41.2224 27.0784A120.512 120.512 0 0 0 512 608a120.512 120.512 0 0 0 44.7616-8.5376 120.3392 120.3392 0 0 0 41.2224-27.0784 120.3584 120.3584 0 0 0 27.0784-41.2224A120.544 120.544 0 0 0 633.6 486.4V288c0-15.4624-2.848-30.384-8.5376-44.7616a120.3552 120.3552 0 0 0-27.0784-41.2224 120.3552 120.3552 0 0 0-41.2224-27.0784A120.5344 120.5344 0 0 0 512 166.4c-15.4624 0-30.384 2.848-44.7616 8.5376a120.3552 120.3552 0 0 0-41.2224 27.0784 120.3552 120.3552 0 0 0-27.0784 41.2224A120.5312 120.5312 0 0 0 390.4 288v198.4c0 15.4624 2.848 30.384 8.5376 44.7616a120.3584 120.3584 0 0 0 27.0784 41.2224zM512 710.4c17.6736 0 32 14.3264 32 32v147.2c0 17.6736-14.3264 32-32 32s-32-14.3264-32-32v-147.2c0-17.6736 14.3264-32 32-32z" p-id="12368"></path><path d="M352 889.6c0-17.6736 14.3264-32 32-32h256c17.6736 0 32 14.3264 32 32s-14.3264 32-32 32h-256c-17.6736 0-32-14.3264-32-32z" p-id="12369"></path></svg>					
+					{:else}
+					<svg t="1737450020317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12521" width="200" height="200"><path d="M512 710.4c17.6736 0 32 14.3264 32 32v147.2c0 17.6736-14.3264 32-32 32s-32-14.3264-32-32v-147.2c0-17.6736 14.3264-32 32-32z" p-id="12522"></path><path d="M352 889.6c0-17.6736 14.3264-32 32-32h256c17.6736 0 32 14.3264 32 32s-14.3264 32-32 32h-256c-17.6736 0-32-14.3264-32-32zM217.3728 806.6272c-12.496-12.496-12.496-32.7584 0-45.2544L760.432 218.3136c12.496-12.496 32.7552-12.496 45.2544 0 12.496 12.4992 12.496 32.7584 0 45.2544L262.624 806.6272c-12.496 12.496-32.7584 12.496-45.2544 0zM414.8384 690.6208a246.336 246.336 0 0 0 24.5952 8.9792c23.52 7.2032 47.712 10.8032 72.5664 10.8032 24.8544 0 49.0432-3.6 72.5664-10.8032a245.5296 245.5296 0 0 0 64.0672-30.288 248.896 248.896 0 0 0 52.5056-46.64 248.5888 248.5888 0 0 0 37.648-59.7312 32 32 0 1 1 58.4256 26.1184 312.2432 312.2432 0 0 1-47.2832 75.0336 312.6752 312.6752 0 0 1-65.936 58.5664 309.168 309.168 0 0 1-80.688 38.1376C573.6768 769.8688 543.2416 774.4 512 774.4c-31.2416 0-61.6768-4.5344-91.3056-13.6064a308.7872 308.7872 0 0 1-53.8368-22.1984l47.9808-47.9776z m-140.768-26.528a312.32 312.32 0 0 1-47.2832-75.0336 32 32 0 1 1 58.4256-26.1184 248.544 248.544 0 0 0 36.2784 58.1088L276.096 666.4512c-0.6784-0.784-1.3504-1.568-2.0224-2.3584z" p-id="12523"></path><path d="M339.4304 219.68a183.6896 183.6896 0 0 1 41.3312-62.9184 183.6896 183.6896 0 0 1 62.9184-41.3312A183.9712 183.9712 0 0 1 512 102.4a183.9712 183.9712 0 0 1 68.32 13.0304 183.6896 183.6896 0 0 1 62.9184 41.3312 183.696 183.696 0 0 1 41.3312 62.9184 185.6512 185.6512 0 0 1 8.9248 29.3664L633.6 308.9408V288c0-15.4624-2.848-30.384-8.5376-44.7616a120.3552 120.3552 0 0 0-27.0784-41.2224 120.3552 120.3552 0 0 0-41.2224-27.0784A120.5344 120.5344 0 0 0 512 166.4c-15.4624 0-30.384 2.848-44.7616 8.5376a120.3552 120.3552 0 0 0-41.2224 27.0784 120.3552 120.3552 0 0 0-27.0784 41.2224A120.5312 120.5312 0 0 0 390.4 288v198.4c0 15.4624 2.848 30.384 8.5376 44.7616 1.1648 2.9472 2.432 5.824 3.8048 8.6368l-46.9344 46.9344a185.44 185.44 0 0 1-16.3776-32.016A183.9616 183.9616 0 0 1 326.4 486.4V288a183.9712 183.9712 0 0 1 13.0304-68.32zM697.6 486.4a183.952 183.952 0 0 1-13.0304 68.3168 183.7088 183.7088 0 0 1-41.3312 62.9216 183.6896 183.6896 0 0 1-62.9184 41.3312A183.9616 183.9616 0 0 1 512 672a183.872 183.872 0 0 1-66.2976-12.2432l52.5248-52.5248c4.544 0.512 9.1328 0.768 13.7728 0.768a120.512 120.512 0 0 0 44.7616-8.5376 120.3392 120.3392 0 0 0 41.2224-27.0784 120.3584 120.3584 0 0 0 27.0784-41.2224A120.544 120.544 0 0 0 633.6 486.4v-14.5408l64-64V486.4z" p-id="12524"></path></svg>					
+					{/if}
+				</button>
+				<button
+					class="icon"
+					on:click={handel_volume_mute}
+					aria-label="select input source"
+				>
+					{#if volumeMuted}
+					<VolumeMuted/>
+					{:else}
+					<VolumeHigh/>
+					{/if}
+				</button>
+			</div>
+	
+			{/if}
 		</div>
+
 		{#if options_open && selected_device}
 			<div
 				class="select-container"
@@ -404,6 +448,11 @@
 		object-fit: cover;
 	}

+	.video-wrap video {
+		width: 50%;
+		height: 50%;
+	}
+
 	.button-wrap {
 		position: absolute;
 		background-color: var(--block-background-fill);
@@ -420,6 +469,25 @@
 		color: var(--button-secondary-text-color);
 	}

+	.action-wrap {
+		position: absolute;
+		left: 100%;
+		margin-left: 20px;
+		top: 0;
+		background-color: var(--block-background-fill);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-xl);
+		padding: var(--size-1-5);
+		display: flex;
+		box-shadow: var(--shadow-drop-lg);
+		border-radius: var(--radius-xl);
+		line-height: var(--size-3);
+		color: var(--button-secondary-text-color);
+	}
+	.action-wrap .icon+.icon {
+		margin-left: 10px;
+	}
+
 	.icon-with-text {
 		min-width: var(--size-16);
 		align-items: center;