mirror of
https://github.com/HumanAIGC-Engineering/gradio-webrtc.git
synced 2026-02-05 18:09:23 +08:00
Rebrand to FastRTC (#60)
* Add code * add code * add code * Rename messages * rename * add code * Add demo * docs + demos + bug fixes * add code * styles * user guide * Styles * Add code * misc docs updates * print nit * whisper + pr * url for images * whsiper update * Fix bugs * remove demo files * version number * Fix pypi readme * Fix * demos * Add llama code editor * Update llama code editor and object detection cookbook * Add more cookbook demos * add code * Fix links for PR deploys * add code * Fix the install * add tts * TTS docs * Typo * Pending bubbles for reply on pause * Stream redesign (#63) * better error handling * Websocket error handling * add code --------- Co-authored-by: Freddy Boulton <freddyboulton@hf-freddy.local> * remove docs from dist * Some docs typos * more typos * upload changes + docs * docs * better phone * update docs * add code * Make demos better * fix docs + websocket start_up * remove mention of FastAPI app * fastphone tweaks * add code * ReplyOnStopWord fixes * Fix cookbook * Fix pypi readme * add code * bump versions * sambanova cookbook * Fix tags * Llm voice chat * kyutai tag * Add error message to all index.html * STT module uses Moonshine * Not required from typing extensions * fix llm voice chat * Add vpn warning * demo fixes * demos * Add more ui args and gemini audio-video * update cookbook * version 9 --------- Co-authored-by: Freddy Boulton <freddyboulton@hf-freddy.local>
This commit is contained in:
Freddy Boulton
GitHub
@@ -1,14 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount} from "svelte";
|
||||
import {
|
||||
BlockLabel,
|
||||
Empty
|
||||
} from "@gradio/atoms";
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
import { BlockLabel, Empty } from "@gradio/atoms";
|
||||
import { Video } from "@gradio/icons";
|
||||
|
||||
import { start, stop } from "./webrtc_utils";
|
||||
|
||||
|
||||
export let value: string | null = null;
|
||||
export let label: string | undefined = undefined;
|
||||
export let show_label = true;
|
||||
@@ -18,17 +14,17 @@
|
||||
offer: (body: any) => Promise<any>;
|
||||
};
|
||||
|
||||
let video_element: HTMLVideoElement;
|
||||
let video_element: HTMLVideoElement;
|
||||
|
||||
let _webrtc_id = Math.random().toString(36).substring(2);
|
||||
|
||||
let pc: RTCPeerConnection;
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
error: string;
|
||||
tick: undefined;
|
||||
}>();
|
||||
|
||||
|
||||
let stream_state = "closed";
|
||||
|
||||
onMount(() => {
|
||||
@@ -36,39 +32,52 @@
|
||||
if (stream_state == "open") {
|
||||
dispatch("tick");
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
)
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
$: if( value === "start_webrtc_stream") {
|
||||
$: if (value === "start_webrtc_stream") {
|
||||
_webrtc_id = Math.random().toString(36).substring(2);
|
||||
value = _webrtc_id;
|
||||
pc = new RTCPeerConnection(rtc_configuration);
|
||||
pc.addEventListener("connectionstatechange",
|
||||
async (event) => {
|
||||
switch(pc.connectionState) {
|
||||
case "connected":
|
||||
console.log("connected");
|
||||
stream_state = "open";
|
||||
break;
|
||||
case "disconnected":
|
||||
console.log("closed");
|
||||
stop(pc);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
pc.addEventListener("connectionstatechange", async (event) => {
|
||||
switch (pc.connectionState) {
|
||||
case "connected":
|
||||
stream_state = "open";
|
||||
break;
|
||||
case "disconnected":
|
||||
stop(pc);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
)
|
||||
start(null, pc, video_element, server.offer, _webrtc_id, "video", on_change_cb).then((connection) => {
|
||||
pc = connection;
|
||||
}).catch(() => {
|
||||
console.log("catching")
|
||||
dispatch("error", "Too many concurrent users. Come back later!");
|
||||
});
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
// @ts-ignore
|
||||
on_change_cb({ type: "connection_timeout" });
|
||||
}, 5000);
|
||||
|
||||
start(
|
||||
null,
|
||||
pc,
|
||||
video_element,
|
||||
server.offer,
|
||||
_webrtc_id,
|
||||
"video",
|
||||
on_change_cb,
|
||||
)
|
||||
.then((connection) => {
|
||||
clearTimeout(timeoutId);
|
||||
pc = connection;
|
||||
})
|
||||
.catch(() => {
|
||||
clearTimeout(timeoutId);
|
||||
dispatch(
|
||||
"error",
|
||||
"Too many concurrent users. Come back later!",
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
|
||||
@@ -78,28 +87,26 @@
|
||||
{/if}
|
||||
<div class="wrap">
|
||||
<video
|
||||
class:hidden={value === "__webrtc_value__"}
|
||||
bind:this={video_element}
|
||||
autoplay={true}
|
||||
on:loadeddata={dispatch.bind(null, "loadeddata")}
|
||||
on:click={dispatch.bind(null, "click")}
|
||||
on:play={dispatch.bind(null, "play")}
|
||||
on:pause={dispatch.bind(null, "pause")}
|
||||
on:ended={dispatch.bind(null, "ended")}
|
||||
on:mouseover={dispatch.bind(null, "mouseover")}
|
||||
on:mouseout={dispatch.bind(null, "mouseout")}
|
||||
on:focus={dispatch.bind(null, "focus")}
|
||||
on:blur={dispatch.bind(null, "blur")}
|
||||
on:load
|
||||
data-testid={$$props["data-testid"]}
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
class:hidden={value === "__webrtc_value__"}
|
||||
bind:this={video_element}
|
||||
autoplay={true}
|
||||
on:loadeddata={dispatch.bind(null, "loadeddata")}
|
||||
on:click={dispatch.bind(null, "click")}
|
||||
on:play={dispatch.bind(null, "play")}
|
||||
on:pause={dispatch.bind(null, "pause")}
|
||||
on:ended={dispatch.bind(null, "ended")}
|
||||
on:mouseover={dispatch.bind(null, "mouseover")}
|
||||
on:mouseout={dispatch.bind(null, "mouseout")}
|
||||
on:focus={dispatch.bind(null, "focus")}
|
||||
on:blur={dispatch.bind(null, "blur")}
|
||||
on:load
|
||||
data-testid={$$props["data-testid"]}
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user