initial commit
This commit is contained in:
Madison Grubb
324
app/components/LiveSessionPanel.vue
Normal file
324
app/components/LiveSessionPanel.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<aside
|
||||
class="flex flex-col border border-kestrel-border bg-kestrel-surface"
|
||||
:class="inline ? 'rounded-lg shadow-glow' : 'absolute right-0 top-0 z-[1000] h-full w-full border-l shadow-glow md:w-[420px] [box-shadow:-8px_0_24px_-4px_rgba(34,201,201,0.12)]'"
|
||||
role="dialog"
|
||||
aria-label="Live feed"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-kestrel-border px-4 py-3 [box-shadow:0_1px_0_0_rgba(34,201,201,0.08)]">
|
||||
<h2 class="font-medium tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
|
||||
{{ session?.label ?? 'Live' }}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded p-1 text-kestrel-muted transition-colors hover:bg-kestrel-border hover:text-kestrel-accent"
|
||||
aria-label="Close panel"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<span class="text-xl leading-none">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col overflow-auto p-4">
|
||||
<p class="mb-3 text-xs text-kestrel-muted">
|
||||
Live camera feed (WebRTC)
|
||||
</p>
|
||||
<div class="relative aspect-video w-full overflow-hidden rounded border border-kestrel-border bg-black [box-shadow:inset_0_0_20px_-8px_rgba(34,201,201,0.1)]">
|
||||
<video
|
||||
ref="videoRef"
|
||||
autoplay
|
||||
playsinline
|
||||
class="h-full w-full object-contain"
|
||||
/>
|
||||
<div
|
||||
v-if="!hasStream && !error"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center gap-2 p-4 text-center text-xs uppercase tracking-wider text-kestrel-muted"
|
||||
>
|
||||
<span>Waiting for stream…</span>
|
||||
<span
|
||||
v-if="connectionState === 'connecting'"
|
||||
class="normal-case"
|
||||
>WebRTC: connecting…</span>
|
||||
<template v-if="connectionState === 'failed'">
|
||||
<span class="normal-case font-medium text-red-400">WebRTC: failed</span>
|
||||
<p
|
||||
v-if="failureReason?.wrongHost"
|
||||
class="normal-case text-left text-amber-400"
|
||||
>
|
||||
Wrong host: server sees <strong>{{ failureReason.wrongHost.serverHostname }}</strong> but you opened this page at <strong>{{ failureReason.wrongHost.clientHostname }}</strong>. Use the same URL or set MEDIASOUP_ANNOUNCED_IP.
|
||||
</p>
|
||||
<ul class="normal-case list-inside list-disc text-left text-kestrel-muted">
|
||||
<li><strong>Firewall:</strong> Open UDP/TCP 40000–49999 on the server.</li>
|
||||
<li><strong>Wrong host:</strong> Server must see the same address you use.</li>
|
||||
<li><strong>Restrictive NAT / cellular:</strong> TURN may be required.</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="error"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center gap-2 overflow-auto p-4 text-center text-xs uppercase tracking-wider text-red-400"
|
||||
>
|
||||
<span>Feed unavailable: {{ error }}</span>
|
||||
<template v-if="connectionState === 'failed' && failureReason">
|
||||
<p
|
||||
v-if="failureReason.wrongHost"
|
||||
class="normal-case text-left text-amber-400"
|
||||
>
|
||||
Wrong host: server sees <strong>{{ failureReason.wrongHost.serverHostname }}</strong> but you opened at <strong>{{ failureReason.wrongHost.clientHostname }}</strong>.
|
||||
</p>
|
||||
<ul class="normal-case list-inside list-disc text-left text-kestrel-muted">
|
||||
<li>Firewall: open ports 40000–49999.</li>
|
||||
<li>Wrong host: use same URL or set MEDIASOUP_ANNOUNCED_IP.</li>
|
||||
<li>Restrictive NAT: TURN may be required.</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { createMediasoupDevice, createRecvTransport, consumeProducer, waitForConnectionState } from '~/composables/useWebRTC.js'
|
||||
import { getWebRTCFailureReason } from '~/composables/useWebRTCFailureReason.js'
|
||||
import { initLogger, logError, logWarn } from '~/utils/logger.js'
|
||||
import { useUser } from '~/composables/useUser.js'
|
||||
|
||||
const { user } = useUser()
|
||||
|
||||
const props = defineProps({
|
||||
session: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
/** When true, render inline (e.g. on Cameras page) instead of overlay panel */
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
defineEmits(['close'])
|
||||
|
||||
const videoRef = ref(null)
|
||||
const hasStream = ref(false)
|
||||
const error = ref('')
|
||||
const connectionState = ref('') // '', 'connecting', 'connected', 'failed'
|
||||
const failureReason = ref(null) // { wrongHost: { serverHostname, clientHostname } | null }
|
||||
let device = null
|
||||
let recvTransport = null
|
||||
let consumer = null
|
||||
|
||||
async function runFailureReasonCheck() {
|
||||
failureReason.value = await getWebRTCFailureReason()
|
||||
}
|
||||
|
||||
async function setupWebRTC() {
|
||||
if (!props.session?.id || !props.session?.hasStream) {
|
||||
logWarn('LiveSessionPanel: Cannot setup WebRTC', {
|
||||
hasSession: !!props.session,
|
||||
sessionId: props.session?.id,
|
||||
hasStream: props.session?.hasStream,
|
||||
})
|
||||
error.value = 'No stream available'
|
||||
return
|
||||
}
|
||||
|
||||
// Initialize logger with session and user context
|
||||
initLogger(props.session.id, user.value?.id)
|
||||
|
||||
try {
|
||||
error.value = ''
|
||||
hasStream.value = false
|
||||
connectionState.value = 'connecting'
|
||||
failureReason.value = null
|
||||
|
||||
const rtpCapabilities = await $fetch(`/api/live/webrtc/router-rtp-capabilities?sessionId=${props.session.id}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
device = await createMediasoupDevice(rtpCapabilities)
|
||||
recvTransport = await createRecvTransport(device, props.session.id)
|
||||
|
||||
recvTransport.on('connectionstatechange', () => {
|
||||
const state = recvTransport.connectionState
|
||||
if (state === 'connected') connectionState.value = 'connected'
|
||||
else if (state === 'failed' || state === 'disconnected' || state === 'closed') {
|
||||
logWarn('LiveSessionPanel: Receive transport connection state changed', {
|
||||
state,
|
||||
transportId: recvTransport.id,
|
||||
sessionId: props.session.id,
|
||||
})
|
||||
if (state === 'failed') {
|
||||
connectionState.value = 'failed'
|
||||
runFailureReasonCheck()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const connectionPromise = waitForConnectionState(recvTransport, 10000)
|
||||
consumer = await consumeProducer(recvTransport, device, props.session.id)
|
||||
const finalConnectionState = await connectionPromise
|
||||
|
||||
if (finalConnectionState !== 'connected') {
|
||||
connectionState.value = 'failed'
|
||||
runFailureReasonCheck()
|
||||
logWarn('LiveSessionPanel: Transport not fully connected', {
|
||||
state: finalConnectionState,
|
||||
transportId: recvTransport.id,
|
||||
consumerId: consumer.id,
|
||||
})
|
||||
}
|
||||
else {
|
||||
connectionState.value = 'connected'
|
||||
}
|
||||
|
||||
// 4. Attach video track to video element
|
||||
// Wait for video ref to be available (nextTick ensures DOM is updated)
|
||||
await nextTick()
|
||||
|
||||
// Retry logic: wait for videoRef to become available
|
||||
let attempts = 0
|
||||
while (!videoRef.value && attempts < 10) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
attempts++
|
||||
}
|
||||
|
||||
if (!consumer.track) {
|
||||
logError('LiveSessionPanel: No video track available', {
|
||||
consumerId: consumer.id,
|
||||
consumerKind: consumer.kind,
|
||||
consumerPaused: consumer.paused,
|
||||
consumerClosed: consumer.closed,
|
||||
consumerProducerId: consumer.producerId,
|
||||
transportConnectionState: recvTransport?.connectionState,
|
||||
})
|
||||
error.value = 'No video track available - consumer may not be receiving data from producer'
|
||||
return
|
||||
}
|
||||
|
||||
if (!videoRef.value) {
|
||||
logError('LiveSessionPanel: Video ref not available', {
|
||||
consumerId: consumer.id,
|
||||
hasTrack: !!consumer.track,
|
||||
})
|
||||
error.value = 'Video element not available'
|
||||
return
|
||||
}
|
||||
|
||||
const stream = new MediaStream([consumer.track])
|
||||
videoRef.value.srcObject = stream
|
||||
hasStream.value = true
|
||||
|
||||
// Wait for video metadata to load (indicates video is actually receiving data)
|
||||
const metadataPromise = new Promise((resolve) => {
|
||||
if (videoRef.value.readyState >= 2) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
let resolved = false
|
||||
const handler = () => {
|
||||
if (resolved) return
|
||||
resolved = true
|
||||
videoRef.value.removeEventListener('loadedmetadata', handler)
|
||||
if (metadataTimeoutId) clearTimeout(metadataTimeoutId)
|
||||
resolve()
|
||||
}
|
||||
videoRef.value.addEventListener('loadedmetadata', handler)
|
||||
const metadataTimeoutId = setTimeout(() => {
|
||||
if (resolved) return
|
||||
resolved = true
|
||||
videoRef.value.removeEventListener('loadedmetadata', handler)
|
||||
logWarn('LiveSessionPanel: Video metadata timeout', { consumerId: consumer.id })
|
||||
resolve()
|
||||
}, 5000)
|
||||
})
|
||||
await metadataPromise
|
||||
|
||||
try {
|
||||
const playPromise = videoRef.value.play()
|
||||
if (playPromise !== undefined) await playPromise
|
||||
}
|
||||
catch (playErr) {
|
||||
logWarn('LiveSessionPanel: Video play() failed (may need user interaction)', {
|
||||
consumerId: consumer.id,
|
||||
error: playErr.message || String(playErr),
|
||||
errorName: playErr.name,
|
||||
videoPaused: videoRef.value.paused,
|
||||
videoReadyState: videoRef.value.readyState,
|
||||
})
|
||||
// Don't set error - video might still work, just needs user interaction
|
||||
}
|
||||
|
||||
consumer.track.addEventListener('ended', () => {
|
||||
error.value = 'Video track ended'
|
||||
hasStream.value = false
|
||||
})
|
||||
videoRef.value.addEventListener('error', () => {
|
||||
logError('LiveSessionPanel: Video element error', { consumerId: consumer.id })
|
||||
})
|
||||
}
|
||||
catch (err) {
|
||||
connectionState.value = 'failed'
|
||||
runFailureReasonCheck()
|
||||
logError('LiveSessionPanel: WebRTC setup error', {
|
||||
err: err.message || String(err),
|
||||
data: err.data,
|
||||
stack: err.stack,
|
||||
status: err.status,
|
||||
statusCode: err.statusCode,
|
||||
sessionId: props.session?.id,
|
||||
})
|
||||
const errorMsg = err.data?.message || err.message || err.toString() || 'Failed to connect to stream'
|
||||
error.value = errorMsg
|
||||
cleanup()
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
if (consumer) {
|
||||
consumer.close()
|
||||
consumer = null
|
||||
}
|
||||
if (recvTransport) {
|
||||
recvTransport.close()
|
||||
recvTransport = null
|
||||
}
|
||||
device = null
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = null
|
||||
}
|
||||
hasStream.value = false
|
||||
connectionState.value = ''
|
||||
failureReason.value = null
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.session?.id,
|
||||
(id) => {
|
||||
cleanup()
|
||||
if (id && props.session?.hasStream) {
|
||||
setupWebRTC()
|
||||
}
|
||||
else {
|
||||
error.value = id ? 'No stream available' : ''
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.session?.hasStream,
|
||||
(hasStream) => {
|
||||
if (hasStream && props.session?.id && !device) {
|
||||
setupWebRTC()
|
||||
}
|
||||
else if (!hasStream) {
|
||||
cleanup()
|
||||
error.value = 'Stream ended'
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user