@live-change/peer-connection-frontend 0.8.80 → 0.8.81

package/front/src/components/DeviceSelect.vue

@@ -18,6 +18,7 @@
                class="max-w-full max-h-full" style="object-fit: contain; transform: scaleX(-1)">
         </video>
       </div>
+
       <div class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-end align-items-center">
         <div class="flex flex-row justify-content-between align-items-center h-5rem w-7rem media-buttons">
           <MicrophoneButton v-model="model" @disabled-audio-click="handleDisabledAudioClick" />
@@ -29,6 +30,29 @@
           <VolumeIndicator :stream="userMedia" />
         </div>
       </div>
+      <div class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-center align-items-center">
+        <div v-if="model.cameraAccessError"
+             class="flex flex-column justify-content-center align-items-center m-3 p-2 bg-black-alpha-40">
+          <i class="bx bx-camera-off text-4xl text-red-600" />
+          <div class="text-red-500 text-xl mb-1">
+            Cannot access the camera.
+          </div>
+          <div class="text-red-500 text-sm text-center">
+            It might be in use by another application or there might be a hardware issue.
+            Please ensure no other applications are using the camera and try again.
+          </div>
+        </div>
+        <div v-else-if="model.mediaError"
+             class="flex flex-column justify-content-center align-items-center m-3 p-2 bg-black-alpha-40">
+          <i class="bx bx-camera-off text-4xl text-red-600" />
+          <div class="text-red-500 text-xl mb-1">
+            Cannot access media devices.
+          </div>
+          <div class="text-red-500 text-sm text-center">
+            {{ model.mediaError }}
+          </div>
+        </div>
+      </div>
     </div>
     <div class="flex flex-row gap-2 pt-2 justify-content-around">
       <div v-if="audioInputRequest !== 'none' && audioInputs.length > 0"
@@ -140,7 +164,7 @@
   import VolumeIndicator from './VolumeIndicator.vue'
 
   import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch, watchEffect } from 'vue'
-  import { useInterval, useEventListener } from  "@vueuse/core"
+  import { useIntervalFn, useEventListener } from  "@vueuse/core"
   import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
     from "./userMedia.js"
   import MicrophoneButton from './MicrophoneButton.vue'
@@ -163,9 +187,13 @@
     constraints: {
       type: Object,
       default: () => ({})
+    },
+    retryMediaOnError: {
+      type: Boolean,
+      default: false
     }
   })
-  const { audioInputRequest, audioOutputRequest, videoInputRequest, constraints } = toRefs(props)
+  const { audioInputRequest, audioOutputRequest, videoInputRequest, constraints, retryMediaOnError } = toRefs(props)
 
   const model = defineModel({
     required: true,
@@ -186,7 +214,13 @@
       videoMuted: {
         type: Boolean
       },
-      userMedia: {
+      media: {
+        type: Object
+      },
+      mediaError: {
+        type: Object
+      },
+      cameraAccessError: {
         type: Object
       }
     }
@@ -261,32 +295,98 @@
   }, { immediate: true })
 
   const userMedia = ref(null)
-  async function updateUserMedia() {
-    if(userMedia.value) {
-      console.log("CLOSE USER MEDIA")
-      userMedia.value.getTracks().forEach(track => track.stop())
-      userMedia.value = null
-      await new Promise(resolve => setTimeout(resolve, 100))
-    }
-    const constraints = selectedConstraints.value
-    const videoAllowed = videoInputRequest.value !== 'none' && constraints.video
-    const audioAllowed = audioInputRequest.value !== 'none' && constraints.audio
-    if(!videoAllowed && !audioAllowed) {
-      console.log("USER MEDIA NOT ALLOWED")
-      return
-    }
-    console.log("TRY GET USER MEDIA", JSON.stringify(constraints, null, 2))
+  let gettingUserMedia = false
+  async function updateUserMedia(retry = false) {
+    if(gettingUserMedia) return
+    gettingUserMedia = true
     try {
-      console.log("GET USER MEDIA")
-      const mediaStream = await getUserMediaNative(constraints)
-      console.log("Got User Media", mediaStream)
-      userMedia.value = mediaStream
-    } catch(e) {
-      console.error("Failed to get user media", e)
+      if(userMedia.value && !retry) {
+        console.log("CLOSE USER MEDIA")
+        userMedia.value.getTracks().forEach(track => track.stop())
+        userMedia.value = null
+        await new Promise(resolve => setTimeout(resolve, 100))
+      }
+      const constraints = selectedConstraints.value
+      const videoAllowed = videoInputRequest.value !== 'none' && constraints.video
+      const audioAllowed = audioInputRequest.value !== 'none' && constraints.audio
+      if(!videoAllowed && !audioAllowed) {
+        console.log("USER MEDIA NOT ALLOWED")
+        return
+      }
+      console.log("TRY GET USER MEDIA", JSON.stringify(constraints, null, 2))
+      try {
+        console.log("GET USER MEDIA")
+        const mediaStream = await getUserMediaNative(constraints)
+        /*      if(userMedia.value && retry) {
+          console.log("CLOSE USER MEDIA")
+          userMedia.value.getTracks().forEach(track => track.stop())
+          userMedia.value = null
+          await new Promise(resolve => setTimeout(resolve, 100))
+        }*/
+        console.log("Got User Media", mediaStream)
+        userMedia.value = mediaStream
+        if(model.value.cameraAccessError || model.value.mediaError) {
+          model.value = {
+            ...model.value,
+            cameraAccessError: null,
+            mediaError: null
+          }
+        }
+      } catch(error) {
+        console.error("Failed to get user media", error)
+        if(error.name === 'NotReadableError') {
+          const isCameraRelated = error.message.includes('video') || error.message.includes('camera')
+          if(isCameraRelated) {
+            model.value = {
+              ...model.value,
+              cameraAccessError: error
+            }
+            console.log("RE", retry)
+            if(retry) return
+            try {
+              console.log("GET USER MEDIA 2")
+              const mediaStream = await getUserMediaNative({
+                ...constraints,
+                video: false
+              })
+              console.log("Got User Media 2", mediaStream)
+              userMedia.value = mediaStream
+            } catch(error) {
+              model.value = {
+                ...model.value,
+                mediaError: error,
+                cameraAccessError: null
+              }
+            }
+          } else {
+            model.value = {
+              ...model.value,
+              mediaError: error
+            }
+          }
+        } else if(error.name === 'PermissionDeniedError') {
+          showPermissionsDialog()
+        } else {
+          model.value = {
+            ...model.value,
+            mediaError: error
+          }
+        }
+      }
+    } finally {
+      gettingUserMedia = false
     }
   }
 
-  watch(() => selectedConstraints.value, updateUserMedia, { immediate: true })
+  watch(() => selectedConstraints.value, () => updateUserMedia(), { immediate: true })
+
+  useIntervalFn(() => {
+    console.log("RETRY MEDIA ON ERROR", model.value.cameraAccessError, retryMediaOnError.value)
+    if(!retryMediaOnError.value) return
+    if(!model.value.cameraAccessError) return
+    console.log("RETRY CAMERA ACCESS!")
+    updateUserMedia(true)
+  }, 1000)
 
   const userMediaMuted = true
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.80",
+  "version": "0.8.81",
   "scripts": {
     "memDev": "dotenvx run -- node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; dotenvx run -- node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -22,19 +22,19 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.80",
-    "@live-change/dao": "^0.8.80",
-    "@live-change/dao-vue3": "^0.8.80",
-    "@live-change/dao-websocket": "^0.8.80",
-    "@live-change/framework": "^0.8.80",
-    "@live-change/password-authentication-service": "^0.8.80",
-    "@live-change/secret-code-service": "^0.8.80",
-    "@live-change/secret-link-service": "^0.8.80",
-    "@live-change/session-service": "^0.8.80",
-    "@live-change/user-frontend": "^0.8.80",
-    "@live-change/user-service": "^0.8.80",
-    "@live-change/vue3-components": "^0.8.80",
-    "@live-change/vue3-ssr": "^0.8.80",
+    "@live-change/cli": "^0.8.81",
+    "@live-change/dao": "^0.8.81",
+    "@live-change/dao-vue3": "^0.8.81",
+    "@live-change/dao-websocket": "^0.8.81",
+    "@live-change/framework": "^0.8.81",
+    "@live-change/password-authentication-service": "^0.8.81",
+    "@live-change/secret-code-service": "^0.8.81",
+    "@live-change/secret-link-service": "^0.8.81",
+    "@live-change/session-service": "^0.8.81",
+    "@live-change/user-frontend": "^0.8.81",
+    "@live-change/user-service": "^0.8.81",
+    "@live-change/vue3-components": "^0.8.81",
+    "@live-change/vue3-ssr": "^0.8.81",
     "@vueuse/core": "^10.11.0",
     "boxicons": "^2.1.4",
     "codeceptjs-assert": "^0.0.5",
@@ -54,7 +54,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.80",
+    "@live-change/codeceptjs-helper": "^0.8.81",
     "codeceptjs": "^3.6.5",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -65,5 +65,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "06b8c7071b68ee297239912e0f63890648a3b124"
+  "gitHead": "bbc862b339eae9c68cb4b06cad0abdbb0405b409"
 }