useAudioDevice hook + permission mngmnt

www/app/transcripts/new/page.js

@@ -5,6 +5,7 @@ import { Dashboard } from "../dashboard";
 import useWebRTC from "../useWebRTC";
 import useTranscript from "../useTranscript";
 import { useWebSockets } from "../useWebSockets";
+import useAudioDevice from "../useAudioDevice";
 import "../../styles/button.css";
 
 const App = () => {
@@ -24,6 +25,13 @@ const App = () => {
   const transcript = useTranscript();
   const webRTC = useWebRTC(stream, transcript.response?.id);
   const webSockets = useWebSockets(transcript.response?.id);
+  const {
+    loading,
+    permissionOk,
+    audioDevices,
+    requestPermission,
+    getAudioStream,
+  } = useAudioDevice();
 
   return (
     <div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
@@ -32,23 +40,54 @@ const App = () => {
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>
 
-      <Recorder
+      {permissionOk ? (
-        setStream={setStream}
+        <>
-        onStop={() => {
+          <Recorder
-          webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
+            setStream={setStream}
-          setStream(null);
+            onStop={() => {
-        }}
+              webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
-      />
+              setStream(null);
+            }}
+            getAudioStream={getAudioStream}
+            audioDevices={audioDevices}
+          />
 
-      <hr />
+          <Dashboard
-
+            transcriptionText={webSockets.transcriptText}
-      <Dashboard
+            finalSummary={webSockets.finalSummary}
-        transcriptionText={webSockets.transcriptText}
+            topics={webSockets.topics}
-        finalSummary={webSockets.finalSummary}
+            stream={stream}
-        topics={webSockets.topics}
+            disconnected={disconnected}
-        stream={stream}
+          />
-        disconnected={disconnected}
+        </>
-      />
+      ) : (
+        <>
+          <div className="flex flex-col items-center justify-center w-fit bg-white px-6 py-8 mt-8 rounded-xl">
+            <h1 className="text-2xl font-bold text-blue-500">
+              Audio Permissions
+            </h1>
+            {loading ? (
+              <p className="text-gray-500 text-center mt-5">
+                Checking permission...
+              </p>
+            ) : (
+              <>
+                <p className="text-gray-500 text-center mt-5">
+                  Reflector needs access to your microphone to work.
+                  <br />
+                  Please grant permission to continue.
+                </p>
+                <button
+                  className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto"
+                  onClick={requestPermission}
+                >
+                  Grant Permission
+                </button>
+              </>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 };

www/app/transcripts/recorder.js

@@ -15,24 +15,11 @@ const AudioInputsDropdown = (props) => {
   const [ddOptions, setDdOptions] = useState([]);
 
   useEffect(() => {
-    const init = async () => {
+    setDdOptions(props.audioDevices);
-      // Request permission to use audio inputs
+    props.setDeviceId(
-      await navigator.mediaDevices
+      props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
-        .getUserMedia({ audio: true })
+    );
-        .then((stream) => stream.getTracks().forEach((t) => t.stop()));
+  }, [props.audioDevices]);
-
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      const audioDevices = devices
-        .filter((d) => d.kind === "audioinput" && d.deviceId != "")
-        .map((d) => ({ value: d.deviceId, label: d.label }));
-
-      if (audioDevices.length < 1) return console.log("no audio input devices");
-
-      setDdOptions(audioDevices);
-      props.setDeviceId(audioDevices[0].value);
-    };
-    init();
-  }, []);
 
   const handleDropdownChange = (e) => {
     props.setDeviceId(e.value);
@@ -131,16 +118,12 @@ export default function Recorder(props) {
       setIsRecording(false);
       document.getElementById("play-btn").disabled = false;
     } else {
-      const stream = await navigator.mediaDevices.getUserMedia({
+      const stream = await props.getAudioStream(deviceId);
-        audio: {
-          deviceId,
-          noiseSuppression: false,
-          echoCancellation: false,
-        },
-      });
-      await record.startRecording(stream);
       props.setStream(stream);
-      setIsRecording(true);
+      if (stream) {
+        await record.startRecording(stream);
+        setIsRecording(true);
+      }
     }
   };
 
@@ -158,7 +141,11 @@ export default function Recorder(props) {
   return (
     <div className="relative flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
-        <AudioInputsDropdown setDeviceId={setDeviceId} disabled={isRecording} />
+        <AudioInputsDropdown
+          audioDevices={props.audioDevices}
+          setDeviceId={setDeviceId}
+          disabled={isRecording}
+        />
         &nbsp;
         <button
           className="w-20"

www/app/transcripts/useAudioDevice.js

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+const useAudioDevice = () => {
+  const [permissionOk, setPermissionOk] = useState(false);
+  const [audioDevices, setAudioDevices] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const requestPermission = () => {
+    navigator.mediaDevices
+      .getUserMedia({
+        audio: true,
+      })
+      .then(() => {
+        setPermissionOk(true);
+        updateDevices();
+      })
+      .catch(() => {
+        setPermissionOk(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const getAudioStream = async (deviceId) => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          deviceId,
+          noiseSuppression: false,
+          echoCancellation: false,
+        },
+      });
+      return stream;
+    } catch (e) {
+      setPermissionOk(false);
+      setAudioDevices([]);
+      return null;
+    }
+  };
+
+  const updateDevices = async () => {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const _audioDevices = devices
+      .filter(
+        (d) => d.kind === "audioinput" && d.deviceId != "" && d.label != "",
+      )
+      .map((d) => ({ value: d.deviceId, label: d.label }));
+
+    setPermissionOk(_audioDevices.length > 0);
+    setAudioDevices(_audioDevices);
+  };
+
+  useEffect(() => {
+    requestPermission();
+  }, []);
+
+  return {
+    permissionOk,
+    audioDevices,
+    getAudioStream,
+    requestPermission,
+    loading,
+  };
+};
+
+export default useAudioDevice;