Adding a special error message for non Safari browsers on iOS < 14.3

front/src/Stores/Errors/WebviewOnOldIOS.ts

@@ -0,0 +1,8 @@
+export class WebviewOnOldIOS extends Error {
+    static NAME = 'WebviewOnOldIOS';
+
+    constructor() {
+        super('Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above.');
+        this.name = WebviewOnOldIOS.NAME;
+    }
+}

front/src/Stores/MediaStore.ts

@@ -6,6 +6,8 @@ import {userMovingStore} from "./GameStore";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
 import {errorStore} from "./ErrorStore";
+import {isIOS} from "../WebRtc/DeviceUtils";
+import {WebviewOnOldIOS} from "./Errors/WebviewOnOldIOS";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -421,6 +423,13 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
                 constraints
             });
             return;
+        } else if (isIOS()) {
+            set({
+                type: 'error',
+                error: new WebviewOnOldIOS(),
+                constraints
+            });
+            return;
         } else {
             set({
                 type: 'error',
@@ -598,7 +607,7 @@ microphoneListStore.subscribe((devices) => {
 
 localStreamStore.subscribe(streamResult => {
     if (streamResult.type === 'error') {
-        if (streamResult.error.name === BrowserTooOldError.NAME) {
+        if (streamResult.error.name === BrowserTooOldError.NAME || streamResult.error.name === WebviewOnOldIOS.NAME) {
             errorStore.addErrorMessage(streamResult.error);
         }
     }

front/src/WebRtc/DeviceUtils.ts

@@ -0,0 +1,12 @@
+export function isIOS(): boolean {
+    return [
+            'iPad Simulator',
+            'iPhone Simulator',
+            'iPod Simulator',
+            'iPad',
+            'iPhone',
+            'iPod'
+        ].includes(navigator.platform)
+        // iPad on iOS 13 detection
+        || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}