Add ios warning when using wrong browser in QR code scanner

packages/qr-code-scanner/src/i18n/de/translation.json

@@ -4,6 +4,7 @@
   "loading-video": "Video laden ...",
   "no-qr-detected": "Kein QR-Code erkannt.",
   "no-support": "Ihr Browser unterstützt keine Videoaufnahmen.",
+  "no-ios-support": "Ihr Browser unterstützt keine Videoaufnahmen. Bitte verwenden Sie Safari.",
   "data": "Inhalt",
   "camera": "Kamera ",
   "front-camera": "Vordere Kamera",

packages/qr-code-scanner/src/i18n/en/translation.json

@@ -4,6 +4,7 @@
   "loading-video": "⌛ Loading video...",
   "no-qr-detected": "No QR code detected.",
   "no-support": "Your browser does not support video recording.",
+  "no-ios-support": "Your browser does not support video recording. Please use Safari.",
   "data": "Data",
   "camera": "Camera ",
   "front-camera": "Frontcamera",

packages/qr-code-scanner/src/qr-code-scanner.js

@@ -66,6 +66,18 @@ async function getVideoDevices() {
     }
 }
 
+/**
+ * Checks if user Agent is IOS, but not Safari browser
+ *
+ * @param {string} devices_map
+ * @returns {object|null} a video element or null
+ */
+async function checkIosMobileSupport(devices_map) {
+    if ( !(devices_map.size > 0) && /iPhone|iPad|iPod/i.test(navigator.userAgent)) {
+        this._iosMobileSupport = false;
+    }
+}
+
 /**
  * @param {string} deviceId
  * @returns {object|null} a video element or null
@@ -132,6 +144,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         this._activeCamera = '';
 
         this._devices = new Map();
+        this._iosMobileSupport = true;
         this._requestID = null;
         this._loadingMessage = '';
 
@@ -158,6 +171,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             _activeCamera: { type: String, attribute: false },
             _loading: { type: Boolean, attribute: false },
             _devices: { type: Map, attribute: false},
+            _iosMobileSupport: { type: Boolean, attribute: false},
             _loadingMessage: { type: String, attribute: false },
             _outputData: { type: String, attribute: false },
             _askPermission: { type: Boolean, attribute: false },
@@ -172,6 +186,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         let devices = await getVideoDevices();
         this._activeCamera = getPrimaryDevice(devices) || '';
         this._devices = devices;
+        await checkIosMobileSupport(devices);
 
         if (!this.stopScan) {
             await this.startScanning();
@@ -511,6 +526,9 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                     <div class="${classMap({hidden: hasDevices})}">
                         ${i18n.t('no-support')}
                     </div>
+                    <div class="${classMap({hidden: this._iosMobileSupport})}">
+                        ${i18n.t('no-ios-support')}
+                    </div>
                 </div>
             </div>
         `;