@live-change/peer-connection-frontend 0.8.36 → 0.8.37

package/front/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     Button: typeof import('primevue/button')['default']
     Debugger: typeof import('./src/components/Debugger.vue')['default']
+    DeviceSelect: typeof import('./src/components/DeviceSelect.vue')['default']
     DevicesSelect: typeof import('./src/components/DevicesSelect.vue')['default']
     Dialog: typeof import('primevue/dialog')['default']
     Dropdown: typeof import('primevue/dropdown')['default']
@@ -16,5 +17,6 @@ declare module 'vue' {
     PermissionsDialog: typeof import('./src/components/PermissionsDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VolumeIndicator: typeof import('./src/components/VolumeIndicator.vue')['default']
   }
 }

package/front/src/App.vue

@@ -8,6 +8,7 @@
 
 <script setup>
   import 'primevue/resources/themes/lara-light-blue/theme.css'
+  import 'boxicons/css/boxicons.min.css'
 
   import { useLocale } from '@live-change/vue3-components'
   const locale = useLocale()

package/front/src/components/Debugger.vue

@@ -43,7 +43,7 @@
 
     <div>
       <h2>User media</h2>
-      <DevicesSelect v-model="selectedDevices" />
+      <DeviceSelect v-model="selectedDevices" />
       <hr>
       <pre>{{ selectedDevices }}</pre>
       <div class="mt-1 mb-3 flex align-items-center">
@@ -73,7 +73,7 @@
   import Dropdown from "primevue/dropdown"
   import Dialog from "primevue/dialog"
   import PermissionsDialog from './PermissionsDialog.vue'
-  import DevicesSelect from './DevicesSelect.vue'
+  import DeviceSelect from './DeviceSelect.vue'
 
   import { ref, unref, computed, watch, onMounted, onUnmounted, getCurrentInstance } from 'vue'
   import { path, live, actions, api as useApi } from '@live-change/vue3-ssr'

package/front/src/components/{DevicesSelect.vue → DeviceSelect.vue}

@@ -19,22 +19,29 @@
         </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-6rem">
+        <div class="flex flex-row justify-content-between align-items-center h-5rem w-7rem media-buttons">
+
           <Button v-if="!selectedConstraints?.audio?.deviceId"
-                  @click="handleDisabledAudioClick"  raised
-                  icon="pi pi-microphone" severity="secondary" rounded v-ripple />
+                  @click="handleDisabledAudioClick" raised
+                  icon="bx bx-microphone-off" severity="secondary" rounded v-ripple />
           <Button v-else-if="audioInputMuted" @click="audioInputMuted = false" raised
-                  icon="pi pi-microphone" severity="danger" rounded v-ripple />
+                  icon="bx bx-microphone-off" severity="danger" rounded v-ripple />
           <Button v-else @click="audioInputMuted = true" raised
-                  icon="pi pi-microphone" severity="success" rounded v-ripple />
+                  icon="bx bx-microphone" severity="success" rounded v-ripple />
 
           <Button v-if="!selectedConstraints?.video?.deviceId"
-                  @click="handleDisabledVideoClick"  raised
-                  icon="pi pi-camera" severity="secondary" rounded v-ripple />
+                  @click="handleDisabledVideoClick" raised
+                  icon="bx bx-camera-off" severity="secondary" rounded v-ripple />
           <Button v-else-if="videoInputMuted" @click="videoInputMuted = false" raised
-                  icon="pi pi-camera" severity="danger" rounded v-ripple />
+                  icon="bx bx-camera-off" severity="danger" rounded v-ripple />
           <Button v-else @click="videoInputMuted = true" raised
-                  icon="pi pi-camera" severity="success" rounded v-ripple />
+                  icon="bx bx-camera" severity="success" rounded v-ripple />
+
+        </div>
+      </div>
+      <div class="absolute top-0 right-0">
+        <div class="m-3">
+          <VolumeIndicator :stream="userMedia" />
         </div>
       </div>
     </div>
@@ -125,6 +132,14 @@
   </div>
 </template>
 
+<style lang="scss">
+  .media-buttons {
+    .bx::before {
+      font-size: 1.69em;
+    }
+  }
+</style>
+
 <script setup>
 
   import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch } from 'vue'
@@ -132,6 +147,7 @@
   import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
     from "./userMedia.js"
   import PermissionsDialog from './PermissionsDialog.vue'
+  import VolumeIndicator from './VolumeIndicator.vue'
 
   const props = defineProps({
     audioInputRequest: {
@@ -184,8 +200,10 @@
     devices.value = await navigator.mediaDevices.enumerateDevices()
     console.log("DEVICES", JSON.stringify(devices.value))
   }
-  useEventListener(navigator.mediaDevices, 'devicechange', updateDevices)
-  onMounted(updateDevices)
+  if(typeof window !== 'undefined') {
+    useEventListener(navigator.mediaDevices, 'devicechange', updateDevices)
+    onMounted(updateDevices)
+  }
 
   const audioInputs = computed(() => devices.value.filter(device => device.kind === 'audioinput'))
   const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput'))
@@ -208,13 +226,22 @@
   })
 
   watch(audioInputs, (value) => {
-    model.value.audioInput = value[0]
+    model.value = {
+      ...model.value,
+      audioInput: value[0]
+    }
   }, { immediate: true })
   watch(audioOutputs, (value) => {
-    model.value.audioOutput = value[0]
+    model.value = {
+      ...model.value,
+      audioOutput: value[0]
+    }
   }, { immediate: true })
   watch(videoInputs, (value) => {
-    model.value.videoInput = value[0]
+    model.value = {
+      ...model.value,
+      videoInput: value[0]
+    }
   }, { immediate: true })
 
 /*  onMounted(() => {
@@ -234,9 +261,9 @@
   const selectedConstraints = ref({ video: false, audio: false })
   watch(() => ({
     video: limitedMedia.value === 'audio' ? false :
-      { deviceId: model.value.videoInput?.deviceId, ...constraints.value.video },
+      { deviceId: model.value?.videoInput?.deviceId, ...constraints.value.video },
     audio: limitedMedia.value === 'video' ? false :
-      { deviceId: model.value.audioInput?.deviceId, ...constraints.value.audio }
+      { deviceId: model.value?.audioInput?.deviceId, ...constraints.value.audio }
   }), ({ video, audio }) => {
     console.log("SELECTED CONSTRAINTS", {
       video: selectedConstraints.value.video?.deviceId,
@@ -383,9 +410,6 @@
     //updateUserMedia()
   })
 
-  window.um = userMedia
-  window.model = model
-
 </script>
 
 <style scoped>

package/front/src/components/PermissionsDialog.vue

@@ -96,6 +96,7 @@
   const emit = defineEmits(['ok'])
 
   watch(() => JSON.stringify(requiredPermissions.value), async value => {
+    if(typeof window === 'undefined') return
     console.log("requiredPermissions", value)
 
     for(const requiredPermission of JSON.parse(value)) {

package/front/src/components/VolumeIndicator.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="flex flex-row border-circle w-2rem h-2rem bg-primary-800
+              align-items-center justify-content-center">
+    <div class="volume-indicator-bar bg-white border-round" ref="low"></div>
+    <div class="volume-indicator-bar bg-white border-round" ref="mid"></div>
+    <div class="volume-indicator-bar bg-white border-round" ref="high"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .volume-indicator-bar {
+    width: 0.3rem;
+    margin: 0.1rem;
+  }
+  .border-circle {
+    border-radius: 50%;
+  }
+  .bg-primary-700 {
+    background-color: #1976D2;
+  }
+</style>
+
+<script setup>
+
+  import { ref, defineProps, computed, toRefs, onMounted, onUnmounted, watch } from 'vue'
+
+  const props = defineProps({
+    stream: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { stream } = toRefs(props)
+
+  const speed = 0.46
+  const maxLogVolume = -2
+  const minLogVolume = -7
+  const lowFrequency = 230
+  const midFrequency = 460
+  const highFrequency = 1230
+  const filterQ = 0.1
+  const detune = 100
+
+  const minHeight = 3
+  const maxHeight = 15
+
+  const low = ref(null)
+  const mid = ref(null)
+  const high = ref(null)
+
+  let audioContext, mediaStreamSource
+  let lowFilter, midFilter, highFilter
+  let lowProcessor, midProcessor, highProcessor
+  let lowSlow = 0, midSlow = 0, highSlow = 0
+
+
+  function measureAmplitudeProcess(cb) {
+    return function(event) {
+      const numberOfChannels = event.inputBuffer.numberOfChannels
+      let instant = 0
+      for(let channelId = 0; channelId < numberOfChannels; channelId++) {
+        let sum = 0
+        const input = event.inputBuffer.getChannelData(channelId)
+        for (let i = 0; i < input.length; ++i) {
+          sum += input[i] * input[i]
+        }
+        instant += sum / input.length
+      }
+      cb(Math.sqrt(instant))
+    }
+  }
+
+  function handleLow(instant) {
+    instant = Math.log(instant)
+    let value = lowSlow
+    if(!Number.isFinite(value)) value = -1000
+    value = instant * speed + value * (1 - speed)
+    if(value > maxLogVolume) value = maxLogVolume
+    if(value < minLogVolume) value = minLogVolume
+    const height = ((value - minLogVolume)/(maxLogVolume - minLogVolume))
+      * (maxHeight - minHeight) + minHeight
+    lowSlow = value
+    low.value.style.height = height + 'px'
+  }
+  function handleMid(instant) {
+    instant = Math.log(instant)
+    let value = midSlow
+    if(!Number.isFinite(value)) value = -1000
+    value = instant * speed + value * (1 - speed)
+    if(value > maxLogVolume) value = maxLogVolume
+    if(value < minLogVolume) value = minLogVolume
+    const height = ((value - minLogVolume)/(maxLogVolume - minLogVolume))
+      * (maxHeight - minHeight) + minHeight
+    midSlow = value
+    mid.value.style.height = height + 'px'
+  }
+  function handleHigh(instant) {
+    instant = Math.log(instant)
+    let value = highSlow
+    if(!Number.isFinite(value)) value = -1000
+    value = instant * speed + value * (1 - speed)
+    if(value > maxLogVolume) value = maxLogVolume
+    if(value < minLogVolume) value = minLogVolume
+    const height = ((value - minLogVolume)/(maxLogVolume - minLogVolume))
+      * (maxHeight - minHeight) + minHeight
+    highSlow = value
+    high.value.style.height = height + 'px'
+  }
+
+  function startProcessingAudioStream(sourceStream) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)()
+
+    lowFilter = audioContext.createBiquadFilter()
+    lowFilter.type = 'lowpass'
+    lowFilter.frequency.value = lowFrequency
+    lowFilter.detune.value = detune
+    lowFilter.Q.value = filterQ
+
+    midFilter = audioContext.createBiquadFilter()
+    midFilter.type = 'bandpass'
+    midFilter.frequency.value = midFrequency
+    midFilter.detune.value = detune
+    midFilter.Q.value = filterQ
+
+    highFilter = audioContext.createBiquadFilter()
+    highFilter.type = 'highpass'
+    highFilter.frequency.value = highFrequency
+    highFilter.detune.value = detune
+    highFilter.Q.value = filterQ
+
+    lowProcessor = audioContext.createScriptProcessor(
+      2*2048, 1, 1)
+    lowProcessor.addEventListener('audioprocess', measureAmplitudeProcess(a => handleLow(a)))
+
+    midProcessor = audioContext.createScriptProcessor(
+      2*2048, 1, 1)
+    midProcessor.addEventListener('audioprocess', measureAmplitudeProcess(a => handleMid(a)))
+
+    highProcessor = audioContext.createScriptProcessor(
+      2*2048, 1, 1)
+    highProcessor.addEventListener('audioprocess', measureAmplitudeProcess(a => handleHigh(a)))
+
+    lowFilter.connect(lowProcessor)
+    midFilter.connect(midProcessor)
+    highFilter.connect(highProcessor)
+
+    lowProcessor.connect(audioContext.destination)
+    midProcessor.connect(audioContext.destination)
+    highProcessor.connect(audioContext.destination)
+
+    mediaStreamSource = audioContext.createMediaStreamSource(sourceStream)
+    mediaStreamSource.connect(lowFilter)
+    mediaStreamSource.connect(midFilter)
+    mediaStreamSource.connect(highFilter)
+  }
+
+  function stopProcessingAudioStream() {
+    if(mediaStreamSource) {
+      mediaStreamSource.disconnect()
+      mediaStreamSource = null
+    }
+    if(audioContext) audioContext.close()
+  }
+
+  function handleStreamChange() {
+    updateSource()
+  }
+
+  watch(stream, (newStream, oldStream) => {
+    if(oldStream) {
+      oldStream.removeEventListener('addtrack', handleStreamChange)
+      oldStream.removeEventListener('removetrack', handleStreamChange)
+    }
+    updateSource()
+    if(newStream) {
+      newStream.addEventListener('addtrack', handleStreamChange)
+      newStream.addEventListener('removetrack', handleStreamChange)
+    }
+  }, { immediate: true })
+
+  onMounted(() => {
+    updateSource()
+  })
+
+  function updateSource() {
+    console.log("UPDATE SOURCE", stream.value, "STARTED?")
+    if(mediaStreamSource) {
+      stopProcessingAudioStream()
+    }
+    if(stream.value && stream.value.getAudioTracks().length > 0) {
+      console.log("GOT AUDIO TRACKS!")
+      startProcessingAudioStream(stream.value)
+    }
+  }
+
+  onUnmounted(() => {
+    if(stream.value) {
+      stream.value.removeEventListener('addtrack', handleStreamChange)
+      stream.value.removeEventListener('removetrack', handleStreamChange)
+    }
+    stopProcessingAudioStream()
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/router.js

@@ -34,7 +34,7 @@ export function createRouter(app, config) {
     history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
     routes: [
       ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
-      ...peerConnectionRoutes(config),
+      ...peerConnectionRoutes({ ...config, prefix: '/peer-connection' }),
       {
         name: 'peer-connection:test-debugger', path: '/', meta: { },
         component: () => import("./components/Debugger.vue"),

package/index.js

@@ -1,8 +1,9 @@
 import Debugger from './front/src/components/Debugger.vue'
 import DeviceSelect from './front/src/components/DeviceSelect.vue'
 import PermissionsDialog from './front/src/components/PermissionsDialog.vue'
+import VolumeIndicator from './front/src/components/VolumeIndicator.vue'
 
-export { Debugger, DeviceSelect, PermissionsDialog }
+export { Debugger, DeviceSelect, PermissionsDialog, VolumeIndicator }
 
 import { createPeer } from './front/src/components/Peer.js'
 import { createPeerConnection } from './front/src/components/PeerConnection.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/peer-connection-frontend",
-  "version": "0.8.36",
+  "version": "0.8.37",
   "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,23 +22,25 @@
   },
   "type": "module",
   "dependencies": {
-    "@live-change/cli": "^0.8.36",
-    "@live-change/dao": "^0.8.36",
-    "@live-change/dao-vue3": "^0.8.36",
-    "@live-change/dao-websocket": "^0.8.36",
-    "@live-change/framework": "^0.8.36",
-    "@live-change/password-authentication-service": "^0.8.36",
-    "@live-change/secret-code-service": "^0.8.36",
-    "@live-change/secret-link-service": "^0.8.36",
-    "@live-change/session-service": "^0.8.36",
-    "@live-change/user-frontend": "^0.8.36",
-    "@live-change/user-service": "^0.8.36",
-    "@live-change/vue3-components": "^0.8.36",
-    "@live-change/vue3-ssr": "^0.8.36",
+    "@live-change/cli": "^0.8.37",
+    "@live-change/dao": "^0.8.37",
+    "@live-change/dao-vue3": "^0.8.37",
+    "@live-change/dao-websocket": "^0.8.37",
+    "@live-change/framework": "^0.8.37",
+    "@live-change/password-authentication-service": "^0.8.37",
+    "@live-change/secret-code-service": "^0.8.37",
+    "@live-change/secret-link-service": "^0.8.37",
+    "@live-change/session-service": "^0.8.37",
+    "@live-change/user-frontend": "^0.8.37",
+    "@live-change/user-service": "^0.8.37",
+    "@live-change/vue3-components": "^0.8.37",
+    "@live-change/vue3-ssr": "^0.8.37",
     "@vueuse/core": "^10.11.0",
+    "boxicons": "^2.1.4",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
+    "feather-icons": "^4.29.2",
     "get-port-sync": "1.0.1",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
@@ -52,7 +54,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.36",
+    "@live-change/codeceptjs-helper": "^0.8.37",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -63,5 +65,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "BSD-3-Clause",
   "description": "",
-  "gitHead": "24694d1687f0ab2d6eb7edd95e5274428cfd44eb"
+  "gitHead": "8b97a83258a3eccd08534d0376015781c4eefdec"
 }