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

Lots of bugs

Browse Source
This commit is contained in:
freddyaboulton
2024-10-11 13:01:26 -07:00
parent d681dbfd7e
commit 23b1e20c05
13 changed files with 214 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/shared/InteractiveVideo.svelte
View File

@@ -38,7 +38,8 @@
let dragging = false;
$: dispatch("drag", dragging);
$: console.log("interactive value", value);
$: console.log("value", value)
</script>
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />

42
frontend/shared/StaticAudio.svelte
View File

@@ -49,34 +49,27 @@
$: if( value === "start_webrtc_stream") {
stream_state = "connecting";
value = _webrtc_id;
const fallback_config = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
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 = new RTCPeerConnection(rtc_configuration);
pc.addEventListener("connectionstatechange",
async (event) => {
switch(pc.connectionState) {
case "connected":
console.info("connected");
stream_state = "open";
break;
case "disconnected":
console.info("closed");
stop(pc);
break;
default:
break;
}
)
}
)
start(null, pc, audio_player, server.offer, _webrtc_id, "audio").then((connection) => {
pc = connection;
}).catch(() => {
console.log("catching")
console.info("catching")
dispatch("error", "Too many concurrent users. Come back later!");
});
}
@@ -91,7 +84,6 @@
float={false}
label={label || i18n("audio.audio")}
/>
<audio
class="standard-player"
class:hidden={value === "__webrtc_value__"}

101
frontend/shared/StaticVideo.svelte
View File

@@ -41,66 +41,59 @@
$: if( value === "start_webrtc_stream") {
value = _webrtc_id;
const fallback_config = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
const configuration = rtc_configuration || fallback_config;
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;
}
}
)
start(null, pc, video_element, server.offer, _webrtc_id).then((connection) => {
pc = connection;
}).catch(() => {
console.log("catching")
dispatch("error", "Too many concurrent users. Come back later!");
});
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;
}
}
)
start(null, pc, video_element, server.offer, _webrtc_id).then((connection) => {
pc = connection;
}).catch(() => {
console.log("catching")
dispatch("error", "Too many concurrent users. Come back later!");
});
}
</script>
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
{#if value === "__webrtc_value__"}
<Empty unpadded_box={true} size="large"><Video /></Empty>
{/if}
<div class="wrap">
<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
{#if value === "__webrtc_value__"}
<Empty unpadded_box={true} size="large"><Video /></Empty>
{/if}
<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>
<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>

18
frontend/shared/Webcam.svelte
View File

@@ -24,7 +24,7 @@
let _time_limit: number | null = null;
export let time_limit: number | null = null;
let stream_state: "open" | "waiting" | "closed" = "closed";
export const webrtc_id = Math.random().toString(36).substring(2);
const _webrtc_id = Math.random().toString(36).substring(2);
export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
state: "open" | "closed" | "waiting"
@@ -114,19 +114,11 @@
let webcam_accessed = false;
let pc: RTCPeerConnection;
export let webrtc_id;
async function start_webrtc(): Promise<void> {
if (stream_state === 'closed') {
const fallback_config = {
iceServers: [
{
urls: 'stun:stun.l.google.com:19302'
}
]
};
const configuration = rtc_configuration || fallback_config;
console.log("config", configuration);
pc = new RTCPeerConnection(configuration);
pc = new RTCPeerConnection(rtc_configuration);
pc.addEventListener("connectionstatechange",
async (event) => {
switch(pc.connectionState) {
@@ -136,6 +128,7 @@
break;
case "disconnected":
stream_state = "closed";
_time_limit = null;
await access_webcam();
break;
default:
@@ -144,10 +137,11 @@
}
)
stream_state = "waiting"
webrtc_id = _webrtc_id;
start(stream, pc, video_source, server.offer, webrtc_id).then((connection) => {
pc = connection;
}).catch(() => {
console.log("catching")
console.info("catching")
stream_state = "closed";
dispatch("error", "Too many concurrent users. Come back later!");
});

29
frontend/shared/webrtc_utils.ts
View File

@@ -3,7 +3,7 @@ export function createPeerConnection(pc, node) {
pc.addEventListener(
"icegatheringstatechange",
() => {
console.log(pc.iceGatheringState);
console.debug(pc.iceGatheringState);
},
false
);
@@ -11,7 +11,7 @@ export function createPeerConnection(pc, node) {
pc.addEventListener(
"iceconnectionstatechange",
() => {
console.log(pc.iceConnectionState);
console.debug(pc.iceConnectionState);
},
false
);
@@ -19,25 +19,25 @@ export function createPeerConnection(pc, node) {
pc.addEventListener(
"signalingstatechange",
() => {
console.log(pc.signalingState);
console.debug(pc.signalingState);
},
false
);
// connect audio / video from server to local
pc.addEventListener("track", (evt) => {
console.log("track event listener");
console.debug("track event listener");
if (node.srcObject !== evt.streams[0]) {
console.log("streams", evt.streams);
console.debug("streams", evt.streams);
node.srcObject = evt.streams[0];
console.log("node.srcOject", node.srcObject);
console.debug("node.srcOject", node.srcObject);
if (evt.track.kind === 'audio') {
node.volume = 1.0; // Ensure volume is up
node.muted = false;
node.autoplay = true;
// Attempt to play (needed for some browsers)
node.play().catch(e => console.log("Autoplay failed:", e));
node.play().catch(e => console.debug("Autoplay failed:", e));
}
}
});
@@ -51,11 +51,11 @@ export async function start(stream, pc: RTCPeerConnection, node, server_fn, webr
stream.getTracks().forEach((track) => {
track.applyConstraints({ frameRate: { max: 30 } });
console.log("Track stream callback", track);
console.debug("Track stream callback", track);
pc.addTrack(track, stream);
});
} else {
console.log("Creating transceiver!");
console.debug("Creating transceiver!");
pc.addTransceiver(modality, { direction: "recvonly" });
}
@@ -66,9 +66,9 @@ export async function start(stream, pc: RTCPeerConnection, node, server_fn, webr
function make_offer(server_fn: any, body): Promise<object> {
return new Promise((resolve, reject) => {
server_fn(body).then((data) => {
console.log("data", data)
console.debug("data", data)
if(data?.status === "failed") {
console.log("rejecting")
console.debug("rejecting")
reject("error")
}
resolve(data);
@@ -89,13 +89,13 @@ async function negotiate(
.then(() => {
// wait for ICE gathering to complete
return new Promise<void>((resolve) => {
console.log("ice gathering state", pc.iceGatheringState);
console.debug("ice gathering state", pc.iceGatheringState);
if (pc.iceGatheringState === "complete") {
resolve();
} else {
const checkState = () => {
if (pc.iceGatheringState === "complete") {
console.log("ice complete");
console.debug("ice complete");
pc.removeEventListener("icegatheringstatechange", checkState);
resolve();
}
@@ -124,8 +124,7 @@ async function negotiate(
}
export function stop(pc: RTCPeerConnection) {
console.log("pc", pc);
console.log("STOPPING");
console.debug("Stopping peer connection");
// close transceivers
if (pc.getTransceivers) {
pc.getTransceivers().forEach((transceiver) => {