From d780fd962f55f259852e7925b17a982dff2e0d32 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 30 Dec 2025 02:40:51 -0600
Subject: [PATCH] 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
---
 nuxt4/app/app.vue                             |   3 +
 nuxt4/app/components/streams/StreamPlayer.vue |  98 +++++++++++
 nuxt4/app/components/streams/StreamViewer.vue | 139 +++++++++++++++
 nuxt4/app/composables/useStreams.ts           | 166 ++++++++++++++++++
 4 files changed, 406 insertions(+)
 create mode 100644 nuxt4/app/components/streams/StreamPlayer.vue
 create mode 100644 nuxt4/app/components/streams/StreamViewer.vue
 create mode 100644 nuxt4/app/composables/useStreams.ts

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index 526b86f..d3ae095 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -84,6 +84,9 @@
             </div>
           </UCard>
 
+          <!-- Visor de Streams -->
+          <StreamsStreamViewer />
+
           <!-- Resultado de transcripción -->
           <UCard v-if="transcription || error">
             <template #header>
diff --git a/nuxt4/app/components/streams/StreamPlayer.vue b/nuxt4/app/components/streams/StreamPlayer.vue
new file mode 100644
index 0000000..bfba601
--- /dev/null
+++ b/nuxt4/app/components/streams/StreamPlayer.vue
@@ -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>
diff --git a/nuxt4/app/components/streams/StreamViewer.vue b/nuxt4/app/components/streams/StreamViewer.vue
new file mode 100644
index 0000000..e5ea396
--- /dev/null
+++ b/nuxt4/app/components/streams/StreamViewer.vue
@@ -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>
diff --git a/nuxt4/app/composables/useStreams.ts b/nuxt4/app/composables/useStreams.ts
new file mode 100644
index 0000000..1f818f2
--- /dev/null
+++ b/nuxt4/app/composables/useStreams.ts
@@ -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
+  }
+}