diff --git a/packages/qr-code-scanner/src/i18n/de/translation.json b/packages/qr-code-scanner/src/i18n/de/translation.json index d93cd733b248a330012dafe517b1b230eae4d6ac..4f39bf3a9987b918034f6cb9ea21f710c46d4fd3 100644 --- a/packages/qr-code-scanner/src/i18n/de/translation.json +++ b/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", diff --git a/packages/qr-code-scanner/src/i18n/en/translation.json b/packages/qr-code-scanner/src/i18n/en/translation.json index 9e51475786202cf0c979c066e9061704ed49ea1b..c0d342846cf3fd42394ae8e5e2cb9a63a960b97d 100644 --- a/packages/qr-code-scanner/src/i18n/en/translation.json +++ b/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", diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js index fdafcaf37bd9a4c576bcb2b8a8c0636b0053b7b7..2fe6476be95701ab4e698e88534fa4ab107a3b83 100644 --- a/packages/qr-code-scanner/src/qr-code-scanner.js +++ b/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> `;