🐛 fix infinite increase memory

livemehere · Mar 12, 2024 · e64b635 · e64b635
1 parent 9e599d4
commit e64b635
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 43 deletions.
diff --git a/modules/main/MainWindow.ts b/modules/main/MainWindow.ts
@@ -18,6 +18,7 @@ import { dataPath } from "./dataPath";
 import { getFileMetaData, createResultFile } from "./ffmpeg-util";
 import rimraf from "rimraf";
 import { VideoCacheData, videoCacheManager } from "./videoCache";
+import * as stream from "stream";
 
 export type CaptureSource = DesktopCapturerSource & {
   dataURL: string;
@@ -28,6 +29,10 @@ export class MainWindow {
   private window: BrowserWindow;
   private bounds = setting.get("bounds");
 
+  private ws:stream.Writable | null = null;
+  private filePath:string = "";
+  private fileName:string = "";
+
   private init = () => {
     const bound: BrowserWindowConstructorOptions = this.bounds.main || {
       x: 0,
@@ -131,33 +136,45 @@ export class MainWindow {
       return this.getConnectedScreens();
     });
 
+    ipcMain.handle("cache-video:init",(event,arrayBuffer:ArrayBuffer)=>{
+        const fileName = `${Date.now()}.webm`;
+        const filePath = path.join(
+            dataPath.getFolder("cache-video"),
+            fileName,
+        );
+        this.ws = fs.createWriteStream(filePath);
+        this.fileName = fileName;
+        this.filePath = filePath;
+    })
+
+    ipcMain.handle("cache-video:chunk",(event,arrayBuffer:ArrayBuffer)=>{
+      this.ws?.write(Buffer.from(arrayBuffer));
+    })
+
     ipcMain.handle(
       "cache-video:save",
       async (
         event,
-        arrayBuffer: ArrayBuffer,
         duration: number,
         width: number,
         height: number,
       ) => {
         try {
-          const buffer = Buffer.from(arrayBuffer);
-          const fileName = `${Date.now()}.webm`;
-          const filePath = path.join(
-            dataPath.getFolder("cache-video"),
-            fileName,
-          );
-          fs.writeFileSync(filePath, buffer);
+          this.ws?.end();
           const cacheData: VideoCacheData = {
-            fileName,
-            filePath,
+            fileName:this.fileName,
+            filePath:this.filePath,
             duration,
             size: {
               width,
               height,
             },
           };
-          videoCacheManager.set(fileName, cacheData);
+          videoCacheManager.set(this.fileName, cacheData);
+          this.ws = null;
+          this.filePath = "";
+          this.fileName = "";
+
           return cacheData;
         } catch (e) {
           console.error(e);

diff --git a/modules/main/dataPath.ts b/modules/main/dataPath.ts
@@ -10,6 +10,11 @@ class DataPath {
     const folder = path.join(this.root, type);
     if (!fs.existsSync(folder)) {
       fs.mkdirSync(folder);
+    }else{
+      const list = fs.readdirSync(folder);
+      if(list.find(file=> file === '.DS_Store')){
+        fs.rmSync(path.join(folder, '.DS_Store'));
+      }
     }
     return folder;
   }

diff --git a/modules/main/ffmpeg-util/index.ts b/modules/main/ffmpeg-util/index.ts
@@ -37,7 +37,6 @@ export function createResultFile(options: TrimVideoOptions) {
     const y = Math.max(0, options.crop.y);
     const w = Math.min(options.originSize.width - 1, options.crop.w);
     const h = Math.min(options.originSize.height - 1, options.crop.h);
-    console.log(x, y, w, h);
     videoFilters.push(`crop=${w}:${h}:${x}:${y}`);
   } else {
     videoFilters.push(

diff --git a/modules/main/videoCache.ts b/modules/main/videoCache.ts
@@ -28,6 +28,7 @@ class VideoCacheManager {
   set(fileName: string, data: VideoCacheData) {
     this.data[fileName] = data;
     fs.writeFileSync(this.path, JSON.stringify(this.data));
+    this.data = parseDataFile(this.path, {});
   }
 
   clear() {

diff --git a/modules/preload/index.ts b/modules/preload/index.ts
@@ -55,7 +55,6 @@ contextBridge.exposeInMainWorld("app", {
         },
       });
 
-      console.log(audioStream.getAudioTracks());
       const selector = options.selector;
       const video = document.querySelector(selector) as HTMLVideoElement;
       if (!video) {

diff --git a/modules/renderer/index.html b/modules/renderer/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Screen Recorder</title>
+    <title>Record Editor</title>
 </head>
 <body class="dark">
     <div id="root"></div>

diff --git a/modules/renderer/src/Layout/index.tsx b/modules/renderer/src/Layout/index.tsx
@@ -45,7 +45,7 @@ const Layout: FC<Props> = ({ children }) => {
     >
       <div className="dragbar">
         <img src={LogoImg} alt="logo" />
-        <h1>Screen Recorder</h1>
+        <h1>Record Editor</h1>
       </div>
       <Nav />
       <main

diff --git a/modules/renderer/src/components/EditCanvasLayer.tsx b/modules/renderer/src/components/EditCanvasLayer.tsx
@@ -94,7 +94,6 @@ export const EditCanvasLayer: FC<Props> = ({
             }}
             onTransformEnd={() => {
               const node = rectRef.current!;
-              console.log(node);
               onChangeRectArea?.({
                 x: node.x(),
                 y: node.y(),

diff --git a/modules/renderer/src/lib/Stream/Stream.tsx b/modules/renderer/src/lib/Stream/Stream.tsx
@@ -86,54 +86,43 @@ export const Stream: FC<Props> = ({ onSuccess, onChangeStatus, control }) => {
         });
         mediaRecorderRef.current = recorder;
 
-        recorder.onstart = () => {
+        recorder.onstart = async () => {
           startTimestamp.current = Date.now();
           chunk.current = [];
+          // @ts-ignore
+          await window.app.invoke("cache-video:init");
           onChangeStatus?.("recording");
           debug("recorder start");
         };
 
-        recorder.ondataavailable = (e) => {
-          chunk.current.push(e.data);
+        recorder.ondataavailable = async (e) => {
+          const blob = e.data;
+          const buffer = await blob.arrayBuffer();
+
+          // @ts-ignore
+          await window.app.invoke('cache-video:chunk', buffer);
         };
 
-        recorder.onstop = () => {
+        recorder.onstop = async () => {
           const source = sourceRef.current;
           if (!source) {
             throw new Error("sourceRef.current is undefined");
           }
 
           const duration = (Date.now() - startTimestamp.current) / 1000;
-          const blob = new Blob(chunk.current, {
-            type: "video/webm",
-          });
-
-          /** 녹화를 다 하면, 그때 비디오 사이즈를 그대로 저장함.  */
-          blob.arrayBuffer().then((buffer) => {
-            const { width, height } = stream.getVideoTracks()[0].getSettings();
-            // @ts-ignore
-            window.app
-              .invoke<VideoCacheData>(
-                "cache-video:save",
-                buffer,
-                duration,
-                width,
-                height,
-              )
-              .then((cacheData: VideoCacheData) => {
-                /** Clean up */
-                this.cleanUp();
-                onSuccess?.(cacheData);
-              });
-          });
+          const { width, height } = stream.getVideoTracks()[0].getSettings();
+          // @ts-ignore
+          const cacheData = await window.app.invoke('cache-video:save',duration,width,height);
+          this.cleanUp();
+          onSuccess?.(cacheData);
         };
 
         recorder.onerror = (e) => {
           this.cleanUp();
           sourceRef.current = undefined;
           throw e;
         };
-        recorder.start();
+        recorder.start(1000);
       },
       stop() {
         mediaRecorderRef.current?.stop();