basic screen recording function

src/hooks/useScreenRecorder.ts

@@ -0,0 +1,67 @@
+import { useState } from "react";
+
+type UseScreenRecorderReturn = {
+  recording: boolean;
+  toggleRecording: () => void;
+};
+
+export function useScreenRecorder(): UseScreenRecorderReturn {
+  const [recording, setRecording] = useState(false);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
+    null
+  );
+
+  const startRecording = async () => {
+    const sources = await window.electronAPI.getSources({ types: ["screen"] });
+    const source = sources[0];
+
+    const stream = await (navigator.mediaDevices as any).getUserMedia({
+      audio: false,
+      video: {
+        mandatory: {
+          chromeMediaSource: "desktop",
+          chromeMediaSourceId: source.id,
+        },
+      },
+    });
+
+    const recorder = new MediaRecorder(stream);
+    setMediaRecorder(recorder);
+
+    const recordingChunks: Blob[] = [];
+
+    recorder.ondataavailable = (e) => {
+      recordingChunks.push(e.data);
+    };
+    
+    recorder.onstop = () => {
+      const blob = new Blob(recordingChunks, { type: "video/webm" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `recording-${Date.now()}.webm`;
+      a.click();
+      URL.revokeObjectURL(url);
+    };
+
+    recorder.start();
+    setRecording(true);
+  };
+
+  const stopRecording = () => {
+    if (mediaRecorder && mediaRecorder.state === 'recording') {
+      mediaRecorder.stop();
+    }
+    setRecording(false);
+  };
+
+  const toggleRecording = () => {
+    if (!recording) {
+      startRecording();
+    } else {
+      stopRecording();
+    }
+  };
+
+  return { recording, toggleRecording };
+}