recording only has 0 second

1 files changed, 47 insertions, 52 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 3a79f790f..16f750e14 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -15,8 +15,8 @@ enum RecordingStatus {
       Paused
 }
 
-interface VideoSegment {
-      chunks: any[],
+interface MediaSegment {
+      videoChunks: any[],
       endTime: number
 }
 
@@ -36,10 +36,10 @@ export function RecordingView(props: IRecordingViewProps) {
       const [speed, setSpeed] = useState(1);
       const [muted, setMuted] = useState(false);
 
-      const [videos, setVideos] = useState<VideoSegment[]>([]);
-      // const [videos, setVideos] = useState<string[]>([]);
+      const [videos, setVideos] = useState<MediaSegment[]>([]);
       const [currentVid, setCurrentVid] = useState<number>(0);
-      const recorder = useRef<MediaRecorder | null>(null);
+      const videoRecorder = useRef<MediaRecorder | null>(null);
+      const audioRecorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
       const [finished, setFinished] = useState<Boolean>(false)
@@ -47,10 +47,13 @@ export function RecordingView(props: IRecordingViewProps) {
 
 
       const DEFAULT_MEDIA_CONSTRAINTS = {
-            video: {
-                  width: 1280,
-                  height: 720,
-            },
+            video: true,
+            // audio: true
+            // video: {
+            //       width: 1280,
+            //       height: 720,
+            // },
+            // audio: true,
             // audio: {
             //       echoCancellation: true,
             //       noiseSuppression: true,
@@ -64,8 +67,8 @@ export function RecordingView(props: IRecordingViewProps) {
                   let allVideoChunks: any = []
                   console.log(videos)
                   videos.forEach((vid) => {
-                        console.log(vid.chunks)
-                        allVideoChunks = allVideoChunks.concat(vid.chunks)
+                        console.log(vid.videoChunks)
+                        allVideoChunks = allVideoChunks.concat(vid.videoChunks)
                   })
 
                   console.log(allVideoChunks)
@@ -119,21 +122,9 @@ export function RecordingView(props: IRecordingViewProps) {
 
       useEffect(() => {
             // get access to the video element on every render
-            // videoElement = document.getElementById('video') as HTMLVideoElement;
             videoElementRef.current = document.getElementById('video') as HTMLVideoElement;
       })
 
-      // useEffect(() => {
-      //       if (playing) {
-      //             videoElement!.srcObject = null
-      //             // videoElement!.src = videos[currentVid].url
-      //             videoElement!.muted = false
-      //             videoElement!.play()
-      //       } else {
-      //             videoElement!.pause();
-      //       }
-      // }, [playing, videoElement]);
-
       useEffect(() => {
             let interval: any = null;
             if (recording) {
@@ -157,8 +148,6 @@ export function RecordingView(props: IRecordingViewProps) {
       }
       const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
             const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
-            // const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-
 
             videoElementRef.current!.src = ""
             videoElementRef.current!.srcObject = stream
@@ -169,80 +158,86 @@ export function RecordingView(props: IRecordingViewProps) {
 
       const record = async () => {
             const stream = await startShowingStream();
-            recorder.current = new MediaRecorder(stream)
+            videoRecorder.current = new MediaRecorder(stream)
+            // audioRecorder.current = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
 
             // temporary chunks of video
-            let chunks: any = []
-            recorder.current.ondataavailable = (event: any) => {
-                  // store the video chunks as it is recording
-                  console.log("data available")
+            let videoChunks: any = []
+            // let audioChunks: any = []
+
+            videoRecorder.current.ondataavailable = (event: any) => {
                   if (event.data.size > 0) {
-                        chunks.push(event.data)
+                        videoChunks.push(event.data)
                   }
             }
 
-            recorder.current.onstart = (event: any) => {
-                  console.log("on start")
+            // audioRecorder.current.ondataavailable = (event: any) => {
+            //       if (event.data.size > 0) {
+            //             audioChunks.push(event.data)
+            //       }
+            // }
+
+            videoRecorder.current.onstart = (event: any) => {
                   setRecording(true);
             }
 
-            recorder.current.onstop = () => {
+            videoRecorder.current.onstop = () => {
                   // if we have a last portion
-                  if (chunks.length > 1) {
+                  if (videoChunks.length > 1) {
                         // append the current portion to the video pieces
-                        setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
+                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
                   }
 
                   // reset the temporary chunks
-                  chunks = []
+                  videoChunks = []
                   setRecording(false);
                   setFinished(true);
             }
 
             // recording paused
-            recorder.current.onpause = (event: any) => {
+            videoRecorder.current.onpause = (event: any) => {
                   // append the current portion to the video pieces
-                  console.log(chunks)
-                  setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
+                  console.log(videoChunks)
+                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
 
                   // reset the temporary chunks
-                  chunks = []
+                  videoChunks = []
                   setRecording(false);
             }
 
-            recorder.current.onresume = async (event: any) => {
+            videoRecorder.current.onresume = async (event: any) => {
                   console.log(event)
                   await startShowingStream();
                   setRecording(true);
             }
 
-            recorder.current.start(200)
+            videoRecorder.current.start(200)
       }
 
 
       const stop = () => {
-            if (recorder.current) {
-                  if (recorder.current.state !== "inactive") {
-                        recorder.current.stop();
+            if (videoRecorder.current) {
+                  if (videoRecorder.current.state !== "inactive") {
+                        videoRecorder.current.stop();
                         // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
                   }
             }
       }
 
       const pause = () => {
-            if (recorder.current) {
-                  if (recorder.current.state === "recording") {
-                        recorder.current.pause();
+            if (videoRecorder.current) {
+                  if (videoRecorder.current.state === "recording") {
+                        videoRecorder.current.pause();
                   }
             }
       }
 
       const startOrResume = () => {
             console.log('[RecordingView.tsx] startOrResume')
-            if (!recorder.current || recorder.current.state === "inactive") {
+            if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
                   record();
-            } else if (recorder.current.state === "paused") {
-                  recorder.current.resume();
+            } else if (videoRecorder.current.state === "paused") {
+                  videoRecorder.current.resume();
             }
       }