KI-AGENT: Telefonie und Setup trennen
This commit is contained in:
288
frontend/pages/communication/phone-setup.vue
Normal file
288
frontend/pages/communication/phone-setup.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<script setup>
|
||||
const {
|
||||
loading,
|
||||
statusLoading,
|
||||
websocketTesting,
|
||||
config,
|
||||
status,
|
||||
websocketResult,
|
||||
lastUpdated,
|
||||
selectedExtension,
|
||||
sipRegistered,
|
||||
sipStatus,
|
||||
registererState,
|
||||
sipEvents,
|
||||
statusColor,
|
||||
statusIcon,
|
||||
websocketColor,
|
||||
loadTelephony,
|
||||
refreshStatus,
|
||||
testWebSocket,
|
||||
} = useTelephonySoftphone()
|
||||
|
||||
onMounted(loadTelephony)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-0 flex-1 overflow-y-auto bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
<div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-600">
|
||||
Kommunikation
|
||||
</p>
|
||||
<h1 class="mt-1 text-2xl font-semibold text-gray-950">
|
||||
Telefonie Setup
|
||||
</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm text-gray-600">
|
||||
Asterisk-Status, Browser-Verbindung und lokale Test-Nebenstellen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path"
|
||||
variant="soft"
|
||||
:loading="loading"
|
||||
@click="loadTelephony"
|
||||
>
|
||||
Aktualisieren
|
||||
</UButton>
|
||||
<UButton
|
||||
to="/communication/phone"
|
||||
icon="i-heroicons-phone"
|
||||
variant="outline"
|
||||
>
|
||||
Zur Telefonie
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Asterisk-Status
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Backend-Abfrage gegen den lokalen Telefonie-Stack.
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-signal"
|
||||
variant="ghost"
|
||||
:loading="statusLoading"
|
||||
@click="refreshStatus"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
|
||||
<span class="text-sm font-medium text-gray-700">Status</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-server-stack" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Provider</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ config?.provider || "asterisk" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Echo-Test</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ config?.echoExtension || "600" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
class="mt-4"
|
||||
:color="statusColor"
|
||||
:icon="statusIcon"
|
||||
:title="status?.message || 'Telefonie wird geladen'"
|
||||
:description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
|
||||
/>
|
||||
|
||||
<div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-gray-500">
|
||||
Geprüfte Status-Ziele
|
||||
</p>
|
||||
<div class="mt-2 grid gap-2">
|
||||
<div
|
||||
v-for="attempt in status.attempts"
|
||||
:key="attempt.url"
|
||||
class="flex items-center justify-between gap-3 text-sm"
|
||||
>
|
||||
<span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
|
||||
<UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
|
||||
{{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Lokalen Stack starten
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
|
||||
docker compose --profile telephony-dev up -d asterisk-dev
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 text-sm text-gray-600">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span>SIP-Domain</span>
|
||||
<span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span>WebSocket</span>
|
||||
<span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Browser-Test
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<UButton
|
||||
icon="i-heroicons-bolt"
|
||||
:loading="websocketTesting"
|
||||
:disabled="!config?.sipWebSocketUrl"
|
||||
@click="testWebSocket"
|
||||
>
|
||||
WebSocket prüfen
|
||||
</UButton>
|
||||
|
||||
<UAlert
|
||||
v-if="websocketResult"
|
||||
:color="websocketColor"
|
||||
:icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
||||
:title="websocketResult.message"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Test-Nebenstellen
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Für lokale Call-Tests zwischen zwei Browser-Sessions.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="account in config?.testAccounts || []"
|
||||
:key="account.extension"
|
||||
class="rounded-lg border border-gray-200 bg-white p-4"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-user-circle" class="text-primary-600" />
|
||||
<h3 class="font-semibold text-gray-950">
|
||||
{{ account.displayName }}
|
||||
</h3>
|
||||
</div>
|
||||
<dl class="mt-4 grid gap-2 text-sm">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<dt class="text-gray-500">Nebenstelle</dt>
|
||||
<dd class="font-mono text-gray-950">{{ account.extension }}</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<dt class="text-gray-500">Passwort</dt>
|
||||
<dd class="font-mono text-gray-950">{{ account.password }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</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">
|
||||
SIP-Diagnose
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Aktuelle Registrierung und letzte SIP-Ereignisse.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<UBadge :color="sipRegistered ? 'success' : 'neutral'" variant="soft">
|
||||
{{ sipStatus }}
|
||||
</UBadge>
|
||||
<UBadge color="neutral" variant="soft">
|
||||
Nebenstelle {{ selectedExtension }}
|
||||
</UBadge>
|
||||
<UBadge color="neutral" variant="soft">
|
||||
{{ registererState }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="sipEvents.length" class="rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<ul class="space-y-1 text-xs text-gray-600">
|
||||
<li
|
||||
v-for="event in sipEvents"
|
||||
:key="`${event.time}-${event.message}`"
|
||||
class="grid grid-cols-[4.5rem_1fr] gap-2"
|
||||
>
|
||||
<span class="font-mono text-gray-400">{{ event.time }}</span>
|
||||
<span class="break-words">{{ event.message }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p v-else class="text-sm text-gray-500">
|
||||
Noch keine SIP-Ereignisse vorhanden.
|
||||
</p>
|
||||
</UCard>
|
||||
|
||||
<p v-if="lastUpdated" class="text-xs text-gray-500">
|
||||
Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,622 +1,33 @@
|
||||
<script setup>
|
||||
const toast = useToast()
|
||||
const { $api } = useNuxtApp()
|
||||
|
||||
const loading = ref(false)
|
||||
const statusLoading = ref(false)
|
||||
const websocketTesting = ref(false)
|
||||
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 registererState = ref("Initial")
|
||||
const sipEvents = ref([])
|
||||
const ringtoneTimer = shallowRef(null)
|
||||
const ringtoneAudioContext = shallowRef(null)
|
||||
const callSignalStatus = ref("Bereit")
|
||||
const originalDocumentTitle = ref("")
|
||||
|
||||
const incomingCaller = computed(() => {
|
||||
const identity = incomingCall.value?.remoteIdentity
|
||||
return identity?.displayName || identity?.uri?.user || "Unbekannter Anrufer"
|
||||
})
|
||||
|
||||
const addSipEvent = (message) => {
|
||||
sipEvents.value = [
|
||||
{
|
||||
time: new Date().toLocaleTimeString("de-DE"),
|
||||
message,
|
||||
},
|
||||
...sipEvents.value,
|
||||
].slice(0, 8)
|
||||
}
|
||||
|
||||
const playRingtoneTick = async () => {
|
||||
if (!window.AudioContext && !window.webkitAudioContext) return
|
||||
|
||||
const AudioContextConstructor = window.AudioContext || window.webkitAudioContext
|
||||
const context = ringtoneAudioContext.value || new AudioContextConstructor()
|
||||
ringtoneAudioContext.value = context
|
||||
|
||||
if (context.state === "suspended") {
|
||||
await context.resume()
|
||||
}
|
||||
|
||||
const oscillator = context.createOscillator()
|
||||
const gain = context.createGain()
|
||||
oscillator.type = "sine"
|
||||
oscillator.frequency.value = 880
|
||||
gain.gain.setValueAtTime(0.0001, context.currentTime)
|
||||
gain.gain.exponentialRampToValueAtTime(0.12, context.currentTime + 0.03)
|
||||
gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.35)
|
||||
oscillator.connect(gain)
|
||||
gain.connect(context.destination)
|
||||
oscillator.start()
|
||||
oscillator.stop(context.currentTime + 0.38)
|
||||
}
|
||||
|
||||
const startCallSignaling = async () => {
|
||||
stopCallSignaling()
|
||||
callSignalStatus.value = "Signalisiert"
|
||||
originalDocumentTitle.value = document.title
|
||||
document.title = "Eingehender Anruf - FEDEO"
|
||||
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate([180, 90, 180])
|
||||
}
|
||||
|
||||
try {
|
||||
await playRingtoneTick()
|
||||
ringtoneTimer.value = window.setInterval(() => {
|
||||
playRingtoneTick().catch((error) => {
|
||||
callSignalStatus.value = "Klingelton blockiert"
|
||||
addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
|
||||
})
|
||||
}, 1400)
|
||||
} catch (error) {
|
||||
callSignalStatus.value = "Klingelton blockiert"
|
||||
addSipEvent(`Klingelton blockiert: ${error?.message || "Browser-Autoplay"}`)
|
||||
}
|
||||
}
|
||||
|
||||
const stopCallSignaling = () => {
|
||||
if (ringtoneTimer.value) {
|
||||
window.clearInterval(ringtoneTimer.value)
|
||||
ringtoneTimer.value = null
|
||||
}
|
||||
|
||||
if (originalDocumentTitle.value) {
|
||||
document.title = originalDocumentTitle.value
|
||||
originalDocumentTitle.value = ""
|
||||
}
|
||||
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(0)
|
||||
}
|
||||
|
||||
callSignalStatus.value = "Bereit"
|
||||
}
|
||||
|
||||
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"
|
||||
if (!status.value?.enabled) return "warning"
|
||||
return "error"
|
||||
})
|
||||
|
||||
const statusIcon = computed(() => {
|
||||
if (status.value?.reachable) return "i-heroicons-signal"
|
||||
if (!status.value?.enabled) return "i-heroicons-pause-circle"
|
||||
return "i-heroicons-signal-slash"
|
||||
})
|
||||
|
||||
const websocketColor = computed(() => {
|
||||
if (!websocketResult.value) return "neutral"
|
||||
return websocketResult.value.ok ? "success" : "error"
|
||||
})
|
||||
|
||||
const loadTelephony = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const [configRes, statusRes] = await Promise.all([
|
||||
$api("/api/telephony/config"),
|
||||
$api("/api/telephony/status")
|
||||
])
|
||||
|
||||
config.value = configRes
|
||||
status.value = statusRes
|
||||
lastUpdated.value = new Date()
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Telefonie-Status konnte nicht geladen werden",
|
||||
color: "error"
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const refreshStatus = async () => {
|
||||
statusLoading.value = true
|
||||
try {
|
||||
status.value = await $api("/api/telephony/status")
|
||||
lastUpdated.value = new Date()
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
title: "Asterisk-Status konnte nicht geprüft werden",
|
||||
color: "error"
|
||||
})
|
||||
} finally {
|
||||
statusLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const testWebSocket = async () => {
|
||||
if (!config.value?.sipWebSocketUrl || websocketTesting.value) return
|
||||
|
||||
websocketTesting.value = true
|
||||
websocketResult.value = null
|
||||
|
||||
await new Promise((resolve) => {
|
||||
let settled = false
|
||||
const socket = new WebSocket(config.value.sipWebSocketUrl, "sip")
|
||||
const timer = window.setTimeout(() => {
|
||||
if (settled) return
|
||||
settled = true
|
||||
socket.close()
|
||||
websocketResult.value = {
|
||||
ok: false,
|
||||
message: "WebSocket-Verbindung ist abgelaufen."
|
||||
}
|
||||
resolve()
|
||||
}, 3000)
|
||||
|
||||
socket.onopen = () => {
|
||||
if (settled) return
|
||||
settled = true
|
||||
window.clearTimeout(timer)
|
||||
websocketResult.value = {
|
||||
ok: true,
|
||||
message: "SIP-WebSocket ist aus dem Browser erreichbar."
|
||||
}
|
||||
socket.close()
|
||||
resolve()
|
||||
}
|
||||
|
||||
socket.onerror = () => {
|
||||
if (settled) return
|
||||
settled = true
|
||||
window.clearTimeout(timer)
|
||||
websocketResult.value = {
|
||||
ok: false,
|
||||
message: "SIP-WebSocket konnte nicht geöffnet werden."
|
||||
}
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
|
||||
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) {
|
||||
stopCallSignaling()
|
||||
callState.value = "active"
|
||||
sipStatus.value = "Im Gespräch"
|
||||
incomingCall.value = null
|
||||
await attachRemoteAudio(session)
|
||||
}
|
||||
|
||||
if (state === SessionState.Terminated) {
|
||||
stopCallSignaling()
|
||||
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
|
||||
registererState.value = "Initial"
|
||||
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 handleIncomingInvite = (invitation) => {
|
||||
addSipEvent(`INVITE von ${invitation.remoteIdentity?.uri?.user || "unbekannt"} empfangen`)
|
||||
incomingCall.value = invitation
|
||||
setupSession(invitation, "incoming")
|
||||
startCallSignaling()
|
||||
|
||||
toast.add({
|
||||
title: "Eingehender Anruf",
|
||||
description: `Anruf für ${account.extension}`,
|
||||
color: "primary"
|
||||
})
|
||||
}
|
||||
|
||||
const ua = new sip.UserAgent({
|
||||
uri,
|
||||
displayName: account.displayName,
|
||||
contactName: account.extension,
|
||||
authorizationUsername: account.extension,
|
||||
authorizationPassword: account.password,
|
||||
logBuiltinEnabled: true,
|
||||
logLevel: "log",
|
||||
logConnector: (level, category, label, content) => {
|
||||
if (category === "sip.Transport" && content.includes("Received WebSocket")) {
|
||||
addSipEvent("SIP-Nachricht über WebSocket empfangen")
|
||||
}
|
||||
|
||||
if (content.includes("INVITE")) {
|
||||
addSipEvent(`${category}: ${content.split("\n")[0]}`)
|
||||
}
|
||||
|
||||
if (level === "error" || level === "warn") {
|
||||
addSipEvent(`${category}: ${content.split("\n")[0]}`)
|
||||
}
|
||||
},
|
||||
delegate: {
|
||||
onInvite: handleIncomingInvite,
|
||||
onConnect: () => {
|
||||
addSipEvent("SIP-WebSocket verbunden")
|
||||
sipStatus.value = sipRegistered.value ? `Registriert als ${account.extension}` : "SIP-WebSocket verbunden"
|
||||
},
|
||||
onDisconnect: () => {
|
||||
addSipEvent("SIP-WebSocket getrennt")
|
||||
sipRegistered.value = false
|
||||
sipStatus.value = "SIP-WebSocket getrennt"
|
||||
},
|
||||
},
|
||||
transportOptions: {
|
||||
server: config.value.sipWebSocketUrl,
|
||||
keepAliveInterval: 20,
|
||||
traceSip: true,
|
||||
},
|
||||
sessionDescriptionHandlerFactoryOptions: {
|
||||
constraints: {
|
||||
audio: true,
|
||||
video: false,
|
||||
},
|
||||
peerConnectionConfiguration: {
|
||||
iceServers: [],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const reg = new sip.Registerer(ua, {
|
||||
expires: 120,
|
||||
})
|
||||
|
||||
reg.stateChange.addListener((state) => {
|
||||
registererState.value = state
|
||||
|
||||
if (state === sip.RegistererState.Registered) {
|
||||
addSipEvent(`Registrierung ${account.extension}: Registered`)
|
||||
sipRegistered.value = true
|
||||
sipStatus.value = `Registriert als ${account.extension}`
|
||||
}
|
||||
|
||||
if (state === sip.RegistererState.Unregistered || state === sip.RegistererState.Terminated) {
|
||||
addSipEvent(`Registrierung ${account.extension}: ${state}`)
|
||||
sipRegistered.value = false
|
||||
sipStatus.value = "Nicht verbunden"
|
||||
}
|
||||
})
|
||||
|
||||
userAgent.value = ua
|
||||
registerer.value = reg
|
||||
|
||||
await ua.start()
|
||||
await reg.register({
|
||||
requestDelegate: {
|
||||
onAccept: () => {
|
||||
addSipEvent(`REGISTER ${account.extension}: 200 OK`)
|
||||
sipRegistered.value = true
|
||||
sipStatus.value = `Registriert als ${account.extension}`
|
||||
registererState.value = sip.RegistererState.Registered
|
||||
},
|
||||
onReject: (response) => {
|
||||
sipRegistered.value = false
|
||||
sipStatus.value = "Registrierung abgelehnt"
|
||||
sipError.value = `Asterisk hat REGISTER mit HTTP/SIP ${response.message.statusCode} abgelehnt.`
|
||||
addSipEvent(`REGISTER ${account.extension}: ${response.message.statusCode}`)
|
||||
},
|
||||
},
|
||||
})
|
||||
} 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
|
||||
stopCallSignaling()
|
||||
|
||||
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 {
|
||||
stopCallSignaling()
|
||||
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 {
|
||||
stopCallSignaling()
|
||||
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
|
||||
}
|
||||
})
|
||||
const {
|
||||
loading,
|
||||
config,
|
||||
selectedExtension,
|
||||
dialTarget,
|
||||
activeSession,
|
||||
remoteAudio,
|
||||
sipLoading,
|
||||
sipRegistered,
|
||||
sipStatus,
|
||||
sipError,
|
||||
callState,
|
||||
registererState,
|
||||
canRegisterSip,
|
||||
canStartCall,
|
||||
canHangup,
|
||||
loadTelephony,
|
||||
registerSip,
|
||||
stopSip,
|
||||
startCall,
|
||||
hangupCall,
|
||||
} = useTelephonySoftphone()
|
||||
|
||||
onMounted(loadTelephony)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
stopCallSignaling()
|
||||
stopSip()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-0 flex-1 overflow-y-auto bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto flex max-w-7xl flex-col gap-6">
|
||||
<div
|
||||
v-if="incomingCall"
|
||||
class="sticky top-0 z-30 rounded-lg border border-primary-200 bg-white p-4 shadow-lg ring-1 ring-primary-100"
|
||||
>
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
|
||||
<UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-xs font-medium uppercase text-primary-600">
|
||||
Eingehender Anruf
|
||||
</p>
|
||||
<h2 class="truncate text-lg font-semibold text-gray-950">
|
||||
{{ incomingCaller }}
|
||||
</h2>
|
||||
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-gray-500">
|
||||
<span>Nebenstelle {{ selectedExtension }}</span>
|
||||
<UBadge color="primary" variant="soft">
|
||||
{{ callSignalStatus }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-2 lg:min-w-72">
|
||||
<UButton
|
||||
color="success"
|
||||
icon="i-heroicons-phone"
|
||||
size="lg"
|
||||
block
|
||||
:loading="sipLoading"
|
||||
@click="acceptIncomingCall"
|
||||
>
|
||||
Annehmen
|
||||
</UButton>
|
||||
<UButton
|
||||
color="error"
|
||||
variant="soft"
|
||||
icon="i-heroicons-phone-x-mark"
|
||||
size="lg"
|
||||
block
|
||||
@click="rejectIncomingCall"
|
||||
>
|
||||
Ablehnen
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 rounded-md bg-gray-50 px-3 py-2 text-xs text-gray-500">
|
||||
Debug: INVITE empfangen, Session aktiv, Signalisierung {{ callSignalStatus }}.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 border-b border-gray-200 pb-5 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-primary-600">
|
||||
@@ -626,7 +37,7 @@ onBeforeUnmount(() => {
|
||||
Telefonie
|
||||
</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm text-gray-600">
|
||||
Lokaler Asterisk-Test für SIP, WebRTC und spätere Voice-Integration in FEDEO.
|
||||
Anrufe direkt in FEDEO starten und annehmen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -639,6 +50,13 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
Aktualisieren
|
||||
</UButton>
|
||||
<UButton
|
||||
to="/communication/phone-setup"
|
||||
icon="i-heroicons-cog-6-tooth"
|
||||
variant="outline"
|
||||
>
|
||||
Telefonie-Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
to="/communication/chat"
|
||||
icon="i-heroicons-chat-bubble-left-right"
|
||||
@@ -657,7 +75,7 @@ onBeforeUnmount(() => {
|
||||
FEDEO Softphone
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Registrierung und Testanrufe direkt über den lokalen Asterisk.
|
||||
Registrierung und Anrufe über den lokalen Asterisk.
|
||||
</p>
|
||||
</div>
|
||||
<UBadge
|
||||
@@ -747,55 +165,6 @@ onBeforeUnmount(() => {
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="sipEvents.length"
|
||||
class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3"
|
||||
>
|
||||
<p class="text-xs font-medium uppercase text-gray-500">
|
||||
SIP-Ereignisse
|
||||
</p>
|
||||
<ul class="mt-2 space-y-1 text-xs text-gray-600">
|
||||
<li
|
||||
v-for="event in sipEvents"
|
||||
:key="`${event.time}-${event.message}`"
|
||||
class="grid grid-cols-[4.5rem_1fr] gap-2"
|
||||
>
|
||||
<span class="font-mono text-gray-400">{{ event.time }}</span>
|
||||
<span class="break-words">{{ event.message }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</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"
|
||||
@@ -809,190 +178,6 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Asterisk-Status
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Backend-Abfrage gegen den lokalen Telefonie-Stack.
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-signal"
|
||||
variant="ghost"
|
||||
:loading="statusLoading"
|
||||
@click="refreshStatus"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-3">
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon :name="statusIcon" :class="status?.reachable ? 'text-green-600' : 'text-amber-600'" />
|
||||
<span class="text-sm font-medium text-gray-700">Status</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ status?.reachable ? "Erreichbar" : (status?.enabled ? "Nicht erreichbar" : "Deaktiviert") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-server-stack" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Provider</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ config?.provider || "asterisk" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-phone-arrow-up-right" class="text-gray-500" />
|
||||
<span class="text-sm font-medium text-gray-700">Echo-Test</span>
|
||||
</div>
|
||||
<p class="mt-3 text-lg font-semibold text-gray-950">
|
||||
{{ config?.echoExtension || "600" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UAlert
|
||||
class="mt-4"
|
||||
:color="statusColor"
|
||||
:icon="statusIcon"
|
||||
:title="status?.message || 'Telefonie wird geladen'"
|
||||
:description="status?.statusUrl || 'Noch keine Status-URL geladen.'"
|
||||
/>
|
||||
|
||||
<div v-if="status?.attempts?.length" class="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<p class="text-xs font-medium uppercase tracking-wide text-gray-500">
|
||||
Geprüfte Status-Ziele
|
||||
</p>
|
||||
<div class="mt-2 grid gap-2">
|
||||
<div
|
||||
v-for="attempt in status.attempts"
|
||||
:key="attempt.url"
|
||||
class="flex items-center justify-between gap-3 text-sm"
|
||||
>
|
||||
<span class="break-all font-mono text-gray-700">{{ attempt.url }}</span>
|
||||
<UBadge :color="attempt.reachable ? 'success' : 'neutral'" variant="soft">
|
||||
{{ attempt.reachable ? `HTTP ${attempt.statusCode}` : "offline" }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Lokalen Stack starten
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Asterisk läuft getrennt vom normalen Stack im Compose-Profil.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="rounded-lg bg-gray-950 p-4 font-mono text-sm text-gray-100">
|
||||
docker compose --profile telephony-dev up -d asterisk-dev
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 text-sm text-gray-600">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span>SIP-Domain</span>
|
||||
<span class="font-mono text-gray-950">{{ config?.sipDomain || "localhost" }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<span>WebSocket</span>
|
||||
<span class="break-all text-right font-mono text-gray-950">{{ config?.sipWebSocketUrl || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 lg:grid-cols-[0.9fr_1.1fr]">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Browser-Test
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Prüft, ob FEDEO den SIP-WebSocket im Browser öffnen kann.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<UButton
|
||||
icon="i-heroicons-bolt"
|
||||
:loading="websocketTesting"
|
||||
:disabled="!config?.sipWebSocketUrl"
|
||||
@click="testWebSocket"
|
||||
>
|
||||
WebSocket prüfen
|
||||
</UButton>
|
||||
|
||||
<UAlert
|
||||
v-if="websocketResult"
|
||||
:color="websocketColor"
|
||||
:icon="websocketResult.ok ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
|
||||
:title="websocketResult.message"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-gray-950">
|
||||
Test-Nebenstellen
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Für den ersten lokalen Call-Test zwischen zwei Browser-Sessions.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div
|
||||
v-for="account in config?.testAccounts || []"
|
||||
:key="account.extension"
|
||||
class="rounded-lg border border-gray-200 bg-white p-4"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-user-circle" class="text-primary-600" />
|
||||
<h3 class="font-semibold text-gray-950">
|
||||
{{ account.displayName }}
|
||||
</h3>
|
||||
</div>
|
||||
<dl class="mt-4 grid gap-2 text-sm">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<dt class="text-gray-500">Nebenstelle</dt>
|
||||
<dd class="font-mono text-gray-950">{{ account.extension }}</dd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<dt class="text-gray-500">Passwort</dt>
|
||||
<dd class="font-mono text-gray-950">{{ account.password }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<p v-if="lastUpdated" class="text-xs text-gray-500">
|
||||
Zuletzt geprüft: {{ lastUpdated.toLocaleString("de-DE") }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user