gradio-webrtc/frontend/shared/InteractiveVideo.svelte

<script lang="ts">
	import { createEventDispatcher } from "svelte";
	import type { FileData, Client } from "@gradio/client";
	import { BlockLabel } from "@gradio/atoms";
	import  Webcam  from "./Webcam.svelte";
	import { Video } from "@gradio/icons";

	import type { I18nFormatter } from "@gradio/utils";

	export let value: string = null;
	export let label: string | undefined = undefined;
	export let show_label = true;
	export let include_audio: boolean;
	export let root: string;
	export let i18n: I18nFormatter;
	export let active_source: "webcam" | "upload" = "webcam";
	export let handle_reset_value: () => void = () => {};
	export let stream_handler: Client["stream"];
	export let server: {
		offer: (body: any) => Promise<any>;
	};

	let has_change_history = false;

	const dispatch = createEventDispatcher<{
		change: FileData | null;
		clear?: never;
		play?: never;
		pause?: never;
		end?: never;
		drag: boolean;
		error: string;
		upload: FileData;
		start_recording?: never;
		stop_recording?: never;
		tick: never;
	}>();

	let dragging = false;
	$: dispatch("drag", dragging);

	$: console.log("interactive value", value);
</script>

<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
<div data-testid="video" class="video-container">
	<Webcam
		{root}
		{include_audio}
		on:error
		on:start_recording
		on:stop_recording
		on:tick
		{i18n}
		stream_every={0.5}
		{server}
		bind:webrtc_id={value}
	/>

	<!-- <SelectSource {sources} bind:active_source /> -->
</div>

<style>
	.file-name {
		padding: var(--size-6);
		font-size: var(--text-xxl);
		word-break: break-all;
	}

	.file-size {
		padding: var(--size-2);
		font-size: var(--text-xl);
	}

	.upload-container {
		height: 100%;
		width: 100%;
	}

	.video-container {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>