deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-05 18:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

add code

Browse Source
This commit is contained in:
freddyaboulton
2024-10-28 09:59:08 -07:00
parent c051736fbb
commit d1c43edcd4
10 changed files with 225 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/Index.svelte
View File

@@ -34,6 +34,10 @@
export let mode: "send-receive" | "receive" = "send-receive";
export let track_constraints: MediaTrackConstraints = {};
const on_change_cb = () => {
gradio.dispatch("state_change");
}
let dragging = false;
$: console.log("value", value);
@@ -63,6 +67,7 @@
{#if mode == "receive" && modality === "video"}
<StaticVideo
bind:value={value}
{on_change_cb}
{label}
{show_label}
{server}
@@ -73,6 +78,7 @@
{:else if mode == "receive" && modality === "audio"}
<StaticAudio
bind:value={value}
{on_change_cb}
{label}
{show_label}
{server}
@@ -91,6 +97,7 @@
{server}
{rtc_configuration}
{time_limit}
{on_change_cb}
on:clear={() => gradio.dispatch("clear")}
on:play={() => gradio.dispatch("play")}
on:pause={() => gradio.dispatch("pause")}
@@ -109,6 +116,7 @@
{:else if mode === "send-receive" && modality === "audio"}
<InteractiveAudio
bind:value={value}
{on_change_cb}
{label}
{show_label}
{server}

9
frontend/shared/InteractiveAudio.svelte
View File

@@ -25,9 +25,9 @@
export let i18n: I18nFormatter;
export let time_limit: number | null = null;
export let track_constraints: MediaTrackConstraints = {};
let _time_limit: number | null = null;
export let on_change_cb: () => void;
$: console.log("time_limit", time_limit);
let _time_limit: number | null = null;
export let server: {
offer: (body: any) => Promise<any>;
@@ -41,12 +41,15 @@
const dispatch = createEventDispatcher<{
tick: undefined;
state_change: undefined;
error: string
play: undefined;
stop: undefined;
}>();
onMount(() => {
window.setInterval(() => {
if (stream_state == "open") {
@@ -103,7 +106,7 @@
}
if (stream == null) return;
start(stream, pc, audio_player, server.offer, _webrtc_id, "audio").then((connection) => {
start(stream, pc, audio_player, server.offer, _webrtc_id, "audio", on_change_cb).then((connection) => {
pc = connection;
}).catch(() => {
console.info("catching")

2
frontend/shared/InteractiveVideo.svelte
View File

@@ -21,6 +21,7 @@
};
export let rtc_configuration: Object;
export let track_constraints: MediaTrackConstraints = {};
export let on_change_cb: () => void;
const dispatch = createEventDispatcher<{
change: FileData | null;
@@ -50,6 +51,7 @@
{include_audio}
{time_limit}
{track_constraints}
{on_change_cb}
on:error
on:start_recording
on:stop_recording

3
frontend/shared/StaticAudio.svelte
View File

@@ -17,6 +17,7 @@
export let show_label = true;
export let rtc_configuration: Object | null = null;
export let i18n: I18nFormatter;
export let on_change_cb: () => void;
export let server: {
offer: (body: any) => Promise<any>;
@@ -68,7 +69,7 @@
}
)
let stream = null;
start(stream, pc, audio_player, server.offer, _webrtc_id, "audio").then((connection) => {
start(stream, pc, audio_player, server.offer, _webrtc_id, "audio", on_change_cb).then((connection) => {
pc = connection;
}).catch(() => {
console.info("catching")

3
frontend/shared/StaticVideo.svelte
View File

@@ -13,6 +13,7 @@
export let label: string | undefined = undefined;
export let show_label = true;
export let rtc_configuration: Object | null = null;
export let on_change_cb: () => void;
export let server: {
offer: (body: any) => Promise<any>;
};
@@ -59,7 +60,7 @@
}
}
)
start(null, pc, video_element, server.offer, _webrtc_id).then((connection) => {
start(null, pc, video_element, server.offer, _webrtc_id, "video", on_change_cb).then((connection) => {
pc = connection;
}).catch(() => {
console.log("catching")

3
frontend/shared/Webcam.svelte
View File

@@ -24,6 +24,7 @@
let _time_limit: number | null = null;
export let time_limit: number | null = null;
let stream_state: "open" | "waiting" | "closed" = "closed";
export let on_change_cb: () => void;
const _webrtc_id = Math.random().toString(36).substring(2);
export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
@@ -139,7 +140,7 @@
)
stream_state = "waiting"
webrtc_id = Math.random().toString(36).substring(2);
start(stream, pc, video_source, server.offer, webrtc_id).then((connection) => {
start(stream, pc, video_source, server.offer, webrtc_id, "video", on_change_cb).then((connection) => {
pc = connection;
}).catch(() => {
console.info("catching")

18
frontend/shared/webrtc_utils.ts
View File

@@ -44,8 +44,24 @@ export function createPeerConnection(pc, node) {
return pc;
}
export async function start(stream, pc: RTCPeerConnection, node, server_fn, webrtc_id, modality: "video" | "audio" = "video") {
export async function start(stream, pc: RTCPeerConnection, node, server_fn, webrtc_id,
modality: "video" | "audio" = "video", on_change_cb: () => void = () => {}) {
pc = createPeerConnection(pc, node);
const data_channel = pc.createDataChannel("text");
data_channel.onopen = () => {
console.debug("Data channel is open");
data_channel.send("handshake");
};
data_channel.onmessage = (event) => {
console.debug("Received message:", event.data);
if (event.data === "change") {
console.debug("Change event received");
on_change_cb();
}
};
if (stream) {
stream.getTracks().forEach((track) => {
console.debug("Track stream callback", track);