handle audio input permissions

app/components/record.js

@@ -7,6 +7,46 @@ import "react-dropdown/style.css";
 
 import CustomRecordPlugin from "./CustomRecordPlugin";
 
+const queryAndPromptAudio = async () => {
+  const permissionStatus = await navigator.permissions.query({name: 'microphone'})
+  if (permissionStatus.state == 'prompt') {
+    await navigator.mediaDevices.getUserMedia({ audio: true })
+  }
+}
+
+const AudioInputsDropdown = (props) => {
+  const [ddOptions, setDdOptions] = useState([]);
+
+  useEffect(() => {
+    const init = async () => {
+      await queryAndPromptAudio()
+
+      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);
+  };
+
+  return (
+    <Dropdown
+      options={ddOptions}
+      onChange={handleDropdownChange}
+      value={ddOptions[0]}
+    />
+  )
+}
+
 export default function Recorder(props) {
   const waveformRef = useRef();
   const [wavesurfer, setWavesurfer] = useState(null);
@@ -14,22 +54,10 @@ export default function Recorder(props) {
   const [isRecording, setIsRecording] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [deviceId, setDeviceId] = useState(null);
-  const [ddOptions, setDdOptions] = useState([]);
 
   useEffect(() => {
     document.getElementById("play-btn").disabled = true;
 
-    navigator.mediaDevices.enumerateDevices().then((devices) => {
-      const audioDevices = devices
-        .filter((d) => d.kind === "audioinput")
-        .map((d) => ({ value: d.deviceId, label: d.label }));
-
-      if (audioDevices.length < 1) return console.log("no audio input devices");
-
-      setDdOptions(audioDevices);
-      setDeviceId(audioDevices[0].value);
-    });
-
     if (waveformRef.current) {
       const _wavesurfer = WaveSurfer.create({
         container: waveformRef.current,
@@ -84,22 +112,15 @@ export default function Recorder(props) {
     wavesurfer?.playPause();
   };
 
-  const handleDropdownChange = (e) => {
-    setDeviceId(e.value);
-  };
-
   return (
     <div className="flex flex-col items-center justify-center max-w-[75vw] w-full">
       <div className="flex my-2 mx-auto">
-        <Dropdown
+        <AudioInputsDropdown setDeviceId={setDeviceId} />
-          options={ddOptions}
-          onChange={handleDropdownChange}
-          value={ddOptions[0]}
-        />
         &nbsp;
         <button
           onClick={handleRecClick}
           data-color={isRecording ? "red" : "blue"}
+          disabled={!deviceId}
         >
           {isRecording ? "Stop" : "Record"}
         </button>

app/page.js

@@ -19,7 +19,7 @@ const App = () => {
         <p className="text-gray-500">Capture The Signal, Not The Noise</p>
       </div>
 
-      <Recorder setStream={setStream} onStop={() => serverData.peer.send(JSON.stringify({ cmd: 'STOP' }))}/>
+      <Recorder setStream={setStream} onStop={() => serverData?.peer?.send(JSON.stringify({ cmd: 'STOP' }))}/>
       <Dashboard
         transcriptionText={serverData.text ?? "..."}
         finalSummary={serverData.finalSummary}