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:
@@ -84,6 +84,9 @@
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Visor de Streams -->
|
||||
<StreamsStreamViewer />
|
||||
|
||||
<!-- Resultado de transcripción -->
|
||||
<UCard v-if="transcription || error">
|
||||
<template #header>
|
||||
|
||||
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>
|
||||
166
nuxt4/app/composables/useStreams.ts
Normal file
166
nuxt4/app/composables/useStreams.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* Composable para gestionar streams de video desde go2rtc
|
||||
* API: https://streams.nucleoriofrio.com/api/streams
|
||||
*/
|
||||
|
||||
export type StreamType = 'webrtc' | 'mse' | 'mp4' | 'hls' | 'mjpeg'
|
||||
|
||||
export interface StreamTypeOption {
|
||||
label: string
|
||||
value: StreamType
|
||||
description: string
|
||||
useIframe: boolean
|
||||
}
|
||||
|
||||
export const STREAM_TYPES: StreamTypeOption[] = [
|
||||
{
|
||||
label: 'WebRTC',
|
||||
value: 'webrtc',
|
||||
description: 'Menor latencia',
|
||||
useIframe: true
|
||||
},
|
||||
{
|
||||
label: 'MSE',
|
||||
value: 'mse',
|
||||
description: 'Media Source Extensions',
|
||||
useIframe: true
|
||||
},
|
||||
{
|
||||
label: 'MP4',
|
||||
value: 'mp4',
|
||||
description: 'Streaming MP4',
|
||||
useIframe: false
|
||||
},
|
||||
{
|
||||
label: 'HLS',
|
||||
value: 'hls',
|
||||
description: 'HTTP Live Streaming',
|
||||
useIframe: false
|
||||
},
|
||||
{
|
||||
label: 'MJPEG',
|
||||
value: 'mjpeg',
|
||||
description: 'Motion JPEG',
|
||||
useIframe: false
|
||||
}
|
||||
]
|
||||
|
||||
export const useStreams = () => {
|
||||
const BASE_URL = 'https://streams.nucleoriofrio.com'
|
||||
|
||||
// Estado reactivo
|
||||
const streams = useState<string[]>('streams_list', () => [])
|
||||
const selectedStream = useState<string | null>('streams_selected', () => null)
|
||||
const selectedType = useState<StreamType>('streams_type', () => 'mse')
|
||||
const isLoading = useState<boolean>('streams_loading', () => false)
|
||||
const error = useState<string | null>('streams_error', () => null)
|
||||
|
||||
/**
|
||||
* Obtiene la lista de streams disponibles desde la API
|
||||
*/
|
||||
const fetchStreams = async (): Promise<void> => {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await $fetch<Record<string, unknown>>(`${BASE_URL}/api/streams`, {
|
||||
credentials: 'include'
|
||||
})
|
||||
|
||||
// Extraer nombres de streams del objeto
|
||||
streams.value = Object.keys(response).sort()
|
||||
|
||||
// Seleccionar el primero si no hay ninguno seleccionado
|
||||
if (streams.value.length > 0 && !selectedStream.value) {
|
||||
selectedStream.value = streams.value[0]
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
const errorMessage = (err as Error)?.message || 'Error al cargar streams'
|
||||
error.value = errorMessage
|
||||
console.error('[Streams] Error fetching streams:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Genera la URL del stream segun el tipo seleccionado
|
||||
*/
|
||||
const getStreamUrl = computed((): string | null => {
|
||||
if (!selectedStream.value) return null
|
||||
|
||||
const streamName = encodeURIComponent(selectedStream.value)
|
||||
|
||||
switch (selectedType.value) {
|
||||
case 'webrtc':
|
||||
return `${BASE_URL}/stream.html?src=${streamName}`
|
||||
case 'mse':
|
||||
return `${BASE_URL}/stream.html?src=${streamName}&mode=mse`
|
||||
case 'mp4':
|
||||
return `${BASE_URL}/api/stream.mp4?src=${streamName}`
|
||||
case 'hls':
|
||||
return `${BASE_URL}/api/stream.m3u8?src=${streamName}`
|
||||
case 'mjpeg':
|
||||
return `${BASE_URL}/api/stream.mjpeg?src=${streamName}`
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* Determina si se debe usar iframe o video nativo
|
||||
*/
|
||||
const useIframe = computed((): boolean => {
|
||||
const typeConfig = STREAM_TYPES.find(t => t.value === selectedType.value)
|
||||
return typeConfig?.useIframe ?? true
|
||||
})
|
||||
|
||||
/**
|
||||
* Obtiene las opciones para el dropdown de tipos
|
||||
*/
|
||||
const streamTypeOptions = computed(() => {
|
||||
return STREAM_TYPES.map(type => ({
|
||||
label: type.label,
|
||||
value: type.value
|
||||
}))
|
||||
})
|
||||
|
||||
/**
|
||||
* Obtiene las opciones para el dropdown de streams
|
||||
*/
|
||||
const streamOptions = computed(() => {
|
||||
return streams.value.map(name => ({
|
||||
label: name.replace(/_/g, ' '),
|
||||
value: name
|
||||
}))
|
||||
})
|
||||
|
||||
/**
|
||||
* Limpia el error
|
||||
*/
|
||||
const clearError = () => {
|
||||
error.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
// Estado
|
||||
streams: readonly(streams),
|
||||
selectedStream,
|
||||
selectedType,
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error),
|
||||
|
||||
// Computed
|
||||
getStreamUrl,
|
||||
useIframe,
|
||||
streamTypeOptions,
|
||||
streamOptions,
|
||||
|
||||
// Metodos
|
||||
fetchStreams,
|
||||
clearError,
|
||||
|
||||
// Constantes
|
||||
STREAM_TYPES
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user