From 1ba3524bf188097bb1ab9129229d44ee7d6ab193 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 6 Apr 2022 14:21:54 +0100
Subject: [PATCH 1/3] reimplement webcam video

---
 ui/packages/app/src/Blocks.svelte   |  2 +
 ui/packages/image/src/Webcam.svelte | 87 +++++++++++++++++++++++++----
 ui/packages/image/src/camera.svg    |  2 +-
 ui/packages/image/src/circle.svg    |  1 +
 ui/packages/image/src/index.ts      |  1 +
 ui/packages/image/src/square.svg    |  1 +
 ui/packages/video/package.json      |  1 +
 ui/packages/video/src/Video.svelte  |  5 ++
 ui/pnpm-lock.yaml                   |  2 +
 9 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 ui/packages/image/src/circle.svg
 create mode 100644 ui/packages/image/src/square.svg

diff --git a/ui/packages/app/src/Blocks.svelte b/ui/packages/app/src/Blocks.svelte
index 94f13d6f2e135..a517fe9e5587c 100644
--- a/ui/packages/app/src/Blocks.svelte
+++ b/ui/packages/app/src/Blocks.svelte
@@ -39,6 +39,8 @@
 	export let theme: string;
 	export let style: string | null;
 
+	console.log(components);
+
 	const dynamic_ids = dependencies.reduce((acc, next) => {
 		next.inputs.forEach((i) => acc.add(i));
 		return acc;
diff --git a/ui/packages/image/src/Webcam.svelte b/ui/packages/image/src/Webcam.svelte
index e67661d6f2b1a..4f57c11fd0f87 100644
--- a/ui/packages/image/src/Webcam.svelte
+++ b/ui/packages/image/src/Webcam.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from "svelte";
-	import camera from "./camera.svg";
+	import camera_icon from "./camera.svg";
+	import circle_icon from "./circle.svg";
+	import square_icon from "./square.svg";
 
 	let video_source: HTMLVideoElement;
 	let canvas: HTMLCanvasElement;
 
+	export let mode: "image" | "video" = "image";
+
 	const dispatch = createEventDispatcher();
 
 	onMount(() => (canvas = document.createElement("canvas")));
 
 	async function access_webcam() {
 		try {
-			const stream = await navigator.mediaDevices.getUserMedia({
+			stream = await navigator.mediaDevices.getUserMedia({
 				video: true
 			});
 			video_source.srcObject = stream;
@@ -27,7 +31,7 @@
 		context.fillRect(0, 0, canvas.width, canvas.height);
 	}
 
-	function takepicture() {
+	function take_picture() {
 		var context = canvas.getContext("2d")!;
 
 		if (video_source.videoWidth && video_source.videoHeight) {
@@ -46,6 +50,51 @@
 		}
 	}
 
+	let recording = false;
+	let recorded_blobs: BlobPart[] = [];
+	let stream: MediaStream;
+	let mimeType: string;
+	let media_recorder: MediaRecorder;
+
+	function take_recording() {
+		if (recording) {
+			media_recorder.stop();
+			let video_blob = new Blob(recorded_blobs, { type: mimeType });
+			let ReaderObj = new FileReader();
+			ReaderObj.onload = function (e) {
+				if (e.target) {
+					dispatch("capture", {
+						data: e.target.result,
+						name: "sample." + mimeType.substring(6),
+						is_example: false
+					});
+				}
+			};
+			ReaderObj.readAsDataURL(video_blob);
+		} else {
+			recorded_blobs = [];
+			let validMimeTypes = ["video/webm", "video/mp4"];
+			for (let validMimeType of validMimeTypes) {
+				if (MediaRecorder.isTypeSupported(validMimeType)) {
+					mimeType = validMimeType;
+					break;
+				}
+			}
+			if (mimeType === null) {
+				console.error("No supported MediaRecorder mimeType");
+				return;
+			}
+			media_recorder = new MediaRecorder(stream, {
+				mimeType: mimeType
+			});
+			media_recorder.addEventListener("dataavailable", function (e) {
+				recorded_blobs.push(e.data);
+			});
+			media_recorder.start(200);
+		}
+		recording = !recording;
+	}
+
 	access_webcam();
 </script>
 
@@ -53,16 +102,34 @@
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<video bind:this={video_source} class=" h-full w-full" />
 	<button
-		on:click={takepicture}
+		on:click={mode === "image" ? take_picture : take_recording}
 		style="background-color: #333;"
 		class="rounded-full w-10 h-10 flex justify-center items-center absolute inset-x-0 bottom-2 m-auto drop-shadow-lg"
 	>
-		<img
-			style="color: white"
-			src={camera}
-			alt="take a screenshot"
-			class="w-2/4 h-2/4"
-		/>
+		{#if mode === "video"}
+			{#if recording}
+				<img
+					style="color: white"
+					src={square_icon}
+					alt="take a screenshot"
+					class="w-2/4 h-2/4"
+				/>
+			{:else}
+				<img
+					style="color: white"
+					src={circle_icon}
+					alt="take a screenshot"
+					class="w-2/4 h-2/4"
+				/>
+			{/if}
+		{:else}
+			<img
+				style="color: white"
+				src={camera_icon}
+				alt="take a screenshot"
+				class="w-2/4 h-2/4"
+			/>
+		{/if}
 	</button>
 </div>
 
diff --git a/ui/packages/image/src/camera.svg b/ui/packages/image/src/camera.svg
index b46daebb74be9..a6293ee0d70b1 100644
--- a/ui/packages/image/src/camera.svg
+++ b/ui/packages/image/src/camera.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
diff --git a/ui/packages/image/src/circle.svg b/ui/packages/image/src/circle.svg
new file mode 100644
index 0000000000000..277be5dd84e86
--- /dev/null
+++ b/ui/packages/image/src/circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red" stroke="red" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
\ No newline at end of file
diff --git a/ui/packages/image/src/index.ts b/ui/packages/image/src/index.ts
index a8829ff3b1597..d3a5b7f100d06 100644
--- a/ui/packages/image/src/index.ts
+++ b/ui/packages/image/src/index.ts
@@ -1 +1,2 @@
 export { default as Image } from "./Image.svelte";
+export { default as Webcam } from "./Webcam.svelte";
diff --git a/ui/packages/image/src/square.svg b/ui/packages/image/src/square.svg
new file mode 100644
index 0000000000000..3731768b539d9
--- /dev/null
+++ b/ui/packages/image/src/square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="red" stroke="red" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
\ No newline at end of file
diff --git a/ui/packages/video/package.json b/ui/packages/video/package.json
index 9d72672827688..67543f11dd348 100644
--- a/ui/packages/video/package.json
+++ b/ui/packages/video/package.json
@@ -9,6 +9,7 @@
 	"private": true,
 	"dependencies": {
 		"@gradio/atoms": "workspace:^0.0.1",
+		"@gradio/image": "workspace:^0.0.1",
 		"@gradio/upload": "workspace:^0.0.1"
 	}
 }
diff --git a/ui/packages/video/src/Video.svelte b/ui/packages/video/src/Video.svelte
index e5eeb9982b28b..df7327adc9387 100644
--- a/ui/packages/video/src/Video.svelte
+++ b/ui/packages/video/src/Video.svelte
@@ -3,6 +3,7 @@
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData } from "@gradio/upload";
 	import { Block, BlockLabel } from "@gradio/atoms";
+	import { Webcam } from "@gradio/image";
 
 	import { prettyBytes, playable } from "./utils";
 	import video_icon from "./video.svg";
@@ -35,6 +36,8 @@
 	}
 
 	let dragging = false;
+
+	$: console.log(value, source);
 </script>
 
 <Block
@@ -55,6 +58,8 @@
 				<br />- {or_text} -<br />
 				{upload_text}
 			</Upload>
+		{:else if source === "webcam"}
+			<Webcam mode="video" on:capture={({ detail }) => (value = detail)} />
 		{/if}
 	{:else}
 		<ModifyUpload on:clear={handle_clear} {theme} />
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 917e4d47df15c..e168ee130f7ab 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -207,9 +207,11 @@ importers:
   packages/video:
     specifiers:
       '@gradio/atoms': workspace:^0.0.1
+      '@gradio/image': workspace:^0.0.1
       '@gradio/upload': workspace:^0.0.1
     dependencies:
       '@gradio/atoms': link:../atoms
+      '@gradio/image': link:../image
       '@gradio/upload': link:../upload
 
   packages/workbench:

From bcb91b83e176393d742e1557f568e64afe5ddd61 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 6 Apr 2022 14:25:58 +0100
Subject: [PATCH 2/3] remove logs

---
 ui/packages/app/src/Blocks.svelte  | 2 --
 ui/packages/video/src/Video.svelte | 2 --
 2 files changed, 4 deletions(-)

diff --git a/ui/packages/app/src/Blocks.svelte b/ui/packages/app/src/Blocks.svelte
index a517fe9e5587c..94f13d6f2e135 100644
--- a/ui/packages/app/src/Blocks.svelte
+++ b/ui/packages/app/src/Blocks.svelte
@@ -39,8 +39,6 @@
 	export let theme: string;
 	export let style: string | null;
 
-	console.log(components);
-
 	const dynamic_ids = dependencies.reduce((acc, next) => {
 		next.inputs.forEach((i) => acc.add(i));
 		return acc;
diff --git a/ui/packages/video/src/Video.svelte b/ui/packages/video/src/Video.svelte
index df7327adc9387..73702866430f7 100644
--- a/ui/packages/video/src/Video.svelte
+++ b/ui/packages/video/src/Video.svelte
@@ -36,8 +36,6 @@
 	}
 
 	let dragging = false;
-
-	$: console.log(value, source);
 </script>
 
 <Block

From a3d665e013541c11581b7a2b80739b0ae21618cf Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 6 Apr 2022 17:37:18 +0100
Subject: [PATCH 3/3] fix image webcam input

---
 ui/packages/image/src/Image.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/packages/image/src/Image.svelte b/ui/packages/image/src/Image.svelte
index 35de5c499ef31..8bad5d4039fe4 100644
--- a/ui/packages/image/src/Image.svelte
+++ b/ui/packages/image/src/Image.svelte
@@ -49,6 +49,8 @@
 	$: dispatch("change", value);
 
 	let dragging = false;
+
+	$: console.log($$props);
 </script>
 
 <Block
@@ -99,6 +101,8 @@
 				editable
 			/>
 
+			<img class="w-full h-full object-contain" src={value} alt="" />
+		{:else}
 			<img class="w-full h-full object-contain" src={value} alt="" />
 		{/if}
 	</div>