@live-change/peer-connection-frontend 0.8.87 → 0.8.89

package/front/src/components/DeviceSelect.vue

@@ -9,12 +9,12 @@
         <div class>Please connect camera.</div>
         <audio v-if="model?.audioInput?.deviceId" ref="outputElement"
                autoplay playsinline :muted="userMediaMuted"
-               :src-object.prop.camel="userMedia">
+               :src-object.prop.camel="model.media">
         </audio>
       </div>
       <div v-else class="bg-black-alpha-90 flex align-items-center justify-content-center">
-        <video v-if="userMedia" autoplay playsinline :muted="userMediaMuted" ref="outputElement"
-               :src-object.prop.camel="userMedia"
+        <video v-if="model.media" autoplay playsinline :muted="userMediaMuted" ref="outputElement"
+               :src-object.prop.camel="model.media"
                class="max-w-full max-h-full" style="object-fit: contain; transform: scaleX(-1)">
         </video>
       </div>
@@ -50,9 +50,9 @@
           <CameraButton v-model="model" @disabled-video-click="handleDisabledVideoClick" />
         </div>
       </div>
-      <div class="absolute top-0 right-0" v-if="userMedia">
+      <div class="absolute top-0 right-0" v-if="model.media">
         <div class="m-3">
-          <VolumeIndicator :stream="userMedia" />
+          <VolumeIndicator :stream="model.media" />
         </div>
       </div>
 
@@ -146,7 +146,7 @@
 
     <pre>DEV: {{ devices }}</pre>
 
-    <pre>UM: {{ userMedia }}</pre>-->
+    <pre>UM: {{ model.media }}</pre>-->
 
   </div>
 </template>
@@ -168,12 +168,13 @@
 
   import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch, watchEffect } from 'vue'
   import { useIntervalFn, useEventListener } from  "@vueuse/core"
-  import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
-    from "./userMedia.js"
+  import {
+    getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative,
+    isUserMediaPermitted, stopMedia
+  } from "./userMedia.js"
   import MicrophoneButton from './MicrophoneButton.vue'
   import CameraButton from './CameraButton.vue'
 
-
   const props = defineProps({
     audioInputRequest: {
       type: String,
@@ -247,24 +248,58 @@
   const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput'))
 
   watch(audioInputs, (value) => {
+    if(value.length === 0) return
+    if(model.value?.audioInput) {
+      const exists = value.find(device => device.deviceId === model.value.audioInput.deviceId)
+      if(exists) return
+    }
     model.value = {
       ...model.value,
       audioInput: value[0]
     }
   }, { immediate: true })
   watch(audioOutputs, (value) => {
+    if(value.length === 0) return
+    if(model.value?.audioOutput) {
+      const exists = value.find(device => device.deviceId === model.value.audioOutput.deviceId)
+      if(exists) return
+    }
     model.value = {
       ...model.value,
       audioOutput: value[0]
     }
   }, { immediate: true })
   watch(videoInputs, (value) => {
+    if(value.length === 0) return
+    if(model.value?.videoInput) {
+      const exists = value.find(device => device.deviceId === model.value.videoInput.deviceId)
+      if(exists) return
+    }
     model.value = {
       ...model.value,
       videoInput: value[0]
     }
   }, { immediate: true })
 
+/*  watch(model.value, (v) => {
+    console.trace("MODEL CHANGED", v)
+    if(typeof v.audioInput === 'string') throw new Error("AUDIO INPUT IS STRING")
+    if(typeof v.audioOutput === 'string') throw new Error("AUDIO OUTPUT IS STRING")
+    if(typeof v.videoInput === 'string') throw new Error("VIDEO INPUT IS STRING")
+  }, { immediate: true, deep: true })*/
+
+  function setUserMedia(media) {
+    if(media === model.value.media) return
+    console.log("MEDIA STREAM CHANGE", media, 'FROM', model.value.media)
+    if(model.value.media) {
+      stopMedia(model.value.media)
+    }
+    model.value = {
+      ...model.value,
+      media
+    }
+  }
+
 /*  onMounted(() => {
     if(!model.value?.audioInput || !model.value?.audioOutput || !model.value?.videoInput) {
       console.log("AUTO SELECT", audioInputs.value)
@@ -297,18 +332,12 @@
     }
   }, { immediate: true })
 
-  const userMedia = ref(null)
   let gettingUserMedia = false
   async function updateUserMedia(retry = false) {
+    console.log("USER MEDIA UPDATE WHEN MODEL IS", model.value)
     if(gettingUserMedia) return
     gettingUserMedia = true
     try {
-      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
@@ -327,7 +356,7 @@
           await new Promise(resolve => setTimeout(resolve, 100))
         }*/
         console.log("Got User Media", mediaStream)
-        userMedia.value = mediaStream
+        setUserMedia(mediaStream)
         if(model.value.cameraAccessError || model.value.mediaError) {
           model.value = {
             ...model.value,
@@ -353,7 +382,7 @@
                 video: false
               })
               console.log("Got User Media 2", mediaStream)
-              userMedia.value = mediaStream
+              setUserMedia(mediaStream)
             } catch(error) {
               model.value = {
                 ...model.value,
@@ -369,6 +398,8 @@
           }
         } else if(error.name === 'PermissionDeniedError') {
           showPermissionsDialog()
+        } else if(error.name === 'NotAllowedError') {
+          showPermissionsDialog()
         } else {
           model.value = {
             ...model.value,
@@ -381,7 +412,15 @@
     }
   }
 
-  watch(() => selectedConstraints.value, () => updateUserMedia(), { immediate: true })
+  watch(() => selectedConstraints.value, (constraints, oldConstraints) => {
+    console.log("CONSTRAINTS CHANGED FROM", oldConstraints, 'TO', constraints)
+    updateUserMedia()
+  })
+  onMounted(() => {
+    if(!model.value.media) {
+      updateUserMedia()
+    }
+  })
 
   useIntervalFn(() => {
     if(!retryMediaOnError.value) return
@@ -392,19 +431,12 @@
 
   const userMediaMuted = true
 
-  watch(() => userMedia.value, stream => {
-    console.log("MEDIA STREAM CHANGE", stream)
-    model.value = {
-      ...model.value,
-      media: stream
-    }
-  })
 
   watchEffect(() => {
-    if(userMedia.value) {
-      console.log("STREAM", userMedia.value, model.value.audioMuted, model.value.videoMuted)
-      userMedia.value.getAudioTracks().forEach(track => track.enabled = !model.value.audioMuted)
-      userMedia.value.getVideoTracks().forEach(track => track.enabled = !model.value.videoMuted)
+    if(model.value.media) {
+      console.log("STREAM", model.value.media, model.value.audioMuted, model.value.videoMuted)
+      model.value.media.getAudioTracks().forEach(track => track.enabled = !model.value.audioMuted)
+      model.value.media.getVideoTracks().forEach(track => track.enabled = !model.value.videoMuted)
     }
   })
 
@@ -465,7 +497,7 @@
   }
 
   function handleEmptyPreviewClick() {
-    if(userMedia.value) return
+    if(model.value.media) return
     const { camera, microphone } = permissionsDialog.value.permissions
     if(camera === 'denied' || microphone === 'denied') {
       // open permissions dialog
@@ -523,10 +555,12 @@
     }
   }
   function updateVideoInput(value) {
+    console.log("UPDATE VIDEO INPUT", value)
     model.value = {
       ...model.value,
       videoInput: value
     }
+    console.log("UPDATED VIDEO INPUT", model.value.videoInput)
   }
 
 </script>

package/front/src/components/userMedia.js

@@ -44,8 +44,41 @@ async function isUserMediaPermitted(constraints = { audio: true, video: true })
   return true
 }
 
-const getUserMedia = userMediaFactory()
-const getDisplayMedia = displayMediaFactory()
+const getUserMediaNative = userMediaFactory()
+const getDisplayMediaNative = displayMediaFactory()
 
-export { getUserMedia, getDisplayMedia, isUserMediaPermitted }
+const trackedStreams = []
+
+async function getUserMedia(...args) {
+  const stream = await getUserMediaNative(...args)
+  trackedStreams.push(stream)
+  console.log("STREAM ADDED", stream, "ALL STREAMS", trackedStreams.length)
+  return stream
+}
+
+async function getDisplayMedia(...args) {
+  const stream = await getDisplayMediaNative(...args)
+  trackedStreams.push(stream)
+  console.log("STREAM ADDED", stream, "ALL STREAMS", trackedStreams.length)
+  return stream
+}
+
+function stopMedia(stream) {
+  const index = trackedStreams.indexOf(stream)
+  if(index >= 0) {
+    trackedStreams.splice(index, 1)
+    console.log("STREAM REMOVED", stream, "ALL STREAMS", trackedStreams.length)
+  } else {
+    console.error("STREAM NOT FOUND", stream, "ALL STREAMS", trackedStreams)
+  }
+  if(stream.getTracks) {
+    for(const track of stream.getTracks()) {
+      track.stop()
+    }
+  } else {
+    stream.stop()
+  }
+}
+
+export { getUserMedia, getDisplayMedia, isUserMediaPermitted, stopMedia }
 

package/index.js

@@ -13,11 +13,12 @@ export {
 
 import { createPeer } from './front/src/components/Peer.js'
 import { createPeerConnection } from './front/src/components/PeerConnection.js'
-import { getUserMedia, getDisplayMedia, isUserMediaPermitted } from './front/src/components/userMedia.js'
+import { getUserMedia, getDisplayMedia, isUserMediaPermitted, stopMedia } from './front/src/components/userMedia.js'
 import { mediaStreamsTracks } from './front/src/components/mediaStreamsTracks.js'
 
 export {
-  createPeer, createPeerConnection, getUserMedia, getDisplayMedia, isUserMediaPermitted, mediaStreamsTracks
+  createPeer, createPeerConnection, getUserMedia, getDisplayMedia, stopMedia,
+  isUserMediaPermitted, mediaStreamsTracks
 }
 
 import { peerConnectionRoutes } from './front/src/router.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.87",
+  "version": "0.8.89",
   "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.87",
-    "@live-change/dao": "^0.8.87",
-    "@live-change/dao-vue3": "^0.8.87",
-    "@live-change/dao-websocket": "^0.8.87",
-    "@live-change/framework": "^0.8.87",
-    "@live-change/password-authentication-service": "^0.8.87",
-    "@live-change/secret-code-service": "^0.8.87",
-    "@live-change/secret-link-service": "^0.8.87",
-    "@live-change/session-service": "^0.8.87",
-    "@live-change/user-frontend": "^0.8.87",
-    "@live-change/user-service": "^0.8.87",
-    "@live-change/vue3-components": "^0.8.87",
-    "@live-change/vue3-ssr": "^0.8.87",
+    "@live-change/cli": "^0.8.89",
+    "@live-change/dao": "^0.8.89",
+    "@live-change/dao-vue3": "^0.8.89",
+    "@live-change/dao-websocket": "^0.8.89",
+    "@live-change/framework": "^0.8.89",
+    "@live-change/password-authentication-service": "^0.8.89",
+    "@live-change/secret-code-service": "^0.8.89",
+    "@live-change/secret-link-service": "^0.8.89",
+    "@live-change/session-service": "^0.8.89",
+    "@live-change/user-frontend": "^0.8.89",
+    "@live-change/user-service": "^0.8.89",
+    "@live-change/vue3-components": "^0.8.89",
+    "@live-change/vue3-ssr": "^0.8.89",
     "@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.87",
+    "@live-change/codeceptjs-helper": "^0.8.89",
     "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": "133e0785e028c37eb6f903d7355e5470b2cc65d3"
+  "gitHead": "15d4b3dc445480608c993e4057be208192e97023"
 }