From 48c60bd982734676f972514f7074be6121e7c5df Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Wed, 8 Jun 2022 18:24:53 -0400
Subject: big commit. FINALLY got the combining segments to work using ffmpeg
 using a different workflow. small ui changes as well.

---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 126 ++++-----------------
 1 file changed, 23 insertions(+), 103 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index a5c2dc85c..8c8728fc3 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -18,7 +18,7 @@ export interface MediaSegment {
 }
 
 interface IRecordingViewProps {
-      setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
+      setResult: (info: Upload.AccessPathInfo, trackScreen: boolean) => void
       setDuration: (seconds: number) => void
       id: string
 }
@@ -57,7 +57,7 @@ export function RecordingView(props: IRecordingViewProps) {
 
     useEffect(() => {
           
-        console.log('in videos useEffect')
+        // console.log('in videos useEffect', finished)
 
           if (finished) {
               (async () => {
@@ -71,89 +71,18 @@ export function RecordingView(props: IRecordingViewProps) {
                     const { name } = videoFile;
                     inputPaths.push(name)
                   })
-                
-                  console.log(inputPaths)
                   
-                  const data = await Networking.UploadSegmentsAndConcatenate(videoFiles)
-                  console.log('data', 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");
-                  }
-                
-                
+                const serverPaths: string[] = (await Networking.UploadFilesToServer(videoFiles))
+                  .map(res => (res.result instanceof Error) ? '' : res.result.accessPaths.agnostic.server)
                 
-                // const inputListName = 'order.txt';
-                // fs.writeFileSync(inputListName, inputPaths.join('\n'));
-                // var merge = ffmpeg();
-                // merge.input(inputListName)
-                //   .inputOptions(['-f concat', '-safe 0'])
-                //   .outputOptions('-c copy')
-                //   .save('output.mp4')
-                
-                // fs.unlinkSync(inputListName);
-
-                // const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths)
-                // console.log('combined', combined)
-                
-                // const outputFile = new File(['output.mp4'], 'output.mp4', { type: 'video/mp4', lastModified: Date.now() });
-
-                // const data = await Networking.UploadFilesToServer(combined)
-                //   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');
+                const result: Upload.AccessPathInfo | Error = await Networking.PostToServer('/concatVideos', serverPaths)
+                console.log(result)
+                if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                    props.setResult(result, trackScreen)
+                } else {
+                    alert("video conversion failed");
+                }
+              
               })();
               
             }
@@ -162,8 +91,6 @@ export function RecordingView(props: IRecordingViewProps) {
     }, [videos])
   
   useEffect(() => {
-          
-        console.log('in finish useEffect')
 
     if (finished) {
       setOrderVideos(true);
@@ -177,7 +104,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(() => {
@@ -244,7 +171,6 @@ export function RecordingView(props: IRecordingViewProps) {
                   // reset the temporary chunks
                   videoChunks = []
                   setRecording(false);
-                  setFinished(true);
                   trackScreen && RecordingApi.Instance.pause();
             }
 
@@ -269,8 +195,10 @@ export function RecordingView(props: IRecordingViewProps) {
       }
 
 
-      const stop = () => {
-            if (videoRecorder.current) {
+  const stop = (e: React.MouseEvent) => {
+        e.stopPropagation()
+        if (videoRecorder.current) {
+                                      setFinished(true);
                   if (videoRecorder.current.state !== "inactive") {
                         videoRecorder.current.stop();
                         // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
@@ -278,19 +206,21 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
-      const pause = () => {
+      const pause = (e: React.MouseEvent) => {
+        e.stopPropagation()
             if (videoRecorder.current) {
                   if (videoRecorder.current.state === "recording") {
-                        videoRecorder.current.pause();
+                    videoRecorder.current.stop();
                   }
             }
       }
 
-      const startOrResume = () => {
+      const startOrResume =  (e: React.MouseEvent) => {
+        e.stopPropagation()
             if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
                   record();
             } else if (videoRecorder.current.state === "paused") {
-                  videoRecorder.current.resume();
+              videoRecorder.current.start();
             }
       }
 
@@ -315,16 +245,6 @@ 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">
-- 
cgit v1.2.3-70-g09d2

