FIX: reimplemented the old stream behavior on bad navigators like chrome

front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte

@@ -3,10 +3,11 @@
     import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
     import chromeImg from "./images/help-setting-camera-permission-chrome.png";
+    import {getNavigatorType, isAndroid as isAndroidFct, NavigatorType} from "../../WebRtc/DeviceUtils";
 
-    let isAndroid = window.navigator.userAgent.includes('Android');
+    let isAndroid = isAndroidFct();
-    let isFirefox = window.navigator.userAgent.includes('Firefox');
+    let isFirefox = getNavigatorType() === NavigatorType.firefox;
-    let isChrome = window.navigator.userAgent.includes('Chrome');
+    let isChrome = getNavigatorType() === NavigatorType.chrome;
 
     function refresh() {
         window.location.reload();

front/src/Stores/MediaStore.ts

@@ -4,7 +4,7 @@ import { userMovingStore } from "./GameStore";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import { BrowserTooOldError } from "./Errors/BrowserTooOldError";
 import { errorStore } from "./ErrorStore";
-import { isIOS } from "../WebRtc/DeviceUtils";
+import { getNavigatorType, isIOS, NavigatorType } from "../WebRtc/DeviceUtils";
 import { WebviewOnOldIOS } from "./Errors/WebviewOnOldIOS";
 import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
 import { peerStore } from "./PeerStore";
@@ -339,18 +339,19 @@ interface StreamErrorValue {
 }
 
 let currentStream: MediaStream | null = null;
+let oldConstraints = { video: false, audio: false };
+//only firefox correctly implements the 'enabled' track  property, on chrome we have to stop the track then reinstantiate the stream
+const implementCorrectTrackBehavior = getNavigatorType() === NavigatorType.firefox;
 
 /**
  * Stops the camera from filming
  */
 function applyCameraConstraints(currentStream: MediaStream | null, constraints: MediaTrackConstraints | boolean): void {
-    if (currentStream) {
+    if (!currentStream) {
-        for (const track of currentStream.getVideoTracks()) {
+        return;
-            track.enabled = constraints !== false;
+    }
-            if (constraints && constraints !== true) {
+    for (const track of currentStream.getVideoTracks()) {
-                track.applyConstraints(constraints);
+        toggleConstraints(track, constraints);
-            }
-        }
     }
 }
 
@@ -361,13 +362,22 @@ function applyMicrophoneConstraints(
     currentStream: MediaStream | null,
     constraints: MediaTrackConstraints | boolean
 ): void {
-    if (currentStream) {
+    if (!currentStream) {
-        for (const track of currentStream.getAudioTracks()) {
+        return;
-            track.enabled = constraints !== false;
+    }
-            if (constraints && constraints !== true) {
+    for (const track of currentStream.getAudioTracks()) {
-                track.applyConstraints(constraints);
+        toggleConstraints(track, constraints);
-            }
+    }
-        }
+}
+
+function toggleConstraints(track: MediaStreamTrack, constraints: MediaTrackConstraints | boolean): void {
+    if (implementCorrectTrackBehavior) {
+        track.enabled = constraints !== false;
+    } else if (constraints === false) {
+        track.stop();
+    }
+    if (constraints && constraints !== true) {
+        track.applyConstraints(constraints);
     }
 }
 
@@ -379,6 +389,53 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
     ($mediaStreamConstraintsStore, set) => {
         const constraints = { ...$mediaStreamConstraintsStore };
 
+        async function initStream(constraints: MediaStreamConstraints) {
+            try {
+                const newStream = await navigator.mediaDevices.getUserMedia(constraints);
+                if (currentStream) {
+                    //we need stop all tracks to make sure the old stream will be garbage collected
+                    currentStream.getTracks().forEach((t) => t.stop());
+                }
+                currentStream = newStream;
+                set({
+                    type: "success",
+                    stream: currentStream,
+                });
+                return;
+            } catch (e) {
+                if (constraints.video !== false || constraints.audio !== false) {
+                    console.info(
+                        "Error. Unable to get microphone and/or camera access. Trying audio only.",
+                        constraints,
+                        e
+                    );
+                    // TODO: does it make sense to pop this error when retrying?
+                    set({
+                        type: "error",
+                        error: e,
+                    });
+                    // Let's try without video constraints
+                    if (constraints.video !== false) {
+                        requestedCameraState.disableWebcam();
+                    }
+                    if (constraints.audio !== false) {
+                        requestedMicrophoneState.disableMicrophone();
+                    }
+                } else if (!constraints.video && !constraints.audio) {
+                    set({
+                        type: "error",
+                        error: new MediaStreamConstraintsError(),
+                    });
+                } else {
+                    console.info("Error. Unable to get microphone and/or camera access.", constraints, e);
+                    set({
+                        type: "error",
+                        error: e,
+                    });
+                }
+            }
+        }
+
         if (navigator.mediaDevices === undefined) {
             if (window.location.protocol === "http:") {
                 //throw new Error('Unable to access your camera or microphone. You need to use a HTTPS connection.');
@@ -405,57 +462,31 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
         applyMicrophoneConstraints(currentStream, constraints.audio || false);
         applyCameraConstraints(currentStream, constraints.video || false);
 
-        if (currentStream === null) {
+        if (implementCorrectTrackBehavior) {
-            // we need to assign a first value to the stream because getUserMedia is async
+            //on good navigators like firefox, we can instantiate the stream once and simply disable or enable the tracks as needed
-            set({
+            if (currentStream === null) {
-                type: "success",
+                // we need to assign a first value to the stream because getUserMedia is async
-                stream: null,
+                set({
-            });
+                    type: "success",
-            (async () => {
+                    stream: null,
-                try {
+                });
-                    currentStream = await navigator.mediaDevices.getUserMedia(constraints);
+                initStream(constraints);
-                    set({
+            }
-                        type: "success",
+        } else {
-                        stream: currentStream,
+            //on bad navigators like chrome, we have to stop the tracks when we mute and reinstantiate the stream when we need to unmute
-                    });
+            if (constraints.audio === false && constraints.video === false) {
-                    return;
+                currentStream = null;
-                } catch (e) {
+                set({
-                    if (constraints.video !== false || constraints.audio !== false) {
+                    type: "success",
-                        console.info(
+                    stream: null,
-                            "Error. Unable to get microphone and/or camera access. Trying audio only.",
+                });
-                            $mediaStreamConstraintsStore,
+            } else if ((constraints.audio && !oldConstraints.audio) || (!oldConstraints.video && constraints.video)) {
-                            e
+                initStream(constraints);
-                        );
+            }
-                        // TODO: does it make sense to pop this error when retrying?
+            oldConstraints = {
-                        set({
+                video: !!constraints.video,
-                            type: "error",
+                audio: !!constraints.audio,
-                            error: e,
+            };
-                        });
-                        // Let's try without video constraints
-                        if (constraints.video !== false) {
-                            requestedCameraState.disableWebcam();
-                        }
-                        if (constraints.audio !== false) {
-                            requestedMicrophoneState.disableMicrophone();
-                        }
-                    } else if (!constraints.video && !constraints.audio) {
-                        set({
-                            type: "error",
-                            error: new MediaStreamConstraintsError(),
-                        });
-                    } else {
-                        console.info(
-                            "Error. Unable to get microphone and/or camera access.",
-                            $mediaStreamConstraintsStore,
-                            e
-                        );
-                        set({
-                            type: "error",
-                            error: e,
-                        });
-                    }
-                }
-            })();
         }
     }
 );

front/src/WebRtc/DeviceUtils.ts

@@ -7,3 +7,23 @@ export function isIOS(): boolean {
         (navigator.userAgent.includes("Mac") && "ontouchend" in document)
     );
 }
+
+export enum NavigatorType {
+    firefox = 1,
+    chrome,
+    safari,
+}
+
+export function getNavigatorType(): NavigatorType {
+    if (window.navigator.userAgent.includes("Firefox")) {
+        return NavigatorType.firefox;
+    } else if (window.navigator.userAgent.includes("Chrome")) {
+        return NavigatorType.chrome;
+    } else if (window.navigator.userAgent.includes("Safari")) {
+        return NavigatorType.safari;
+    }
+    throw "Couldn't detect navigator type";
+}
+export function isAndroid(): boolean {
+    return window.navigator.userAgent.includes("Android");
+}