(null);
28 |
29 | useEffect(() => {
30 | async function handleDeviceChange() {
31 | if (!selectedDevice) return;
32 | if (streamRef.current) {
33 | video.srcObject = null;
34 | streamRef.current.getTracks().forEach((track) => track.stop());
35 | // setVideoSize(null);
36 | }
37 | streamRef.current = await navigator.mediaDevices.getUserMedia({
38 | video: {
39 | deviceId: { exact: selectedDevice },
40 | width: { ideal: idealResolution.width },
41 | },
42 | });
43 | video.srcObject = streamRef.current;
44 | video.onloadedmetadata = () => {
45 | if (video.videoWidth && video.videoHeight) {
46 | if (
47 | !stateRef.videoSize ||
48 | stateRef.videoSize.width !== video.videoWidth ||
49 | stateRef.videoSize.height !== video.videoHeight
50 | ) {
51 | setVideoSize({
52 | width: video.videoWidth,
53 | height: video.videoHeight,
54 | });
55 | }
56 | }
57 | };
58 | }
59 | handleDeviceChange();
60 | return () => {
61 | if (streamRef.current) {
62 | video.srcObject = null;
63 | streamRef.current.getTracks().forEach((track) => track.stop());
64 | streamRef.current = null;
65 | }
66 | };
67 | }, [selectedDevice]);
68 |
69 | useEffect(() => {
70 | const getCameras = async () => {
71 | try {
72 | // Trigger the browser to ask for permission to use the camera
73 | await navigator.mediaDevices.getUserMedia({
74 | video: {
75 | width: { ideal: idealResolution.width },
76 | },
77 | });
78 | const devices = await navigator.mediaDevices.enumerateDevices();
79 | let videoDevices = devices.filter(
80 | (device) => device.kind === "videoinput",
81 | );
82 |
83 | setDevices(videoDevices);
84 |
85 | if (videoDevices.length > 0) {
86 | const storageCheck = localStorage.getItem("selectedDevice");
87 | if (storageCheck) {
88 | if (videoDevices.some((d) => d.deviceId === storageCheck)) {
89 | // if the stored device is still available, use it
90 | setSelectedDevice(storageCheck);
91 | } else {
92 | setSelectedDevice(videoDevices[0].deviceId);
93 | }
94 | } else {
95 | // do not store - only when the user selects a device
96 | const initialDeviceId = videoDevices[0].deviceId;
97 | setSelectedDevice(initialDeviceId);
98 | }
99 | }
100 | } catch (e) {
101 | console.error(e);
102 | }
103 | };
104 | getCameras();
105 | function handleDeviceChange() {
106 | getCameras();
107 | }
108 | navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
109 | return () => {
110 | navigator.mediaDevices.removeEventListener(
111 | "devicechange",
112 | handleDeviceChange,
113 | );
114 | };
115 | }, []);
116 |
117 | return {
118 | devices,
119 | };
120 | }
121 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useAtom } from "jotai";
2 | import {
3 | currentTimeAtom,
4 | devicesAtom,
5 | flippedHorizontallyAtom,
6 | flippedVerticallyAtom,
7 | modeAtom,
8 | selectedDeviceAtom,
9 | showDownloadModalAtom,
10 | showInfoModalAtom,
11 | startTimeAtom,
12 | videoSizeAtom,
13 | zoomAtom,
14 | } from "./atoms";
15 | import { useEffect, useRef } from "react";
16 | import { useDevices } from "./useDevices";
17 | import { ModeType } from "./types";
18 | import { formatDate } from "./utils";
19 | import { stateRef } from "./atoms";
20 |
21 | export function App() {
22 | useDevices();
23 | useKeyboard();
24 | useRefUpdater();
25 | const [zoom] = useAtom(zoomAtom);
26 | const [showInfoModal] = useAtom(showInfoModalAtom);
27 | const [showDownloadModal] = useAtom(showDownloadModalAtom);
28 |
29 | return (
30 |
31 |
32 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | {showInfoModal &&
}
45 | {showDownloadModal &&
}
46 |
65 | {startTime && currentTime && (
66 | <>
67 |
{startTime ? formatDate(startTime) : null}
68 |
—
69 |
{currentTime ? formatDate(currentTime) : null}
70 |
71 | )}
72 |
89 |
90 | {devices.length === 1 ? (
91 |
95 |
{devices[0].label.split("(")[0] || "Camera"}
96 |
97 | ) : (
98 |
99 | )}
100 |
101 |
102 |
110 |
111 |
119 |
127 |
128 |
136 |
219 |
227 |
228 |
237 |
238 | );
239 | }
240 |
241 | function ModeChooser() {
242 | const [mode, setMode] = useAtom(modeAtom);
243 |
244 | return (
245 |
246 | {[
247 | ["multiply", "M"],
248 | ["difference", "D"],
249 | ["screen", "S"],
250 | ].map(([itemMode, itemLabel]) => (
251 |
258 | ))}
259 |
260 | );
261 | }
262 |
263 | function Canvas() {
264 | const [videoSize] = useAtom(videoSizeAtom);
265 | const [mode] = useAtom(modeAtom);
266 | const [flippedHorizontally] = useAtom(flippedHorizontallyAtom);
267 | const [flippedVertically] = useAtom(flippedVerticallyAtom);
268 | const [zoom] = useAtom(zoomAtom);
269 | const renderCanvasRef = useRef(null);
270 | const drawBase = useDrawBase();
271 |
272 | const modeRef = useRef(mode);
273 | modeRef.current = mode;
274 | const flippedHorizontallyRef = useRef(flippedHorizontally);
275 | flippedHorizontallyRef.current = flippedHorizontally;
276 | const flippedVerticallyRef = useRef(flippedVertically);
277 | flippedVerticallyRef.current = flippedVertically;
278 |
279 | useEffect(() => {
280 | const renderCanvas = renderCanvasRef.current;
281 | if (!renderCanvas || !videoSize) return;
282 |
283 | const baseCanvas = stateRef.baseCanvas;
284 | const nowCanvas = stateRef.nowCanvas;
285 | const downloadCanvas = stateRef.downloadCanvas;
286 | const nowCtx = stateRef.nowCtx;
287 |
288 | baseCanvas.width = videoSize.width;
289 | baseCanvas.height = videoSize.height;
290 | nowCanvas.width = videoSize.width;
291 | nowCanvas.height = videoSize.height;
292 | downloadCanvas.width = videoSize.width;
293 | downloadCanvas.height = videoSize.height;
294 | renderCanvas.width = videoSize.width;
295 | renderCanvas.height = videoSize.height;
296 |
297 | const ctx = renderCanvas.getContext("2d");
298 |
299 | const $video = document.getElementById("webcam-video") as HTMLVideoElement;
300 |
301 | setTimeout(() => {
302 | drawBase();
303 | }, 0);
304 |
305 | function drawVideo() {
306 | if (stateRef.isCapturing) {
307 | requestAnimationFrame(drawVideo);
308 | return;
309 | }
310 |
311 | if (flippedHorizontallyRef.current || flippedVerticallyRef.current) {
312 | nowCtx.save();
313 | }
314 | if (flippedHorizontallyRef.current && flippedVerticallyRef.current) {
315 | nowCtx.setTransform(-1, 0, 0, -1, videoSize!.width, videoSize!.height);
316 | } else if (flippedHorizontallyRef.current) {
317 | nowCtx.setTransform(-1, 0, 0, 1, videoSize!.width, 0);
318 | } else if (flippedVerticallyRef.current) {
319 | nowCtx.setTransform(1, 0, 0, -1, 0, videoSize!.height);
320 | }
321 | nowCtx!.drawImage($video, 0, 0, videoSize!.width, videoSize!.height);
322 | if (flippedHorizontallyRef.current || flippedVerticallyRef.current) {
323 | nowCtx.restore();
324 | }
325 |
326 | ctx!.globalCompositeOperation = "source-over";
327 | ctx!.drawImage(baseCanvas, 0, 0, videoSize!.width, videoSize!.height);
328 | ctx!.globalCompositeOperation = modeRef.current as ModeType;
329 | ctx!.drawImage(nowCanvas, 0, 0, videoSize!.width, videoSize!.height);
330 | requestAnimationFrame(drawVideo);
331 | }
332 | drawVideo();
333 | }, [videoSize]);
334 |
335 | return videoSize ? (
336 |
346 | ) : null;
347 | }
348 |
349 | function InfoModal() {
350 | const [, setShowInfoModal] = useAtom(showInfoModalAtom);
351 |
352 | return (
353 |
354 |
355 |
356 |
ABOUT
357 |
365 |
366 |
367 | Ghost shows a live blend of{" "}
368 | your current camera{" "}
369 | and the start frame.
370 | Try the multiply,{" "}
371 | difference, and{" "}
372 | screen blends.{" "}
373 | Download the result.
374 |
375 |
386 |
397 |
398 |
{
433 | if (e.target === e.currentTarget) {
434 | setShowInfoModal(false);
435 | setShowDownloadModal(false);
436 | }
437 | }}
438 | >
439 |
{
442 | e.stopPropagation();
443 | }}
444 | >
445 |
446 |
DOWNLOAD
447 |
455 |
456 |
463 |
464 |
472 |
484 |
485 |
486 |