mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-04 17:39:23 +08:00
增加静音和闭麦
This commit is contained in:
杍超
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user