From 45d2ca55eceb79fe10f09a06b59c05d52b57d9d9 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 17 Jan 2024 14:27:45 +0100
Subject: [PATCH] Check secured context before trying to list cameras - Fixes
 #276

---
 resources/js/views/twofaccounts/Capture.vue | 30 +++++++++++++--------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/resources/js/views/twofaccounts/Capture.vue b/resources/js/views/twofaccounts/Capture.vue
index e688d66d..6bde9998 100644
--- a/resources/js/views/twofaccounts/Capture.vue
+++ b/resources/js/views/twofaccounts/Capture.vue
@@ -12,8 +12,8 @@
     const notify = useNotifyStore()
 
     const cameraIsOn = ref(false)
-    const selectedDevice = ref(null)
-    const devices = ref([])
+    const selectedCamera = ref(null)
+    const cameras = ref([])
     const errorPhrase = ref('')
     const form = reactive(new Form({
         qrcode: null,
@@ -22,11 +22,19 @@
     const showQrContent = ref(false)
 
     onMounted(async () => {
-        devices.value = (await navigator.mediaDevices.enumerateDevices())
-        .filter(({ kind }) => kind === 'videoinput')
+        if (!navigator.mediaDevices?.enumerateDevices) {
+            errorPhrase.value  = 'secured_context_required'
+        } else {
+            await navigator.mediaDevices.enumerateDevices().then((devices) => {
+                cameras.value = devices.filter(({ kind }) => kind === 'videoinput')
 
-        if (devices.value.length > 0) {
-            selectedDevice.value = devices.value[0]
+                if (cameras.value.length > 0) {
+                    selectedCamera.value = cameras.value[0]
+                }
+            })
+            .catch((err) => {
+                onError(err)
+            })
         }
     })
 
@@ -176,7 +184,7 @@
         </div>
         <div v-show="!errorPhrase" class="fullscreen-streamer">
             <qrcode-stream
-                v-if="selectedDevice !== null"
+                v-if="selectedCamera !== null"
                 :track="paintOutline"
                 @detect="onDetect"
                 @error="onError"
@@ -184,12 +192,12 @@
                 @camera-off="cameraOff"
             ></qrcode-stream>
             <!-- device selector -->
-            <div v-if="cameraIsOn && devices.length > 1" class="field has-addons has-addons-centered mt-3">
+            <div v-if="cameraIsOn && cameras.length > 1" class="field has-addons has-addons-centered mt-3">
                 <p class="control has-icons-left">
                     <span class="select">
-                        <select v-model="selectedDevice">
-                            <option v-for="device in devices" :key="device.label" :value="device">
-                                {{ device.label ? device.label : $t('commons.default') }}
+                        <select v-model="selectedCamera">
+                            <option v-for="camera in cameras" :key="camera.label" :value="camera">
+                                {{ camera.label ? camera.label : $t('commons.default') }}
                             </option>
                         </select>
                     </span>