KI-AGENT: SIP-Softphone für lokale Telefonie ergänzen

frontend/package-lock.json

@@ -83,6 +83,7 @@
         "pdf-lib": "^1.17.1",
         "pinia": "^2.1.7",
         "sass": "^1.69.7",
+        "sip.js": "^0.21.2",
         "socket.io-client": "^4.7.2",
         "tailwindcss-safe-area-capacitor": "^0.5.1",
         "tippy.js": "^6.3.7",
@@ -19022,6 +19023,15 @@
         "url": "https://github.com/steveukx/git-js?sponsor=1"
       }
     },
+    "node_modules/sip.js": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/sip.js/-/sip.js-0.21.2.tgz",
+      "integrity": "sha512-tSqTcIgrOd2IhP/rd70JablvAp+fSfLSxO4hGNY6LkWRY1SKygTO7OtJEV/BQb8oIxtMRx0LE7nUF2MaqGbFzA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
     "node_modules/sirv": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",

frontend/package.json

@@ -96,6 +96,7 @@
     "pdf-lib": "^1.17.1",
     "pinia": "^2.1.7",
     "sass": "^1.69.7",
+    "sip.js": "^0.21.2",
     "socket.io-client": "^4.7.2",
     "tailwindcss-safe-area-capacitor": "^0.5.1",
     "tippy.js": "^6.3.7",

frontend/pages/communication/phone.vue

@@ -9,6 +9,36 @@ const config = ref(null)
 const status = ref(null)
 const websocketResult = ref(null)
 const lastUpdated = ref(null)
+const selectedExtension = ref("1001")
+const dialTarget = ref("600")
+const sipModule = ref(null)
+const userAgent = shallowRef(null)
+const registerer = shallowRef(null)
+const activeSession = shallowRef(null)
+const remoteAudio = ref(null)
+const sipLoading = ref(false)
+const sipRegistered = ref(false)
+const sipStatus = ref("Nicht verbunden")
+const sipError = ref(null)
+const incomingCall = ref(null)
+const callState = ref("idle")
+
+const selectedAccount = computed(() =>
+  (config.value?.testAccounts || []).find((account) => account.extension === selectedExtension.value)
+    || config.value?.testAccounts?.[0]
+)
+
+const canRegisterSip = computed(() =>
+  Boolean(config.value?.sipWebSocketUrl && config.value?.sipDomain && selectedAccount.value && !sipLoading.value)
+)
+
+const canStartCall = computed(() =>
+  Boolean(sipRegistered.value && dialTarget.value?.trim() && !activeSession.value && !sipLoading.value)
+)
+
+const canHangup = computed(() =>
+  Boolean(activeSession.value && callState.value !== "terminated")
+)
 
 const statusColor = computed(() => {
   if (status.value?.reachable) return "success"
@@ -110,7 +140,264 @@ const testWebSocket = async () => {
   websocketTesting.value = false
 }
 
+const ensureSipModule = async () => {
+  if (!sipModule.value) {
+    sipModule.value = await import("sip.js")
+  }
+
+  return sipModule.value
+}
+
+const cleanupRemoteAudio = () => {
+  if (!remoteAudio.value?.srcObject) return
+
+  const stream = remoteAudio.value.srcObject
+  if (stream?.getTracks) {
+    stream.getTracks().forEach((track) => track.stop())
+  }
+
+  remoteAudio.value.srcObject = null
+}
+
+const attachRemoteAudio = async (session) => {
+  const peerConnection = session?.sessionDescriptionHandler?.peerConnection
+  if (!peerConnection || !remoteAudio.value) return
+
+  const remoteStream = new MediaStream()
+  peerConnection.getReceivers().forEach((receiver) => {
+    if (receiver.track) remoteStream.addTrack(receiver.track)
+  })
+
+  remoteAudio.value.srcObject = remoteStream
+
+  try {
+    await remoteAudio.value.play()
+  } catch (error) {
+    // Browser dürfen Autoplay blockieren; der Call selbst bleibt davon unberührt.
+  }
+}
+
+const setupSession = (session, direction = "outgoing") => {
+  const { SessionState } = sipModule.value
+
+  activeSession.value = session
+  callState.value = direction === "incoming" ? "incoming" : "connecting"
+  sipStatus.value = direction === "incoming" ? "Eingehender Anruf" : "Anruf wird aufgebaut"
+
+  session.stateChange.addListener(async (state) => {
+    if (state === SessionState.Establishing) {
+      callState.value = "connecting"
+      sipStatus.value = "Anruf wird aufgebaut"
+    }
+
+    if (state === SessionState.Established) {
+      callState.value = "active"
+      sipStatus.value = "Im Gespräch"
+      incomingCall.value = null
+      await attachRemoteAudio(session)
+    }
+
+    if (state === SessionState.Terminated) {
+      callState.value = "terminated"
+      sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
+      activeSession.value = null
+      incomingCall.value = null
+      cleanupRemoteAudio()
+    }
+  })
+}
+
+const stopSip = async () => {
+  sipLoading.value = true
+  sipError.value = null
+
+  try {
+    if (activeSession.value) {
+      await hangupCall()
+    }
+
+    if (registerer.value) {
+      await registerer.value.unregister()
+      registerer.value = null
+    }
+
+    if (userAgent.value) {
+      await userAgent.value.stop()
+      userAgent.value = null
+    }
+
+    sipRegistered.value = false
+    sipStatus.value = "Nicht verbunden"
+    callState.value = "idle"
+  } catch (error) {
+    sipError.value = error?.message || "SIP-Verbindung konnte nicht getrennt werden."
+  } finally {
+    sipLoading.value = false
+  }
+}
+
+const registerSip = async () => {
+  if (!canRegisterSip.value) return
+
+  sipLoading.value = true
+  sipError.value = null
+
+  try {
+    await stopSip()
+
+    const sip = await ensureSipModule()
+    const account = selectedAccount.value
+    const uri = sip.UserAgent.makeURI(`sip:${account.extension}@${config.value.sipDomain}`)
+
+    if (!uri) throw new Error("SIP-URI konnte nicht erstellt werden.")
+
+    const ua = new sip.UserAgent({
+      uri,
+      displayName: account.displayName,
+      authorizationUsername: account.extension,
+      authorizationPassword: account.password,
+      transportOptions: {
+        server: config.value.sipWebSocketUrl,
+      },
+      sessionDescriptionHandlerFactoryOptions: {
+        constraints: {
+          audio: true,
+          video: false,
+        },
+        peerConnectionConfiguration: {
+          iceServers: [],
+        },
+      },
+    })
+
+    ua.delegate = {
+      onInvite(invitation) {
+        incomingCall.value = invitation
+        setupSession(invitation, "incoming")
+      },
+    }
+
+    const reg = new sip.Registerer(ua)
+
+    userAgent.value = ua
+    registerer.value = reg
+
+    await ua.start()
+    await reg.register()
+
+    sipRegistered.value = true
+    sipStatus.value = `Registriert als ${account.extension}`
+  } catch (error) {
+    sipRegistered.value = false
+    sipStatus.value = "Nicht verbunden"
+    sipError.value = error?.message || "SIP-Registrierung fehlgeschlagen."
+  } finally {
+    sipLoading.value = false
+  }
+}
+
+const startCall = async () => {
+  if (!canStartCall.value) return
+
+  sipLoading.value = true
+  sipError.value = null
+
+  try {
+    const sip = await ensureSipModule()
+    const target = sip.UserAgent.makeURI(`sip:${dialTarget.value.trim()}@${config.value.sipDomain}`)
+
+    if (!target) throw new Error("Zielnummer ist keine gültige SIP-Adresse.")
+
+    const inviter = new sip.Inviter(userAgent.value, target, {
+      sessionDescriptionHandlerOptions: {
+        constraints: {
+          audio: true,
+          video: false,
+        },
+      },
+    })
+
+    setupSession(inviter, "outgoing")
+    await inviter.invite()
+  } catch (error) {
+    activeSession.value = null
+    callState.value = "idle"
+    sipError.value = error?.message || "Anruf konnte nicht gestartet werden."
+  } finally {
+    sipLoading.value = false
+  }
+}
+
+const acceptIncomingCall = async () => {
+  if (!incomingCall.value) return
+
+  sipLoading.value = true
+  sipError.value = null
+
+  try {
+    await incomingCall.value.accept({
+      sessionDescriptionHandlerOptions: {
+        constraints: {
+          audio: true,
+          video: false,
+        },
+      },
+    })
+  } catch (error) {
+    sipError.value = error?.message || "Anruf konnte nicht angenommen werden."
+  } finally {
+    sipLoading.value = false
+  }
+}
+
+const rejectIncomingCall = async () => {
+  if (!incomingCall.value) return
+
+  try {
+    await incomingCall.value.reject()
+  } finally {
+    incomingCall.value = null
+    activeSession.value = null
+    callState.value = "idle"
+  }
+}
+
+const hangupCall = async () => {
+  const session = activeSession.value
+  if (!session) return
+
+  const { SessionState } = sipModule.value || await ensureSipModule()
+
+  try {
+    if (session.state === SessionState.Initial && session.reject) {
+      await session.reject()
+    } else if (session.state === SessionState.Establishing && session.cancel) {
+      await session.cancel()
+    } else if (session.state === SessionState.Established && session.bye) {
+      await session.bye()
+    } else if (session.dispose) {
+      session.dispose()
+    }
+  } finally {
+    activeSession.value = null
+    incomingCall.value = null
+    callState.value = "idle"
+    cleanupRemoteAudio()
+    sipStatus.value = sipRegistered.value ? "Registriert" : "Nicht verbunden"
+  }
+}
+
+watch(config, (nextConfig) => {
+  if (!selectedAccount.value && nextConfig?.testAccounts?.length) {
+    selectedExtension.value = nextConfig.testAccounts[0].extension
+  }
+})
+
 onMounted(loadTelephony)
+
+onBeforeUnmount(() => {
+  stopSip()
+})
 </script>
 
 <template>
@@ -148,6 +435,145 @@ onMounted(loadTelephony)
         </div>
       </div>
 
+      <UCard>
+        <template #header>
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <h2 class="text-base font-semibold text-gray-950">
+                FEDEO Softphone
+              </h2>
+              <p class="mt-1 text-sm text-gray-500">
+                Registrierung und Testanrufe direkt über den lokalen Asterisk.
+              </p>
+            </div>
+            <UBadge
+              :color="sipRegistered ? 'success' : 'neutral'"
+              variant="soft"
+              class="w-fit"
+            >
+              {{ sipStatus }}
+            </UBadge>
+          </div>
+        </template>
+
+        <div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
+          <div class="space-y-4">
+            <div>
+              <label class="text-sm font-medium text-gray-700">Nebenstelle</label>
+              <div class="mt-2 grid gap-2 sm:grid-cols-2">
+                <button
+                  v-for="account in config?.testAccounts || []"
+                  :key="account.extension"
+                  type="button"
+                  class="rounded-lg border px-4 py-3 text-left transition"
+                  :class="selectedExtension === account.extension ? 'border-primary-500 bg-primary-50 text-primary-900' : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300'"
+                  :disabled="sipRegistered || sipLoading"
+                  @click="selectedExtension = account.extension"
+                >
+                  <span class="block font-semibold">{{ account.extension }}</span>
+                  <span class="mt-1 block text-xs opacity-75">{{ account.displayName }}</span>
+                </button>
+              </div>
+            </div>
+
+            <div class="grid gap-3 sm:grid-cols-2">
+              <UButton
+                icon="i-heroicons-phone-arrow-up-right"
+                :loading="sipLoading && !sipRegistered"
+                :disabled="!canRegisterSip || sipRegistered"
+                @click="registerSip"
+              >
+                Registrieren
+              </UButton>
+              <UButton
+                icon="i-heroicons-x-circle"
+                color="neutral"
+                variant="soft"
+                :disabled="!sipRegistered || sipLoading"
+                @click="stopSip"
+              >
+                Trennen
+              </UButton>
+            </div>
+          </div>
+
+          <div class="rounded-lg border border-gray-200 bg-white p-4">
+            <div class="grid gap-3 sm:grid-cols-[1fr_auto]">
+              <UInput
+                v-model="dialTarget"
+                icon="i-heroicons-hashtag"
+                placeholder="Ziel, z. B. 600 oder 1002"
+                :disabled="!sipRegistered || Boolean(activeSession)"
+              />
+              <UButton
+                icon="i-heroicons-phone"
+                :loading="sipLoading && sipRegistered"
+                :disabled="!canStartCall"
+                @click="startCall"
+              >
+                Anrufen
+              </UButton>
+            </div>
+
+            <div class="mt-4 flex flex-wrap items-center gap-2">
+              <UButton
+                icon="i-heroicons-phone-x-mark"
+                color="error"
+                variant="soft"
+                :disabled="!canHangup"
+                @click="hangupCall"
+              >
+                Auflegen
+              </UButton>
+              <UBadge color="neutral" variant="soft">
+                {{ callState === "active" ? "Aktiver Anruf" : callState === "connecting" ? "Verbindet" : callState === "incoming" ? "Eingehend" : "Bereit" }}
+              </UBadge>
+            </div>
+
+            <UAlert
+              v-if="incomingCall"
+              class="mt-4"
+              color="primary"
+              icon="i-heroicons-phone-arrow-down-left"
+              title="Eingehender Anruf"
+              description="Ein lokaler SIP-Testanruf wartet auf Annahme."
+            >
+              <template #actions>
+                <UButton
+                  size="xs"
+                  color="success"
+                  icon="i-heroicons-phone"
+                  :loading="sipLoading"
+                  @click="acceptIncomingCall"
+                >
+                  Annehmen
+                </UButton>
+                <UButton
+                  size="xs"
+                  color="error"
+                  variant="soft"
+                  icon="i-heroicons-phone-x-mark"
+                  @click="rejectIncomingCall"
+                >
+                  Ablehnen
+                </UButton>
+              </template>
+            </UAlert>
+
+            <UAlert
+              v-if="sipError"
+              class="mt-4"
+              color="error"
+              icon="i-heroicons-exclamation-triangle"
+              title="Telefoniefehler"
+              :description="sipError"
+            />
+
+            <audio ref="remoteAudio" autoplay playsinline />
+          </div>
+        </div>
+      </UCard>
+
       <div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
         <UCard>
           <template #header>