From 9c4eabfc9e4aa6866cca75ea6d407c684dc5451f Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Mon, 20 Nov 2023 18:43:10 +0800
Subject: [PATCH] fix audio input infinite rendering (#496)

---
 projects/app/src/web/common/hooks/useSpeech.ts | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/projects/app/src/web/common/hooks/useSpeech.ts b/projects/app/src/web/common/hooks/useSpeech.ts
index d5a98e600..3a90f0ce4 100644
--- a/projects/app/src/web/common/hooks/useSpeech.ts
+++ b/projects/app/src/web/common/hooks/useSpeech.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { POST } from '../api/request';
 import { useToast } from './useToast';
 import { useTranslation } from 'next-i18next';
@@ -8,7 +8,8 @@ export const useSpeech = (props?: { shareId?: string }) => {
   const { shareId } = props || {};
   const { t } = useTranslation();
   const mediaRecorder = useRef<MediaRecorder>();
-  const mediaStream = useRef<MediaStream>();
+  // const mediaStream = useRef<MediaStream>();
+  const [mediaStream, setMediaStream] = useState<MediaStream>();
   const { toast } = useToast();
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [isTransCription, setIsTransCription] = useState(false);
@@ -24,7 +25,7 @@ export const useSpeech = (props?: { shareId?: string }) => {
     return `${formattedMinutes}:${formattedSeconds}`;
   }, [audioSecond]);
 
-  const renderAudioGraph = (analyser: AnalyserNode, canvas: HTMLCanvasElement) => {
+  const renderAudioGraph = useCallback((analyser: AnalyserNode, canvas: HTMLCanvasElement) => {
     const bufferLength = analyser.frequencyBinCount;
     const backgroundColor = 'white';
     const dataArray = new Uint8Array(bufferLength);
@@ -47,12 +48,12 @@ export const useSpeech = (props?: { shareId?: string }) => {
       canvasCtx.fillRect(x, height - adjustedBarHeight, barWidth, adjustedBarHeight);
       x += barWidth + 1;
     }
-  };
+  }, []);
 
   const startSpeak = async (onFinish: (text: string) => void) => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      mediaStream.current = stream;
+      setMediaStream(stream);
       mediaRecorder.current = new MediaRecorder(stream);
       const chunks: Blob[] = [];
       setIsSpeaking(true);
@@ -121,8 +122,8 @@ export const useSpeech = (props?: { shareId?: string }) => {
       if (mediaRecorder.current && mediaRecorder.current.state !== 'inactive') {
         mediaRecorder.current.stop();
       }
-      if (mediaStream.current) {
-        mediaStream.current.getTracks().forEach((track) => track.stop());
+      if (mediaStream) {
+        mediaStream.getTracks().forEach((track) => track.stop());
       }
     };
   }, []);
@@ -133,7 +134,7 @@ export const useSpeech = (props?: { shareId?: string }) => {
     isSpeaking,
     isTransCription,
     renderAudioGraph,
-    stream: mediaStream.current,
+    stream: mediaStream,
     speakingTimeString
   };
 };