camera id to database

client/src/components/QRScanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="qr-scanner-wrapper">
     <div class="qr-scanner">
-      <div class="qr-scanner__camera" @click="nextCamera">
+      <div class="qr-scanner__camera">
         <i class="fas fa-camera-retro"></i>
         {{ $t("scanner.title") }}
       </div>
@@ -32,11 +32,13 @@ export default Vue.extend({
       flashOn: false,
       scanner: undefined,
       timeout: -1,
-      timeoutMs: 10 * 1000,
-      cameraIndex: 0
+      timeoutMs: 10 * 1000
     };
   },
-  computed: mapState("scan", ["scanning"]),
+  computed: {
+    ...mapState("scan", ["scanning"]),
+    ...mapState("user", ["user"])
+  },
   created() {
     const { query } = this.$route;
     if (this.$route.path !== "/") this.$router.push({ path: "/", query });
@@ -65,18 +67,10 @@ export default Vue.extend({
     ...mapMutations("scan", ["stopScan"]),
     ...mapActions("scan", ["handleQR"]),
     async initScanner() {
-      await navigator.mediaDevices.getUserMedia({
-        audio: false,
-        video: {
-          facingMode: { ideal: "environment" },
-          aspectRatio: { ideal: 1.7777777778 },
-          frameRate: { ideal: 60, min: 30 },
-          zoom: 1
-        }
-      });
+      await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
       const devices = await navigator.mediaDevices.enumerateDevices();
       const cameras = devices.filter(device => device.kind === "videoinput");
-      const { deviceId } = cameras[this.cameraIndex % cameras.length];
+      const { deviceId } = cameras[(this.user.cameraId || 0) % cameras.length];
       const { qrscan } = this.$refs;
       if (!deviceId || !qrscan) return;
 
@@ -91,7 +85,7 @@ export default Vue.extend({
         },
         QRScanner._onDecodeError,
         QRScanner._calculateScanRegion,
-        "755A2BC07E2D6465D7B5E90BD152774DAC384FEE"
+        deviceId
       );
       await this.scanner.start();
       this.hasFlash = await this.scanner.hasFlash();
@@ -105,12 +99,6 @@ export default Vue.extend({
       if (!this.scanner) return;
       await this.scanner.toggleFlash();
       this.flashOn = !this.flashOn;
-    },
-    async nextCamera() {
-      if (!this.scanner) return;
-      this.cameraIndex++;
-      await this.scanner.stop();
-      await this.initScanner();
     }
   }
 });

client/src/components/UserSettings.vue

@@ -24,6 +24,23 @@
         </select>
       </div>
 
+      <div class="select-camera" @click="getCameras">
+        {{ $t("settings.camera-option") }}
+        <select
+          :key="cameras.length"
+          :value="user.cameraId"
+          @change="setCamera"
+        >
+          <option
+            v-for="(camera, i) in cameras"
+            :key="`camera-${i}`"
+            :value="i"
+          >
+            {{ camera.label }}
+          </option>
+        </select>
+      </div>
+
       <a href="/auth/logout" class="log-out">
         {{ $t("settings.logout-option") }}
       </a>
@@ -43,7 +60,8 @@ import { languages } from "../locales";
 export default {
   data() {
     return {
-      locales: languages || []
+      locales: languages || [],
+      cameras: []
     };
   },
   computed: {
@@ -58,9 +76,16 @@ export default {
       } else {
         i18n.locale = navigator.language.split("-")[0];
       }
-      await api.put("/api/user", {
-        body: JSON.stringify({ locale })
-      });
+      await api.put("/api/user", { body: JSON.stringify({ locale }) });
+    },
+    async setCamera(event) {
+      const cameraId = event.target.value;
+      await api.put("/api/user", { body: JSON.stringify({ cameraId }) });
+    },
+    async getCameras() {
+      await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      this.cameras = devices.filter(device => device.kind === "videoinput");
     },
     async deleteMe() {
       this.$store.commit("popup/setPopup", {
@@ -115,6 +140,7 @@ select {
 }
 
 .select-language,
+.select-camera,
 .user-remove,
 .help-me,
 .log-out {
@@ -129,6 +155,7 @@ select {
 }
 
 .select-language,
+.select-camera,
 .help-me,
 .log-out {
   background: $grey-800;

client/src/locales/en.json

@@ -63,6 +63,7 @@
     "help-option": "Help",
     "browser-language": "Browser language",
     "language-option": "Language",
+    "camera-option": "Camera",
     "logout-option": "Log out",
     "title": "Settings"
   },

client/src/locales/sv.json

@@ -63,6 +63,7 @@
     "help-option": "Hjälp",
     "browser-language": "Webbläsarens språk",
     "language-option": "Språk",
+    "camera-option": "Kamera",
     "logout-option": "Logga  ut",
     "title": "Inställningar"
   },

server/migrations/20240819-user-camera.sql

@@ -0,0 +1,2 @@
+ALTER TABLE users
+ADD COLUMN camera_id INTEGER NOT NULL DEFAULT 1;

server/schema.sql

@@ -7,6 +7,7 @@ CREATE TABLE users (
   email      VARCHAR(255)  NOT NULL UNIQUE,
   photo      VARCHAR(255),
   locale     VARCHAR(2),
+  camera_id  INTEGER       NOT NULL DEFAULT 1,
   max_streak INTEGER       NOT NULL DEFAULT 0,
   is_admin   BOOLEAN       NOT NULL DEFAULT FALSE,
 

server/src/user/user-model.js

@@ -59,7 +59,7 @@ const SELECT_STREAK_SQL = () => `
 `;
 
 const SELECT_USERS_SQL = args => `
-  SELECT id, username, name, email, photo, locale, is_admin, created_at ${args}
+  SELECT id, username, name, email, photo, locale, camera_id, is_admin, created_at ${args}
   FROM users
 `;
 
@@ -113,7 +113,7 @@ module.exports = db => ({
   },
 
   update: async (id, user) => {
-    const valid = ["name", "photo", "locale", "max_streak"];
+    const valid = ["name", "photo", "locale", "camera_id", "max_streak"];
     const { keyIndices, values } = keyValuePairs(valid, user);
     const sql = `
         UPDATE users SET ${keyIndices}