Spaces:
Paused
Paused
crop video
Browse files
frontend/src/lib/components/VideoInput.svelte
CHANGED
@@ -22,6 +22,7 @@
|
|
22 |
// ajust the throttle time to your needs
|
23 |
const THROTTLE_TIME = 1000 / 15;
|
24 |
let selectedDevice: string = '';
|
|
|
25 |
|
26 |
onMount(() => {
|
27 |
ctx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
|
@@ -46,35 +47,34 @@
|
|
46 |
}
|
47 |
const videoWidth = videoEl.videoWidth;
|
48 |
const videoHeight = videoEl.videoHeight;
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
57 |
onFrameChangeStore.set({ blob });
|
58 |
videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
|
59 |
}
|
60 |
|
61 |
-
$: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED) {
|
62 |
videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
|
63 |
}
|
64 |
-
async function grapCropBlobImg(
|
65 |
-
video: HTMLVideoElement,
|
66 |
-
x: number,
|
67 |
-
y: number,
|
68 |
-
width: number,
|
69 |
-
height: number
|
70 |
-
) {
|
71 |
-
const canvas = new OffscreenCanvas(width, height);
|
72 |
-
|
73 |
-
const ctx = canvas.getContext('2d') as OffscreenCanvasRenderingContext2D;
|
74 |
-
ctx.drawImage(video, x, y, width, height, 0, 0, width, height);
|
75 |
-
const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 1 });
|
76 |
-
return blob;
|
77 |
-
}
|
78 |
</script>
|
79 |
|
80 |
<div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
|
@@ -87,6 +87,9 @@
|
|
87 |
<video
|
88 |
class="pointer-events-none aspect-square w-full object-cover"
|
89 |
bind:this={videoEl}
|
|
|
|
|
|
|
90 |
playsinline
|
91 |
autoplay
|
92 |
muted
|
|
|
22 |
// ajust the throttle time to your needs
|
23 |
const THROTTLE_TIME = 1000 / 15;
|
24 |
let selectedDevice: string = '';
|
25 |
+
let videoIsReady = false;
|
26 |
|
27 |
onMount(() => {
|
28 |
ctx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
|
|
|
47 |
}
|
48 |
const videoWidth = videoEl.videoWidth;
|
49 |
const videoHeight = videoEl.videoHeight;
|
50 |
+
let height0 = videoHeight;
|
51 |
+
let width0 = videoWidth;
|
52 |
+
let x0 = 0;
|
53 |
+
let y0 = 0;
|
54 |
+
if (videoWidth > videoHeight) {
|
55 |
+
width0 = videoHeight;
|
56 |
+
x0 = (videoWidth - videoHeight) / 2;
|
57 |
+
} else {
|
58 |
+
height0 = videoWidth;
|
59 |
+
y0 = (videoHeight - videoWidth) / 2;
|
60 |
+
}
|
61 |
+
ctx.drawImage(videoEl, x0, y0, width0, height0, 0, 0, size.width, size.height);
|
62 |
+
const blob = await new Promise<Blob>((resolve) => {
|
63 |
+
canvasEl.toBlob(
|
64 |
+
(blob) => {
|
65 |
+
resolve(blob as Blob);
|
66 |
+
},
|
67 |
+
'image/jpeg',
|
68 |
+
1
|
69 |
+
);
|
70 |
+
});
|
71 |
onFrameChangeStore.set({ blob });
|
72 |
videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
|
73 |
}
|
74 |
|
75 |
+
$: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED && videoIsReady) {
|
76 |
videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
|
77 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
</script>
|
79 |
|
80 |
<div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
|
|
|
87 |
<video
|
88 |
class="pointer-events-none aspect-square w-full object-cover"
|
89 |
bind:this={videoEl}
|
90 |
+
on:loadeddata={() => {
|
91 |
+
videoIsReady = true;
|
92 |
+
}}
|
93 |
playsinline
|
94 |
autoplay
|
95 |
muted
|