fix: added a generic audio-stream request to reset permission

Eyevinn · Dec 4, 2024 · 050a6bd · 050a6bd
1 parent fa3f08b
commit 050a6bd
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/src/components/production-line/production-line.tsx b/src/components/production-line/production-line.tsx
@@ -315,7 +315,7 @@ export const ProductionLine: FC = () => {
       joinProductionOptions
     );
     if (joinProductionOptions) {
-      console.log("ProductionLine - payload at line318:", payload);
+      console.log("ProductionLine - payload at line322:", payload);
       resetAudioInput();
       muteInput(true);
       setSessionId(null);

diff --git a/src/components/production-line/use-audio-input.ts b/src/components/production-line/use-audio-input.ts
@@ -27,26 +27,31 @@ export const useAudioInput: TUseAudioInput = ({
 
     if (audioInputId === "no-device") return setAudioInput("no-device");
 
-    navigator.mediaDevices
-      .getUserMedia({
-        audio: {
-          deviceId: {
-            exact: audioInputId,
+    // First request a generic audio stream to "reset" permissions
+    navigator.mediaDevices.getUserMedia({ audio: true }).then(() => {
+      // Then request the specific audio input the user has selected
+      navigator.mediaDevices
+        .getUserMedia({
+          audio: {
+            deviceId: {
+              exact: audioInputId,
+            },
+            noiseSuppression: true,
           },
-          noiseSuppression: true,
-        },
-      })
-      .then((stream) => {
-        if (aborted) return;
+        })
+        .then((stream) => {
+          if (aborted) return;
 
-        // Default to muted input
-        stream.getTracks().forEach((t) => {
-          // eslint-disable-next-line no-param-reassign
-          t.enabled = false;
+          // Default to muted input
+          stream.getTracks().forEach((t) => {
+            // eslint-disable-next-line no-param-reassign
+            t.enabled = false;
+          });
+          console.log("audioInput-id on start:", stream.id);
+          console.log("audioInput on start:", stream.active);
+          setAudioInput(stream);
         });
-
-        setAudioInput(stream);
-      });
+    });
 
     return () => {
       aborted = true;
@@ -57,8 +62,14 @@ export const useAudioInput: TUseAudioInput = ({
 
   // Reset function to set audioInput to null
   const reset = useCallback(() => {
+    if (audioInput && audioInput !== "no-device") {
+      console.log("audioInput-id:", audioInput.id);
+      console.log("audioInput before stop:", audioInput.active);
+      audioInput.getTracks().forEach((t) => t.stop());
+      console.log("audioInput after stop:", audioInput.active);
+    }
     setAudioInput(null);
-  }, []);
+  }, [audioInput]);
 
   return [audioInput, reset];
 };
diff --git a/src/components/production-line/use-rtc-connection.ts b/src/components/production-line/use-rtc-connection.ts
@@ -345,6 +345,10 @@ export const useRtcConnection = ({
     noStreamError,
   ]);
 
+  const connection = rtcPeerConnectionRef.current
+    ? rtcPeerConnectionRef.current.connectionState
+    : null;
+
   // Debug hook for logging RTC events TODO remove
   useEffect(() => {
     if (
@@ -414,7 +418,7 @@ export const useRtcConnection = ({
         onNegotiationNeeded
       );
     };
-  }, [rtcPeerConnectionRef]);
+  }, [connection]);
 
   return { connectionState, audioElements };
 };