Merge pull request #108 from TEAM-Hearus/develop

Refactor: useRecord 성능 개선
TEAM-Hearus · Nov 11, 2024 · a6622cc · a6622cc
2 parents cec4923 + 1091011
commit a6622cc
Showing 1 changed file with 22 additions and 37 deletions.
diff --git a/src/hooks/useRecorder.ts b/src/hooks/useRecorder.ts
@@ -4,49 +4,38 @@ import { useAlertStore } from '../store/useAlertStore';
 export const useRecorder = (onAudioData: (data: string) => void) => {
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
-  const intervalRef = useRef<number | null>(null);
 
   const addAlert = useAlertStore((state) => state.addAlert);
 
-  const initMediaRecorder = (stream: MediaStream) => {
-    const options = { mimeType: 'audio/webm;codecs=opus' };
-    mediaRecorderRef.current = new MediaRecorder(stream, options);
-
-    mediaRecorderRef.current.ondataavailable = (event) => {
-      if (event.data.size > 0 && event.data != null) {
-        const reader = new FileReader();
-        reader.onload = (e) => {
-          const arrayBuffer = e.target?.result as ArrayBuffer;
-          if (arrayBuffer) {
-            const base64EncodedData = btoa(
-              String.fromCharCode(...new Uint8Array(arrayBuffer)),
-            );
-            onAudioData(base64EncodedData);
-          } else {
-            console.error(
-              '[mediaRecorder]-[ondataavailable] ArrayBuffer is null',
-            );
-          }
-        };
-        reader.readAsArrayBuffer(event.data);
-      }
-    };
-
-    mediaRecorderRef.current.start();
+  const handleDataAvailable = (event: BlobEvent) => {
+    if (event.data.size > 0) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const arrayBuffer = e.target?.result as ArrayBuffer;
+        if (arrayBuffer) {
+          const base64EncodedData = btoa(
+            String.fromCharCode(...new Uint8Array(arrayBuffer)),
+          );
+          onAudioData(base64EncodedData);
+        } else {
+          console.error(
+            '[mediaRecorder]-[ondataavailable] ArrayBuffer is null',
+          );
+        }
+      };
+      reader.readAsArrayBuffer(event.data);
+    }
   };
 
   const startRecording = async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       streamRef.current = stream;
-      initMediaRecorder(stream);
 
-      intervalRef.current = setInterval(() => {
-        if (mediaRecorderRef.current?.state === 'recording') {
-          mediaRecorderRef.current.stop();
-        }
-        initMediaRecorder(stream);
-      }, 3000);
+      const options = { mimeType: 'audio/webm;codecs=opus' };
+      mediaRecorderRef.current = new MediaRecorder(stream, options);
+      mediaRecorderRef.current.ondataavailable = handleDataAvailable;
+      mediaRecorderRef.current.start(3000);
     } catch (error) {
       addAlert(
         '마이크를 사용할 수 없습니다. 브라우저 설정을 확인해주세요.',
@@ -60,12 +49,8 @@ export const useRecorder = (onAudioData: (data: string) => void) => {
       mediaRecorderRef.current.stop();
     }
     streamRef.current?.getTracks().forEach((track) => track.stop());
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-    }
     mediaRecorderRef.current = null;
     streamRef.current = null;
-    intervalRef.current = null;
   };
 
   return { startRecording, stopRecording };