KI-AGENT: SIP-Softphone für lokale Telefonie ergänzen
This commit is contained in:
10
frontend/package-lock.json
generated
10
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user