From 5104420157eea2bc8c59e40f5ff08b21e6a3fbd5 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Tue, 20 Oct 2020 15:14:18 +0200
Subject: [PATCH] Move device detection into functions
so they can be reused
---
.../qr-code-scanner/src/qr-code-scanner.js | 119 ++++++++++--------
1 file changed, 67 insertions(+), 52 deletions(-)
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index dae42964..0ef51473 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -9,6 +9,62 @@ import {classMap} from 'lit-html/directives/class-map.js';
import jsQR from "jsqr";
+/**
+ * Returns the ID for the most important device
+ *
+ * @param {Map} devices
+ * @return string|null
+ */
+function getPrimaryDevice(devices) {
+ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+ if (devices.has('environment'))
+ return 'environment';
+ }
+ if (devices.size) {
+ return Array.from(devices)[0][0];
+ }
+ return null;
+}
+
+/**
+ * Returns a map of device IDs and translated names.
+ *
+ * Moreimportant devices first.
+ *
+ * @return Map<string,string>
+ */
+async function getVideoDevices() {
+ let devices_map = new Map();
+ if (navigator.mediaDevices
+ && navigator.mediaDevices.enumerateDevices
+ && navigator.mediaDevices.getUserMedia) {
+
+ let devices;
+ try {
+ devices = await navigator.mediaDevices.enumerateDevices()
+ } catch (err) {
+ console.log(err.name + ": " + err.message);
+ return devices_map;
+ }
+
+ for (let device of devices) {
+ if (device.kind === 'videoinput') {
+ let id = device.deviceId;
+ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+ devices_map.set('environment', i18n.t('back-camera'));
+ devices_map.set('user', i18n.t('front-camera'));
+ } else {
+ devices_map.set(id ? id : true, device.label || i18n.t('camera') + (devices_map.size + 1));
+ }
+ }
+ }
+ return devices_map;
+ } else {
+ return devices_map;
+ }
+}
+
+
/**
* Notification web component
*/
@@ -65,7 +121,17 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
i18n.changeLanguage(this.lang);
this.updateComplete.then(async ()=>{
- this.notSupported = (!await this.checkSupport());
+ let devices = await getVideoDevices();
+ this.notSupported = !devices.size;
+ this.activeCamera = getPrimaryDevice(devices) || '';
+
+ for (let [id, label] of devices) {
+ let opt = document.createElement("option");
+ opt.value = id;
+ opt.text = label;
+ this._('#videoSource').appendChild(opt);
+ }
+
if (!this.stopScan) {
this.qrCodeScannerInit();
}
@@ -83,57 +149,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
}
};
- /**
- * Ckecks if browser support video recording
- * Gets video devices of device
- *
- */
- async checkSupport() {
- let devices_map = new Map();
- if (navigator.mediaDevices
- && navigator.mediaDevices.enumerateDevices
- && navigator.mediaDevices.getUserMedia) {
-
- let devices;
- try {
- devices = await navigator.mediaDevices.enumerateDevices()
- } catch (err) {
- console.log(err.name + ": " + err.message);
- return false;
- }
-
- for (let device of devices) {
- if (device.kind === 'videoinput') {
- let id = device.deviceId;
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
- devices_map.set('environment', i18n.t('back-camera'));
- devices_map.set('user', i18n.t('front-camera'));
- } else {
- devices_map.set(id ? id : true, device.label || i18n.t('camera') + (devices_map.size + 1));
- }
- }
- }
- for (let [id, label] of devices_map) {
- let opt = document.createElement("option");
- opt.value = id;
- opt.text = label;
- this._('#videoSource').appendChild(opt);
- }
- if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
- this.activeCamera = 'environment';
- } else {
- this.activeCamera = devices_map.size ? Array.from(devices_map)[0][0] : '';
- }
-
- if (devices_map.size < 1) {
- return false;
- }
- return true;
- } else {
- return false;
- }
- }
-
/**
* Get a loading message
*
--
GitLab