ffmpeg code added, but there is an error with sharedArrayBuffer

1 files changed, 59 insertions, 23 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 87716e9cc..5cfb03414 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -7,12 +7,13 @@ 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';
 
 import { RecordingApi } from '../../../util/RecordingApi';
 
 interface MediaSegment {
-      videoChunks: any[],
-      endTime: number
+    videoChunks: any[],
+    endTime: number
 }
 
 interface IRecordingViewProps {
@@ -31,7 +32,8 @@ export function RecordingView(props: IRecordingViewProps) {
       const [playing, setPlaying] = useState(false);
       const [progress, setProgress] = useState(0);
 
-      const [videos, setVideos] = useState<MediaSegment[]>([]);
+    const [videos, setVideos] = useState<MediaSegment[]>([]);
+    // const [order, setOrder] = useState<number[]>([]);
       const videoRecorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
@@ -52,28 +54,52 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
-      useEffect(() => {
+    useEffect(() => {
+          
+        console.log('in finish useEffect')
 
-            if (finished) {
+          if (finished) {
+                        // load ffmpe
+              (async () => {
+                  console.log('crossOriginIsolated', crossOriginIsolated)
                   props.setDuration(recordingTimer * 100)
-                  let allVideoChunks: any = []
-                  videos.forEach((vid) => {
-                        console.log(vid.videoChunks)
-                        allVideoChunks = allVideoChunks.concat(vid.videoChunks)
-                  })
-
-                  const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() });
-
-                  Networking.UploadFilesToServer(videoFile)
-                        .then((data) => {
-                              const result = data[0].result
-                              if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                                    props.setResult(result, trackScreen)
-                              } else {
-                                    alert("video conversion failed");
-                              }
-                        })
 
+                  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');
+              })();
+              
             }
 
 
@@ -84,7 +110,7 @@ export function RecordingView(props: IRecordingViewProps) {
             if (!navigator.mediaDevices) {
                   console.log('This browser does not support getUserMedia.')
             }
-            console.log('This device has the correct media devices.')
+          console.log('This device has the correct media devices.')
       }, [])
 
       useEffect(() => {
@@ -222,6 +248,16 @@ export function RecordingView(props: IRecordingViewProps) {
             const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
             return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
       }
+    
+      const doTranscode = async () => {
+          
+        // console.log('Start transcoding');
+        // ffmpeg.FS('writeFile', 'test.avi', await fetchFile('/flame.avi'));
+        // await ffmpeg.run('-i', 'test.avi', 'test.mp4');
+        // console.log('Complete transcoding');
+        // const data = ffmpeg.FS('readFile', 'test.mp4');
+        // console.log(URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' })));
+    };
 
       return (
             <div className="recording-container">