From 7a4624148fdc6821e2fb21f9edb5a65c677b6315 Mon Sep 17 00:00:00 2001
From: mathias <mathiasdurat@gmail.com>
Date: Thu, 23 May 2024 19:26:16 +0200
Subject: [PATCH] fix: Dockerfile and tyescript error

---
 Dockerfile  |  3 +++
 src/App.tsx | 71 ++++++++++++++++++++++++++---------------------------
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index f463e76..a81cb2f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,6 +1,9 @@
 # Start with a base image containing Node.js runtime
 FROM node:lts-alpine as build-stage
 
+ARG VITE_API_ENDPOINT
+ENV VITE_API_ENDPOINT $VITE_API_ENDPOINT
+
 # Set the working directory in the container to /app
 WORKDIR /app
 
diff --git a/src/App.tsx b/src/App.tsx
index fe7f585..6349801 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ function App() {
   const [micDisabled, setMicDisabled] = useState(true)
   const [iceStatus, setIceStatus] = useState('Waiting')
   const [chanStatus, setChanStatus] = useState('Click Join Button...')
-  const [speaking, setSpeaking] = useState(false)
+  // const [speaking, setSpeaking] = useState(false)
   // const [media, setMedia] = useState(new Array<element>())
 
   const [micInputList, setMicInputList] = useState(new Array<MediaDeviceInfo>())
@@ -114,37 +114,36 @@ function App() {
     console.log('onOpenCallback', onOpenCallback)
   }
 
-  const checkSpeaking = (source: MediaStream, threshold: number) => {
-    const audioContext = new AudioContext()
-    const analyser = audioContext.createAnalyser()
-    const microphone = audioContext.createMediaStreamSource(source)
-    const javascriptNode = audioContext.createScriptProcessor(2048, 1, 1)
-
-    analyser.smoothingTimeConstant = 0.8
-    analyser.fftSize = 1024
-
-    microphone.connect(analyser)
-    analyser.connect(javascriptNode)
-    javascriptNode.connect(audioContext.destination)
-
-    javascriptNode.onaudioprocess = () => {
-      const array = new Uint8Array(analyser.frequencyBinCount)
-      analyser.getByteFrequencyData(array)
-      let values = 0
-
-      const length = array.length
-      for (let i = 0; i < length; i++) {
-        values += array[i]
-      }
-
-      const average = values / length
-      if (average > threshold) {
-        setSpeaking(true)
-      } else {
-        setSpeaking(false)
-      }
-    }
-  }
+  // const checkSpeaking = (source: MediaStream, threshold: number) => {
+  //   const audioContext = new AudioContext()
+  //   const analyser = audioContext.createAnalyser()
+  //   const microphone = audioContext.createMediaStreamSource(source)
+  //
+  //   analyser.smoothingTimeConstant = 0.8
+  //   analyser.fftSize = 1024
+  //
+  //   microphone.connect(analyser)
+  //   analyser.connect(javascriptNode)
+  //   javascriptNode.connect(audioContext.destination)
+  //
+  //   javascriptNode.onaudioprocess = () => {
+  //     const array = new Uint8Array(analyser.frequencyBinCount)
+  //     analyser.getByteFrequencyData(array)
+  //     let values = 0
+  //
+  //     const length = array.length
+  //     for (let i = 0; i < length; i++) {
+  //       values += array[i]
+  //     }
+  //
+  //     const average = values / length
+  //     if (average > threshold) {
+  //       setSpeaking(true)
+  //     } else {
+  //       setSpeaking(false)
+  //     }
+  //   }
+  // }
 
   const onTrackCallback = (e: RTCTrackEvent) => {
     // console.log('ontrack', e.track);
@@ -201,7 +200,7 @@ function App() {
     media.addTrack(track)
     el.srcObject = media
     if (track.kind === 'audio') {
-      checkSpeaking(media, 30)
+      // checkSpeaking(media, 30)
       el.hidden = true
     }
     el.onloadedmetadata = () => console.log('unmuted workaround!')
@@ -255,8 +254,8 @@ function App() {
     setCamDisabled(true)
     streamCam.current = await navigator.mediaDevices.getUserMedia({
       video: {
-        width: 640,
-        height: 360,
+        width: 480,
+        height: 270,
         deviceId: selectedCam,
       },
     })
@@ -416,7 +415,7 @@ function App() {
       Status: <span id="ice_status">{iceStatus}</span>
       <div id="chan_status">{chanStatus}</div>
       <div id="media"></div>
-      <p>{speaking ? 'Speaking' : 'Silent'}</p>
+      {/*<p>{speaking ? 'Speaking' : 'Silent'}</p>*/}
     </div>
   )
 }