1 files changed, 10 insertions, 3 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 15f8c8626..9be972d53 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -6,6 +6,8 @@ import { MdBackspace } from 'react-icons/md';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from "react-icons";
 
+import { RecordingApi } from '../../../apis/recording/recordingApi';
+
 
 enum RecordingStatus {
       Recording,
@@ -36,7 +38,9 @@ export function RecordingView() {
       const recorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
-      const [finished, setFinished] = useState<Boolean>(false)
+    const [finished, setFinished] = useState<Boolean>(false)
+    
+    const recordingApiRef = useRef<any | null>(null);
 
       
 
@@ -206,7 +210,8 @@ export function RecordingView() {
       const startOrResume = () => {
           console.log('[RecordingView.tsx] startOrResume')
             if (!recorder.current || recorder.current.state === "inactive") {
-                  record();
+                record();
+                recordingApiRef.current.startAndInit()
             } else if (recorder.current.state === "paused") {
                   recorder.current.resume();
             }
@@ -319,7 +324,9 @@ export function RecordingView() {
                                                 <i className="bx bxs-volume-mute"></i>
                                           )}
                                     </button>  */}
-                        </div>
+                  </div>
+                  
+                  <RecordingApi ref={recordingApiRef}></RecordingApi>
 
                   </div>
             </div>)