Add screen capturing

README.md

@@ -70,6 +70,7 @@ docker run -dp 3000:3000 --rm --name daedalos daedalos
   - Open with, Open file/folder location, Open in new window, Open Terminal here
   - Download, Add to archive, Extract here, Set as wallpaper, Convert audio/video/photo/spreadsheets
   - Sort by, New Folder, New Text Document
+  - Screen Capture
 - Keyboard Shortcuts
   - CTRL+C, CTRL+V, CTRL+X, CTRL+A, Delete
   - F2, F5, Backspace, Arrows, Enter

components/system/Files/FileManager/useFolderContextMenu.ts

@@ -12,10 +12,13 @@ import { useSession } from "contexts/session";
 import { dirname, join } from "path";
 import { useCallback, useMemo } from "react";
 import {
+  DEFAULT_LOCALE,
+  DESKTOP_PATH,
   FOLDER_ICON,
   isFileSystemSupported,
   MENU_SEPERATOR,
 } from "utils/constants";
+import { bufferToBlob } from "utils/functions";
 
 const NEW_FOLDER = "New folder";
 const NEW_TEXT_DOCUMENT = "New Text Document.txt";
@@ -31,8 +34,21 @@ const updateSortBy =
 
 const EASTER_EGG_CLICK_COUNT = 2;
 
+const CAPTURE_FPS = 30;
+const CAPTURE_TIME_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  day: "2-digit",
+  hour: "2-digit",
+  hour12: false,
+  minute: "2-digit",
+  month: "2-digit",
+  second: "2-digit",
+  year: "numeric",
+};
+
 let triggerEasterEggCountdown = EASTER_EGG_CLICK_COUNT;
 
+let currentMediaStream: MediaStream | undefined;
+
 const useFolderContextMenu = (
   url: string,
   {
@@ -44,7 +60,13 @@ const useFolderContextMenu = (
   isDesktop?: boolean
 ): ContextMenuCapture => {
   const { contextMenu } = useMenu();
-  const { mapFs, pasteList = {}, updateFolder } = useFileSystem();
+  const {
+    mapFs,
+    pasteList = {},
+    readFile,
+    writeFile,
+    updateFolder,
+  } = useFileSystem();
   const {
     setWallpaper: setSessionWallpaper,
     setIconPositions,
@@ -88,6 +110,83 @@ const useFolderContextMenu = (
     },
     [setIconPositions, setSortBy, url]
   );
+  const captureScreen = useCallback(async () => {
+    if (currentMediaStream) {
+      const { active: wasActive } = currentMediaStream;
+
+      currentMediaStream.getTracks().forEach((track) => track.stop());
+      currentMediaStream = undefined;
+
+      if (wasActive) return;
+    }
+
+    const displayMediaOptions: DisplayMediaStreamOptions &
+      MediaStreamConstraints = {
+      preferCurrentTab: true,
+      video: {
+        frameRate: CAPTURE_FPS,
+      },
+    };
+    currentMediaStream = await navigator.mediaDevices.getDisplayMedia(
+      displayMediaOptions
+    );
+
+    const [currentVideoTrack] = currentMediaStream.getVideoTracks();
+    const { height, width } = currentVideoTrack.getSettings();
+    const mediaRecorder = new MediaRecorder(currentMediaStream, {
+      bitsPerSecond: height && width ? height * width * CAPTURE_FPS : undefined,
+      mimeType: "video/webm",
+    });
+    const timeStamp = new Intl.DateTimeFormat(
+      DEFAULT_LOCALE,
+      CAPTURE_TIME_DATE_FORMAT
+    )
+      .format(new Date())
+      .replace(/[/:]/g, "-")
+      .replace(",", "");
+    const fileName = `Screen Capture ${timeStamp}.webm`;
+    const capturePath = join(DESKTOP_PATH, fileName);
+    const startTime = Date.now();
+    let hasCapturedData = false;
+
+    mediaRecorder.start();
+    mediaRecorder.addEventListener("dataavailable", async (event) => {
+      const { data } = event;
+
+      if (data) {
+        const bufferData = Buffer.from(await data.arrayBuffer());
+
+        await writeFile(
+          capturePath,
+          hasCapturedData
+            ? Buffer.concat([await readFile(capturePath), bufferData])
+            : bufferData,
+          hasCapturedData
+        );
+
+        if (mediaRecorder.state === "inactive") {
+          const { default: fixWebmDuration } = await import(
+            "fix-webm-duration"
+          );
+
+          fixWebmDuration(
+            bufferToBlob(await readFile(capturePath)),
+            Date.now() - startTime,
+            async (capturedFile) => {
+              await writeFile(
+                capturePath,
+                Buffer.from(await capturedFile.arrayBuffer()),
+                true
+              );
+              updateFolder(DESKTOP_PATH, fileName);
+            }
+          );
+        }
+
+        hasCapturedData = true;
+      }
+    });
+  }, [readFile, updateFolder, writeFile]);
 
   return useMemo(
     () =>
@@ -189,6 +288,18 @@ const useFolderContextMenu = (
                     },
                   ],
                 },
+                ...(isDesktop &&
+                "getDisplayMedia" in navigator.mediaDevices &&
+                window.MediaRecorder
+                  ? [
+                      {
+                        action: captureScreen,
+                        label: currentMediaStream?.active
+                          ? "Stop screen capture"
+                          : "Capture screen",
+                      },
+                    ]
+                  : []),
               ]
             : []),
           MENU_SEPERATOR,
@@ -239,6 +350,7 @@ const useFolderContextMenu = (
       }),
     [
       addToFolder,
+      captureScreen,
       contextMenu,
       isAscending,
       isDesktop,

package.json

@@ -52,6 +52,7 @@
     "butterchurn-presets": "^3.0.0-beta.4",
     "fflate": "^0.7.4",
     "file-type": "^18.1.0",
+    "fix-webm-duration": "^1.0.5",
     "framer-motion": "^8.4.3",
     "gif.js": "^0.2.0",
     "idb": "^7.1.1",

public/CREDITS.md

@@ -45,6 +45,7 @@ This project is greatly augmented by code from the open source community. Thank
 - [Matrix](https://github.com/Rezmason/matrix)
 - [QOI Decoder](https://gist.github.com/nicolaslegland/f0577cb49b1e56b729a2c0fc0aa151ba)
 - [jxl.js](https://github.com/niutech/jxl.js)
+- [fix-webm-duration](https://github.com/yusitnikov/fix-webm-duration)
 
 ## App Libraries
 

yarn.lock

@@ -3130,6 +3130,11 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+fix-webm-duration@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fix-webm-duration/-/fix-webm-duration-1.0.5.tgz#da4558a92196a677302bfc54780b494dd5336a96"
+  integrity sha512-b6oula3OfSknx0aWoLsxvp4DVIYbwsf+UAkr6EDAK3iuMYk/OSNKzmeSI61GXK0MmFTEuzle19BPvTxMIKjkZg==
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"