Agregar reproductor de streams con seleccion de tipo
- Nuevo composable useStreams.ts para gestionar streams de go2rtc - Componente StreamPlayer.vue para reproduccion (iframe/video/img) - Componente StreamViewer.vue con dropdowns de seleccion - Integrado en app.vue despues del card de grabacion - Soporta WebRTC, MSE, MP4, HLS y MJPEG
This commit is contained in:
98
nuxt4/app/components/streams/StreamPlayer.vue
Normal file
98
nuxt4/app/components/streams/StreamPlayer.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="stream-player w-full">
|
||||
<!-- Loading State -->
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="flex items-center justify-center h-64 bg-gray-100 dark:bg-gray-800 rounded-lg"
|
||||
>
|
||||
<div class="text-center">
|
||||
<UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-green-500" />
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Cargando stream...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Stream Selected -->
|
||||
<div
|
||||
v-else-if="!streamUrl"
|
||||
class="flex items-center justify-center h-64 bg-gray-100 dark:bg-gray-800 rounded-lg"
|
||||
>
|
||||
<div class="text-center">
|
||||
<UIcon name="i-heroicons-video-camera-slash" class="w-12 h-12 text-gray-400" />
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">Selecciona un stream para visualizar</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Iframe Player (WebRTC/MSE) -->
|
||||
<iframe
|
||||
v-else-if="useIframe"
|
||||
:src="streamUrl"
|
||||
:key="streamUrl"
|
||||
class="w-full aspect-video rounded-lg border-0 bg-black"
|
||||
allow="autoplay; fullscreen"
|
||||
allowfullscreen
|
||||
@load="handleLoad"
|
||||
@error="handleError"
|
||||
/>
|
||||
|
||||
<!-- MJPEG usa img -->
|
||||
<img
|
||||
v-else-if="streamType === 'mjpeg'"
|
||||
:src="streamUrl"
|
||||
:key="streamUrl"
|
||||
class="w-full aspect-video rounded-lg object-contain bg-black"
|
||||
alt="Stream MJPEG"
|
||||
@load="handleLoad"
|
||||
@error="handleError"
|
||||
/>
|
||||
|
||||
<!-- Video nativo para MP4 y HLS -->
|
||||
<video
|
||||
v-else
|
||||
ref="videoRef"
|
||||
:src="streamUrl"
|
||||
:key="streamUrl"
|
||||
class="w-full aspect-video rounded-lg bg-black"
|
||||
controls
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
@loadeddata="handleLoad"
|
||||
@error="handleError"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { StreamType } from '~/composables/useStreams'
|
||||
|
||||
const props = defineProps<{
|
||||
streamUrl: string | null
|
||||
useIframe: boolean
|
||||
streamType: StreamType
|
||||
isLoading?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'loaded'): void
|
||||
(e: 'error', message: string): void
|
||||
}>()
|
||||
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
|
||||
const handleLoad = () => {
|
||||
emit('loaded')
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
emit('error', 'Error al cargar el stream')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stream-player iframe,
|
||||
.stream-player video,
|
||||
.stream-player img {
|
||||
min-height: 200px;
|
||||
max-height: 400px;
|
||||
}
|
||||
</style>
|
||||
139
nuxt4/app/components/streams/StreamViewer.vue
Normal file
139
nuxt4/app/components/streams/StreamViewer.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-video-camera" class="w-5 h-5 text-green-500" />
|
||||
<h3 class="text-lg font-semibold">Streams de Video</h3>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-path"
|
||||
size="sm"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
:loading="isLoading"
|
||||
@click="refreshStreams"
|
||||
>
|
||||
Actualizar
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error State -->
|
||||
<div
|
||||
v-if="error"
|
||||
class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
|
||||
>
|
||||
<div class="flex items-center gap-2 text-red-600 dark:text-red-400">
|
||||
<UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5" />
|
||||
<span>{{ error }}</span>
|
||||
<UButton
|
||||
size="xs"
|
||||
color="error"
|
||||
variant="soft"
|
||||
@click="clearError"
|
||||
>
|
||||
Cerrar
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selectores -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
|
||||
<!-- Selector de Stream -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Stream
|
||||
</label>
|
||||
<USelect
|
||||
v-model="selectedStream"
|
||||
:items="streamOptions"
|
||||
placeholder="Seleccionar stream..."
|
||||
:loading="isLoading"
|
||||
:disabled="streams.length === 0"
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Selector de Tipo -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Tipo de reproduccion
|
||||
</label>
|
||||
<USelect
|
||||
v-model="selectedType"
|
||||
:items="streamTypeOptions"
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reproductor -->
|
||||
<StreamsStreamPlayer
|
||||
:stream-url="getStreamUrl"
|
||||
:use-iframe="useIframe"
|
||||
:stream-type="selectedType"
|
||||
:is-loading="isLoading"
|
||||
@error="handlePlayerError"
|
||||
/>
|
||||
|
||||
<!-- Info del stream actual -->
|
||||
<template #footer v-if="selectedStream">
|
||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
||||
<span>
|
||||
<UIcon name="i-heroicons-signal" class="w-4 h-4 inline mr-1" />
|
||||
{{ selectedStream }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<UIcon name="i-heroicons-play-circle" class="w-4 h-4" />
|
||||
{{ currentTypeDescription }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const {
|
||||
streams,
|
||||
selectedStream,
|
||||
selectedType,
|
||||
isLoading,
|
||||
error,
|
||||
getStreamUrl,
|
||||
useIframe,
|
||||
streamTypeOptions,
|
||||
streamOptions,
|
||||
fetchStreams,
|
||||
clearError,
|
||||
STREAM_TYPES
|
||||
} = useStreams()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
// Descripcion del tipo actual
|
||||
const currentTypeDescription = computed(() => {
|
||||
const type = STREAM_TYPES.find(t => t.value === selectedType.value)
|
||||
return type?.description || ''
|
||||
})
|
||||
|
||||
// Cargar streams al montar el componente
|
||||
onMounted(() => {
|
||||
fetchStreams()
|
||||
})
|
||||
|
||||
const refreshStreams = () => {
|
||||
fetchStreams()
|
||||
}
|
||||
|
||||
const handlePlayerError = (message: string) => {
|
||||
toast.add({
|
||||
title: 'Error de reproduccion',
|
||||
description: message,
|
||||
icon: 'i-heroicons-exclamation-circle',
|
||||
color: 'error'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user