diff --git a/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl b/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl index 96d68ca..2626d0d 100644 Binary files a/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl and b/dist/gradio_webrtc-0.0.30.dev0-py3-none-any.whl differ diff --git a/frontend/Index.svelte b/frontend/Index.svelte index efd7f12..a0876cc 100644 --- a/frontend/Index.svelte +++ b/frontend/Index.svelte @@ -81,6 +81,7 @@ on:error={({ detail }) => gradio.dispatch("error", detail)} i18n={gradio.i18n} stream_handler={(...args) => gradio.client.stream(...args)} + {height} {on_change_cb} {rtc_configuration} on:tick={() => gradio.dispatch("tick")} on:error={({ detail }) => gradio.dispatch("error", detail)}> diff --git a/frontend/shared/VideoChat.svelte b/frontend/shared/VideoChat.svelte index 7c8ea52..061a464 100644 --- a/frontend/shared/VideoChat.svelte +++ b/frontend/shared/VideoChat.svelte @@ -25,6 +25,7 @@ const _webrtc_id = Math.random().toString(36).substring(2); export let rtp_params: RTCRtpParameters = {} as RTCRtpParameters; export let button_labels: {start: string, stop: string, waiting: string}; + export let height: number | undefined; export const modify_stream: (state: "open" | "closed" | "waiting") => void = ( state: "open" | "closed" | "waiting" @@ -145,6 +146,8 @@ } }); !selected_video_device && (selected_video_device = available_video_devices[0]) + }).catch(() => { + alert(i18n("image.no_webcam_support")) }); if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { @@ -358,7 +361,7 @@ -
+
{#if !webcam_accessed}
{/if} - {#if stream_state === "closed"}
{/if} -
+ {#if stream_state === "closed"}
{/if} +
{#each available_video_devices as device, i}
handle_device_change(device.deviceId)}>{device.label} {#if selected_video_device && device.deviceId === selected_video_device.deviceId}
@@ -411,8 +414,8 @@ {#if micMuted} {:else} {/if} - {#if stream_state === "closed"}
{/if} -
+ {#if stream_state === "closed"}
{/if} +
{#each available_audio_devices as device, i}
handle_device_change(device.deviceId)}>{device.label} {#if selected_audio_device && device.deviceId === selected_audio_device.deviceId}
@@ -468,7 +471,7 @@ .wrap { background-image: url(./background.png); - height: 90vh; + height: calc(max(80vh, 100%)); position: relative; .video-container { position: relative; @@ -518,7 +521,7 @@ .actions { position: absolute; z-index: 2; - left:10px; + left:calc(100% - 60px); .action-group { border-radius: 12px; background: rgba(88, 87, 87, 0.5); @@ -537,14 +540,18 @@ .corner { position: absolute; - right: 3px; - bottom: 3px; - width: 6px; - height: 6px; - border-top: 3px transparent solid; - border-left: 3px transparent solid; - border-bottom: 3px #fff solid; - border-right: 3px #fff solid; + right: 0px; + bottom: 0px; + padding: 3px; + .corner-inner { + width: 6px; + height: 6px; + border-top: 3px transparent solid; + border-left: 3px transparent solid; + border-bottom: 3px #fff solid; + border-right: 3px #fff solid; + } + } // &:hover { // .selectors { diff --git a/pyproject.toml b/pyproject.toml index 23dfc0c..c423115 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -16,7 +16,7 @@ requires-python = ">=3.10" authors = [{ name = "Freddy Boulton", email = "YOUREMAIL@domain.com" }] keywords = ["gradio-custom-component", "gradio-template-Video", "streaming", "webrtc", "realtime"] # Add dependencies here -dependencies = ["gradio>=4.0,<6.0", "aiortc", "numpy<3.0,>=1.0"] +dependencies = ["gradio>=4.0,<6.0", "aiortc", "numpy<2.2,>=1.0"] classifiers = [ 'Development Status :: 3 - Alpha', 'Operating System :: OS Independent',