switch to fluent ffmpeg

1 files changed, 53 insertions, 35 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 5cfb03414..994111bd4 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -7,7 +7,7 @@ import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from "react-icons";
 import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
-import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
+const ffmpeg = require("fluent-ffmpeg");
 
 import { RecordingApi } from '../../../util/RecordingApi';
 
@@ -59,45 +59,63 @@ export function RecordingView(props: IRecordingViewProps) {
         console.log('in finish useEffect')
 
           if (finished) {
-                        // load ffmpe
               (async () => {
-                  console.log('crossOriginIsolated', crossOriginIsolated)
-                  props.setDuration(recordingTimer * 100)
+                const inputPaths: string[] = [];
+                  videos.forEach(async (vid, i) => {
+                    const videoFile = new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() });
+                    const { name } = videoFile;
+                    ffmpeg(name)
+                    inputPaths.push(name)
+                  });
 
-                  console.log('Loading ffmpeg-core.js');
-                  const ffmpeg = createFFmpeg({ log: true });
-                  await ffmpeg.load();
-                  console.log('ffmpeg-core.js loaded');
                   
-                  let allVideoChunks: any = [];
-                  const inputPaths: string[] = [];
-                  // write each segment into it's indexed file
-                  videos.forEach(async (vid, i) => {
-                      const vidName = `segvideo${i}.mkv`
-                      inputPaths.push(vidName)
-                      const videoFile = new File(vid.videoChunks, vidName, { type: allVideoChunks[0].type, lastModified: Date.now() });
-                      ffmpeg.FS('writeFile', vidName, await fetchFile(videoFile));
-                  })
-                  ffmpeg.FS('writeFile', 'order.txt', inputPaths.join('\n'));
                   
-                  console.log('concat')
-                  await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'order.txt', 'ouput.mp4');
-
-                  const { buffer } = ffmpeg.FS('readFile', 'output.mp4');
-                  const concatVideo = new File([buffer], 'concat.mp4', { type: "video/mp4" });
-
-                  const data = await Networking.UploadFilesToServer(concatVideo)
-                  const result = data[0].result
-                  if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                      props.setResult(result, trackScreen)
-                  } else {
-                      alert("video conversion failed");
-                  }
+
+                  if (format.includes("x-matroska")) {
+                    await new Promise(res => ffmpeg(file.path)
+                        .videoCodec("copy") // this will copy the data instead of reencode it
+                        .save(file.path.replace(".mkv", ".mp4"))
+                        .on('end', res));
+                    file.path = file.path.replace(".mkv", ".mp4");
+                    format = ".mp4";
+                }
+                //   console.log('crossOriginIsolated', crossOriginIsolated)
+                //   props.setDuration(recordingTimer * 100)
+
+                //   console.log('Loading ffmpeg-core.js');
+                //   const ffmpeg = createFFmpeg({ log: true });
+                //   await ffmpeg.load();
+                //   console.log('ffmpeg-core.js loaded');
+                  
+                //   let allVideoChunks: any = [];
+                //   const inputPaths: string[] = [];
+                //   // write each segment into it's indexed file
+                //   videos.forEach(async (vid, i) => {
+                //       const vidName = `segvideo${i}.mkv`
+                //       inputPaths.push(vidName)
+                //       const videoFile = new File(vid.videoChunks, vidName, { type: allVideoChunks[0].type, lastModified: Date.now() });
+                //       ffmpeg.FS('writeFile', vidName, await fetchFile(videoFile));
+                // //   })
+                //   ffmpeg.FS('writeFile', 'order.txt', inputPaths.join('\n'));
+                  
+                //   console.log('concat')
+                //   await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'order.txt', 'ouput.mp4');
+
+                //   const { buffer } = ffmpeg.FS('readFile', 'output.mp4');
+                //   const concatVideo = new File([buffer], 'concat.mp4', { type: "video/mp4" });
+
+                //   const data = await Networking.UploadFilesToServer(concatVideo)
+                //   const result = data[0].result
+                //   if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                //       props.setResult(result, trackScreen)
+                //   } else {
+                //       alert("video conversion failed");
+                //   }
                   
-                  // delete all files in MEMFS
-                  inputPaths.forEach(path => ffmpeg.FS('unlink', path));
-                  ffmpeg.FS('unlink', 'order.txt');
-                  ffmpeg.FS('unlink', 'output.mp4');
+                //   // delete all files in MEMFS
+                //   inputPaths.forEach(path => ffmpeg.FS('unlink', path));
+                //   ffmpeg.FS('unlink', 'order.txt');
+                //   ffmpeg.FS('unlink', 'output.mp4');
               })();
               
             }