Corregir parametro has_clip: usar 1 en vez de true

Agregar proxy para clips y snapshots de Frigate
- Crear /api/frigate/events/:eventId/clip con soporte de range requests - Crear /api/frigate/events/:eventId/snapshot - Usar IP interna 192.168.87.29:5000 para evitar autenticacion Authentik - Actualizar URLs en useFrigateEvents para usar proxies internos
2025-12-30 04:11:02 -06:00 · 2025-12-30 04:05:05 -06:00 · 2025-12-30 04:02:36 -06:00 · 2025-12-30 03:53:47 -06:00 · 2025-12-30 03:50:07 -06:00 · 2025-12-30 03:18:52 -06:00
10 changed files with 1344 additions and 0 deletions
--- 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>
--- a/nuxt4/app/components/streams/StreamPlayer.vue
+++ 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>
--- a/nuxt4/app/components/streams/StreamViewer.vue
+++ b/nuxt4/app/components/streams/StreamViewer.vue
@@ -0,0 +1,514 @@
+<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"
+        />
+      </div>
+    </template>
+
+    <!-- Error State -->
+    <div
+      v-if="error || eventError"
+      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 || eventError }}</span>
+        <UButton
+          size="xs"
+          color="error"
+          variant="soft"
+          @click="handleClearError"
+        >
+          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"
+          :disabled="viewMode === 'event'"
+        />
+      </div>
+    </div>
+
+    <!-- Toggle Live/Eventos -->
+    <div v-if="selectedStream" class="mb-4">
+      <div class="flex items-center gap-2 mb-2">
+        <UButton
+          :color="viewMode === 'live' ? 'primary' : 'neutral'"
+          :variant="viewMode === 'live' ? 'solid' : 'ghost'"
+          size="sm"
+          icon="i-heroicons-signal"
+          @click="viewMode = 'live'; selectedEventId = null"
+        >
+          En Vivo
+        </UButton>
+        <UButton
+          :color="viewMode === 'event' ? 'primary' : 'neutral'"
+          :variant="viewMode === 'event' ? 'solid' : 'ghost'"
+          size="sm"
+          icon="i-heroicons-film"
+          :loading="isLoadingEvents"
+          @click="viewMode = 'event'"
+        >
+          Eventos ({{ events.length }})
+        </UButton>
+      </div>
+
+      <!-- Selector de Eventos -->
+      <div v-if="viewMode === 'event'" class="mt-2">
+        <USelect
+          v-model="selectedEventId"
+          :items="eventOptions"
+          placeholder="Seleccionar evento..."
+          :loading="isLoadingEvents"
+          :disabled="events.length === 0"
+          value-key="value"
+          class="w-full"
+        />
+        <p v-if="events.length === 0 && !isLoadingEvents" class="text-sm text-gray-500 mt-1">
+          No hay eventos recientes para esta camara
+        </p>
+      </div>
+    </div>
+
+    <!-- Banner de conexión -->
+    <div
+      v-if="!isStreamSessionActive"
+      class="mb-4 p-4 bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-200 dark:border-blue-800 rounded-lg"
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="p-2 bg-blue-500/20 rounded-full">
+            <UIcon name="i-heroicons-lock-closed" class="w-5 h-5 text-blue-500" />
+          </div>
+          <div>
+            <p class="font-medium text-gray-800 dark:text-gray-200">Conexion requerida</p>
+            <p class="text-sm text-gray-500">Inicia sesion en Streams para ver el video</p>
+          </div>
+        </div>
+        <UButton
+          icon="i-heroicons-arrow-top-right-on-square"
+          color="primary"
+          :loading="isConnecting"
+          @click="connectToStreams"
+        >
+          Iniciar Sesion
+        </UButton>
+      </div>
+    </div>
+
+    <!-- Reproductor (solo si hay sesión activa) -->
+    <template v-if="isStreamSessionActive">
+      <!-- Reproductor Live -->
+      <StreamsStreamPlayer
+        v-if="viewMode === 'live'"
+        :key="streamPlayerKey"
+        :stream-url="getStreamUrl"
+        :use-iframe="useIframe"
+        :stream-type="selectedType"
+        :is-loading="isLoading"
+        @error="handlePlayerError"
+      />
+
+      <!-- Reproductor de Evento -->
+      <div v-else-if="viewMode === 'event'" class="relative aspect-video bg-black rounded-lg overflow-hidden">
+        <video
+          v-if="selectedEventUrl"
+          :key="selectedEventId"
+          :src="selectedEventUrl"
+          controls
+          autoplay
+          class="w-full h-full object-contain"
+          @error="handlePlayerError('Error al cargar el clip del evento')"
+        />
+        <div
+          v-else
+          class="absolute inset-0 flex items-center justify-center text-gray-400"
+        >
+          <div class="text-center">
+            <UIcon name="i-heroicons-film" class="w-12 h-12 mb-2" />
+            <p>Selecciona un evento para reproducir</p>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Botones de Eventos -->
+    <div v-if="selectedStream" class="mt-4 flex items-center gap-2">
+      <UButton
+        icon="i-heroicons-bolt"
+        color="primary"
+        :loading="isCreatingEvent"
+        :disabled="!selectedStream"
+        @click="handleQuickEvent"
+      >
+        Evento Rapido
+      </UButton>
+      <UButton
+        icon="i-heroicons-cog-6-tooth"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        :disabled="!selectedStream"
+        @click="showEventModal = true"
+      />
+    </div>
+
+    <!-- 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>
+
+  <!-- Modal de Evento Personalizado -->
+  <UModal v-model:open="showEventModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-bolt" class="w-5 h-5 text-primary-500" />
+            <h3 class="text-lg font-semibold">Crear Evento</h3>
+          </div>
+        </template>
+
+        <div class="space-y-4">
+          <!-- Label -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Label *
+            </label>
+            <UInput
+              v-model="eventForm.label"
+              placeholder="Ej: person, car, eventoWhisper"
+            />
+          </div>
+
+          <!-- Sub Label -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Sub Label
+            </label>
+            <UInput
+              v-model="eventForm.sub_label"
+              placeholder="Etiqueta secundaria (opcional)"
+            />
+          </div>
+
+          <!-- Duration -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Duracion (segundos)
+            </label>
+            <UInput
+              v-model.number="eventForm.duration"
+              type="number"
+              min="1"
+              max="3600"
+              placeholder="60"
+            />
+          </div>
+
+          <!-- Include Recording -->
+          <div class="flex items-center gap-2">
+            <UCheckbox
+              v-model="eventForm.include_recording"
+              label="Incluir grabacion"
+            />
+          </div>
+
+          <!-- Camera Info -->
+          <div class="text-sm text-gray-500 bg-gray-50 dark:bg-gray-800 p-2 rounded">
+            <span class="font-medium">Camara:</span> {{ selectedStream?.replace(/_main$|_sub$/, '') }}
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showEventModal = false"
+            >
+              Cancelar
+            </UButton>
+            <UButton
+              color="primary"
+              :loading="isCreatingEvent"
+              :disabled="!eventForm.label"
+              @click="handleCustomEvent"
+            >
+              Crear Evento
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+const {
+  streams,
+  selectedStream,
+  selectedType,
+  isLoading,
+  error,
+  getStreamUrl,
+  useIframe,
+  streamTypeOptions,
+  streamOptions,
+  fetchStreams,
+  clearError,
+  STREAM_TYPES
+} = useStreams()
+
+const {
+  isCreating: isCreatingEvent,
+  isLoadingEvents,
+  error: eventError,
+  events,
+  fetchEvents,
+  getEventClipUrl,
+  getEventSnapshotUrl,
+  formatEventTime,
+  createEvent,
+  createQuickEvent,
+  clearError: clearEventError
+} = useFrigateEvents()
+
+const toast = useToast()
+
+// Modal state
+const showEventModal = ref(false)
+
+// View mode: 'live' or 'event'
+const viewMode = ref<'live' | 'event'>('live')
+const selectedEventId = ref<string | null>(null)
+
+// Estado de conexión a streams
+const isConnecting = ref(false)
+const isStreamSessionActive = ref(false)
+const streamPlayerKey = ref(0) // Para forzar refresh del player
+
+/**
+ * Abre popup para autenticarse en streams.nucleoriofrio.com
+ * El popup se cierra automáticamente después de cargar
+ */
+const connectToStreams = () => {
+  isConnecting.value = true
+
+  const popup = window.open(
+    'https://streams.nucleoriofrio.com/api',
+    'streams_auth',
+    'width=500,height=400,menubar=no,toolbar=no,location=no,status=no'
+  )
+
+  // Verificar cuando el popup carga y cerrarlo
+  const checkPopup = setInterval(() => {
+    try {
+      // Si el popup se cerró manualmente
+      if (!popup || popup.closed) {
+        clearInterval(checkPopup)
+        isConnecting.value = false
+        isStreamSessionActive.value = true
+        streamPlayerKey.value++ // Forzar refresh del player
+        toast.add({
+          title: 'Conectado',
+          description: 'Sesion de streams establecida',
+          icon: 'i-heroicons-check-circle',
+          color: 'success'
+        })
+        return
+      }
+
+      // Intentar acceder al contenido (solo funciona si ya autenticó)
+      if (popup.document && popup.document.body) {
+        // Cerrar después de 1 segundo para asegurar que la cookie se guardó
+        setTimeout(() => {
+          popup.close()
+          clearInterval(checkPopup)
+          isConnecting.value = false
+          isStreamSessionActive.value = true
+          streamPlayerKey.value++ // Forzar refresh del player
+          toast.add({
+            title: 'Conectado',
+            description: 'Sesion de streams establecida',
+            icon: 'i-heroicons-check-circle',
+            color: 'success'
+          })
+        }, 1000)
+      }
+    } catch {
+      // Error de CORS significa que está en Authentik (aún autenticando)
+    }
+  }, 500)
+
+  // Timeout máximo de 60 segundos
+  setTimeout(() => {
+    clearInterval(checkPopup)
+    isConnecting.value = false
+    if (popup && !popup.closed) {
+      popup.close()
+    }
+  }, 60000)
+}
+
+// Form state
+const eventForm = reactive({
+  label: 'eventoWhisper',
+  sub_label: '',
+  duration: 60,
+  include_recording: true
+})
+
+// Descripcion del tipo actual
+const currentTypeDescription = computed(() => {
+  const type = STREAM_TYPES.find(t => t.value === selectedType.value)
+  return type?.description || ''
+})
+
+// Opciones para el dropdown de eventos
+const eventOptions = computed(() => {
+  return events.value.map(e => ({
+    value: e.id,
+    label: `${formatEventTime(e.start_time)} - ${e.label}${e.sub_label ? ` (${e.sub_label})` : ''}`
+  }))
+})
+
+// URL del evento seleccionado
+const selectedEventUrl = computed(() => {
+  if (!selectedEventId.value) return null
+  return getEventClipUrl(selectedEventId.value)
+})
+
+// Cargar eventos cuando cambia la cámara
+watch(() => selectedStream.value, async (newStream) => {
+  if (newStream) {
+    await fetchEvents(newStream, 10)
+    // Reset event selection when camera changes
+    selectedEventId.value = null
+    viewMode.value = 'live'
+  }
+})
+
+// Cargar streams al montar el componente
+onMounted(() => {
+  fetchStreams()
+})
+
+const refreshStreams = () => {
+  fetchStreams()
+}
+
+const handleClearError = () => {
+  clearError()
+  clearEventError()
+}
+
+const handlePlayerError = (message: string) => {
+  toast.add({
+    title: 'Error de reproduccion',
+    description: message,
+    icon: 'i-heroicons-exclamation-circle',
+    color: 'error'
+  })
+}
+
+const handleQuickEvent = async () => {
+  if (!selectedStream.value) return
+
+  const result = await createQuickEvent(selectedStream.value)
+
+  if (result.success) {
+    toast.add({
+      title: 'Evento creado',
+      description: 'eventoWhisper (1 minuto)',
+      icon: 'i-heroicons-check-circle',
+      color: 'success'
+    })
+  } else {
+    toast.add({
+      title: 'Error',
+      description: result.message || 'No se pudo crear el evento',
+      icon: 'i-heroicons-x-circle',
+      color: 'error'
+    })
+  }
+}
+
+const handleCustomEvent = async () => {
+  if (!selectedStream.value || !eventForm.label) return
+
+  const result = await createEvent(selectedStream.value, {
+    label: eventForm.label,
+    sub_label: eventForm.sub_label || undefined,
+    duration: eventForm.duration || 60,
+    include_recording: eventForm.include_recording
+  })
+
+  if (result.success) {
+    toast.add({
+      title: 'Evento creado',
+      description: `${eventForm.label} (${eventForm.duration}s)`,
+      icon: 'i-heroicons-check-circle',
+      color: 'success'
+    })
+    showEventModal.value = false
+  } else {
+    toast.add({
+      title: 'Error',
+      description: result.message || 'No se pudo crear el evento',
+      icon: 'i-heroicons-x-circle',
+      color: 'error'
+    })
+  }
+}
+</script>
--- a/nuxt4/app/composables/useFrigateEvents.ts
+++ b/nuxt4/app/composables/useFrigateEvents.ts
@@ -0,0 +1,172 @@
+/**
+ * Composable para gestionar eventos de Frigate
+ * Usa proxy backend para evitar problemas de CORS/cookies entre subdominios
+ * API Proxy: /api/frigate/event, /api/frigate/events
+ */
+
+export interface FrigateEventParams {
+  label: string
+  sub_label?: string
+  duration?: number
+  include_recording?: boolean
+  draw?: {
+    boxes?: Array<{
+      box: [number, number, number, number]
+      color?: [number, number, number]
+      score?: number
+    }>
+  }
+}
+
+export interface FrigateEventResponse {
+  success: boolean
+  event_id?: string
+  message?: string
+}
+
+export interface FrigateEvent {
+  id: string
+  label: string
+  sub_label?: string
+  camera: string
+  start_time: number
+  end_time?: number
+  has_clip: boolean
+  has_snapshot: boolean
+  zones: string[]
+}
+
+export const useFrigateEvents = () => {
+  // Ya no usamos URL publica, todo va por proxy interno
+
+  const isCreating = useState<boolean>('frigate_creating', () => false)
+  const isLoadingEvents = useState<boolean>('frigate_loading_events', () => false)
+  const error = useState<string | null>('frigate_error', () => null)
+  const lastEventId = useState<string | null>('frigate_last_event', () => null)
+  const events = useState<FrigateEvent[]>('frigate_events', () => [])
+
+  /**
+   * Obtiene los eventos recientes de una camara
+   */
+  const fetchEvents = async (camera?: string, limit: number = 10): Promise<FrigateEvent[]> => {
+    isLoadingEvents.value = true
+    error.value = null
+
+    try {
+      const params = new URLSearchParams()
+      if (camera) {
+        params.set('camera', camera)
+      }
+      params.set('limit', limit.toString())
+
+      const response = await $fetch<FrigateEvent[]>(`/api/frigate/events?${params.toString()}`)
+
+      events.value = response
+      return response
+    } catch (err: unknown) {
+      const errorMessage = (err as Error)?.message || 'Error al obtener eventos'
+      error.value = errorMessage
+      console.error('[Frigate] Error fetching events:', err)
+      return []
+    } finally {
+      isLoadingEvents.value = false
+    }
+  }
+
+  /**
+   * Genera la URL del clip de un evento (via proxy interno)
+   */
+  const getEventClipUrl = (eventId: string): string => {
+    return `/api/frigate/events/${eventId}/clip`
+  }
+
+  /**
+   * Genera la URL del snapshot de un evento (via proxy interno)
+   */
+  const getEventSnapshotUrl = (eventId: string): string => {
+    return `/api/frigate/events/${eventId}/snapshot`
+  }
+
+  /**
+   * Formatea la fecha de un evento
+   */
+  const formatEventTime = (timestamp: number): string => {
+    const date = new Date(timestamp * 1000)
+    return date.toLocaleString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  /**
+   * Crea un evento en Frigate para una camara especifica via proxy
+   */
+  const createEvent = async (
+    camera: string,
+    params: FrigateEventParams
+  ): Promise<FrigateEventResponse> => {
+    isCreating.value = true
+    error.value = null
+
+    try {
+      const response = await $fetch<FrigateEventResponse>('/api/frigate/event', {
+        method: 'POST',
+        body: {
+          camera,
+          ...params
+        }
+      })
+
+      if (response.event_id) {
+        lastEventId.value = response.event_id
+      }
+
+      return { success: true, ...response }
+    } catch (err: unknown) {
+      const errorMessage = (err as Error)?.message || 'Error al crear evento'
+      error.value = errorMessage
+      console.error('[Frigate] Error creating event:', err)
+      return { success: false, message: errorMessage }
+    } finally {
+      isCreating.value = false
+    }
+  }
+
+  /**
+   * Crea un evento rapido "eventoWhisper" de 1 minuto
+   */
+  const createQuickEvent = async (camera: string): Promise<FrigateEventResponse> => {
+    return createEvent(camera, {
+      label: 'eventoWhisper',
+      duration: 60,
+      include_recording: true
+    })
+  }
+
+  /**
+   * Limpia el error
+   */
+  const clearError = () => {
+    error.value = null
+  }
+
+  return {
+    // Estado
+    isCreating: readonly(isCreating),
+    isLoadingEvents: readonly(isLoadingEvents),
+    error: readonly(error),
+    lastEventId: readonly(lastEventId),
+    events: readonly(events),
+
+    // Métodos
+    fetchEvents,
+    getEventClipUrl,
+    getEventSnapshotUrl,
+    formatEventTime,
+    createEvent,
+    createQuickEvent,
+    clearError
+  }
+}
--- a/nuxt4/app/composables/useStreams.ts
+++ b/nuxt4/app/composables/useStreams.ts
@@ -0,0 +1,167 @@
+/**
+ * Composable para gestionar streams de video desde go2rtc
+ * Usa proxy backend para evitar problemas de CORS/cookies entre subdominios
+ * API Proxy: /api/streams/list
+ * Streaming: https://streams.nucleoriofrio.com (iframe con sesion propia)
+ */
+
+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 via proxy backend
+   */
+  const fetchStreams = async (): Promise<void> => {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      // Usar proxy backend para evitar CORS/cookies issues
+      const response = await $fetch<Record<string, unknown>>('/api/streams/list')
+
+      // 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
+  }
+}
--- a/nuxt4/server/api/frigate/event.post.ts
+++ b/nuxt4/server/api/frigate/event.post.ts
@@ -0,0 +1,102 @@
+/**
+ * Proxy endpoint para crear eventos en Frigate
+ * POST /api/frigate/event
+ * Body: { camera: string, label: string, sub_label?: string, duration?: number, include_recording?: boolean }
+ * Usa URL interna del servidor Frigate
+ */
+
+interface EventRequestBody {
+  camera: string
+  label: string
+  sub_label?: string
+  duration?: number
+  include_recording?: boolean
+}
+
+export default defineEventHandler(async (event) => {
+  // Verificar autenticación via headers de Authentik
+  const headers = getRequestHeaders(event)
+  const username = headers['x-authentik-username']
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'No autenticado'
+    })
+  }
+
+  // Leer body
+  const body = await readBody<EventRequestBody>(event)
+
+  if (!body.camera || !body.label) {
+    throw createError({
+      statusCode: 400,
+      message: 'Se requiere camera y label'
+    })
+  }
+
+  // Extraer nombre base de la cámara (sin _main o _sub)
+  const cameraName = body.camera.replace(/_main$|_sub$/, '')
+
+  // Preparar payload para Frigate
+  const frigatePayload: Record<string, unknown> = {}
+
+  if (body.sub_label) {
+    frigatePayload.sub_label = body.sub_label
+  }
+
+  if (body.duration) {
+    frigatePayload.duration = body.duration
+  }
+
+  if (body.include_recording !== undefined) {
+    frigatePayload.include_recording = body.include_recording
+  }
+
+  // URL interna de Frigate (sin pasar por Traefik/Authentik)
+  const FRIGATE_URL = process.env.FRIGATE_URL || 'http://192.168.87.29:5000'
+
+  try {
+    // API: POST /api/events/:camera_name/:label/create
+    const response = await fetch(
+      `${FRIGATE_URL}/api/events/${cameraName}/${body.label}/create`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify(frigatePayload)
+      }
+    )
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error('[Frigate Proxy] Error response:', errorText)
+      throw createError({
+        statusCode: response.status,
+        message: `Error al crear evento: ${response.statusText}`
+      })
+    }
+
+    const data = await response.json()
+
+    console.log(`[Frigate Proxy] Evento creado por ${username}: ${body.label} en ${cameraName}`)
+
+    return {
+      success: true,
+      ...data
+    }
+  } catch (error: unknown) {
+    console.error('[Frigate Proxy] Error:', error)
+
+    if ((error as any).statusCode) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 500,
+      message: (error as Error)?.message || 'Error al crear evento'
+    })
+  }
+})
--- a/nuxt4/server/api/frigate/events.get.ts
+++ b/nuxt4/server/api/frigate/events.get.ts
@@ -0,0 +1,68 @@
+/**
+ * Proxy endpoint para obtener eventos de Frigate
+ * GET /api/frigate/events?camera=X&limit=10
+ */
+
+export default defineEventHandler(async (event) => {
+  // Verificar autenticación via headers de Authentik
+  const headers = getRequestHeaders(event)
+  const username = headers['x-authentik-username']
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'No autenticado'
+    })
+  }
+
+  // Leer query params
+  const query = getQuery(event)
+  const camera = query.camera as string | undefined
+  const limit = query.limit ? parseInt(query.limit as string) : 10
+
+  // URL interna de Frigate
+  const FRIGATE_URL = process.env.FRIGATE_URL || 'http://192.168.87.29:5000'
+
+  // Construir URL con filtros
+  const params = new URLSearchParams()
+  if (camera) {
+    // Extraer nombre base de la cámara (sin _main o _sub)
+    params.set('camera', camera.replace(/_main$|_sub$/, ''))
+  }
+  params.set('limit', limit.toString())
+  params.set('has_clip', '1') // Solo eventos con clip (1 = true)
+
+  try {
+    const response = await fetch(
+      `${FRIGATE_URL}/api/events?${params.toString()}`,
+      {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json'
+        }
+      }
+    )
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        message: `Error al obtener eventos: ${response.statusText}`
+      })
+    }
+
+    const events = await response.json()
+
+    return events
+  } catch (error: unknown) {
+    console.error('[Frigate Events] Error:', error)
+
+    if ((error as any).statusCode) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 500,
+      message: (error as Error)?.message || 'Error al obtener eventos'
+    })
+  }
+})
--- a/nuxt4/server/api/frigate/events/[eventId]/clip.get.ts
+++ b/nuxt4/server/api/frigate/events/[eventId]/clip.get.ts
@@ -0,0 +1,95 @@
+/**
+ * Proxy endpoint para obtener clips de eventos de Frigate
+ * GET /api/frigate/events/:eventId/clip
+ * Soporta range requests para seeking en video
+ */
+
+export default defineEventHandler(async (event) => {
+  // Verificar autenticación via headers de Authentik
+  const headers = getRequestHeaders(event)
+  const username = headers['x-authentik-username']
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'No autenticado'
+    })
+  }
+
+  const eventId = getRouterParam(event, 'eventId')
+
+  if (!eventId) {
+    throw createError({
+      statusCode: 400,
+      message: 'Se requiere eventId'
+    })
+  }
+
+  // URL interna de Frigate
+  const FRIGATE_URL = process.env.FRIGATE_URL || 'http://192.168.87.29:5000'
+
+  try {
+    // Pasar headers de range si existen (para seeking)
+    const requestHeaders: Record<string, string> = {
+      'Accept': 'video/mp4'
+    }
+
+    const rangeHeader = headers['range']
+    if (rangeHeader) {
+      requestHeaders['Range'] = rangeHeader
+    }
+
+    const response = await fetch(
+      `${FRIGATE_URL}/api/events/${eventId}/clip.mp4`,
+      {
+        method: 'GET',
+        headers: requestHeaders
+      }
+    )
+
+    if (!response.ok && response.status !== 206) {
+      throw createError({
+        statusCode: response.status,
+        message: `Error al obtener clip: ${response.statusText}`
+      })
+    }
+
+    // Configurar headers de respuesta
+    const responseHeaders: Record<string, string> = {
+      'Content-Type': 'video/mp4',
+      'Accept-Ranges': 'bytes'
+    }
+
+    const contentLength = response.headers.get('content-length')
+    if (contentLength) {
+      responseHeaders['Content-Length'] = contentLength
+    }
+
+    const contentRange = response.headers.get('content-range')
+    if (contentRange) {
+      responseHeaders['Content-Range'] = contentRange
+    }
+
+    // Establecer headers
+    for (const [key, value] of Object.entries(responseHeaders)) {
+      setResponseHeader(event, key, value)
+    }
+
+    // Establecer status code (200 o 206 para partial content)
+    setResponseStatus(event, response.status)
+
+    // Retornar el stream del video
+    return response.body
+  } catch (error: unknown) {
+    console.error('[Frigate Clip Proxy] Error:', error)
+
+    if ((error as any).statusCode) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 500,
+      message: (error as Error)?.message || 'Error al obtener clip'
+    })
+  }
+})
--- a/nuxt4/server/api/frigate/events/[eventId]/snapshot.get.ts
+++ b/nuxt4/server/api/frigate/events/[eventId]/snapshot.get.ts
@@ -0,0 +1,73 @@
+/**
+ * Proxy endpoint para obtener snapshots de eventos de Frigate
+ * GET /api/frigate/events/:eventId/snapshot
+ */
+
+export default defineEventHandler(async (event) => {
+  // Verificar autenticación via headers de Authentik
+  const headers = getRequestHeaders(event)
+  const username = headers['x-authentik-username']
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'No autenticado'
+    })
+  }
+
+  const eventId = getRouterParam(event, 'eventId')
+
+  if (!eventId) {
+    throw createError({
+      statusCode: 400,
+      message: 'Se requiere eventId'
+    })
+  }
+
+  // URL interna de Frigate
+  const FRIGATE_URL = process.env.FRIGATE_URL || 'http://192.168.87.29:5000'
+
+  try {
+    const response = await fetch(
+      `${FRIGATE_URL}/api/events/${eventId}/snapshot.jpg`,
+      {
+        method: 'GET',
+        headers: {
+          'Accept': 'image/jpeg'
+        }
+      }
+    )
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        message: `Error al obtener snapshot: ${response.statusText}`
+      })
+    }
+
+    // Configurar headers de respuesta
+    setResponseHeader(event, 'Content-Type', 'image/jpeg')
+
+    const contentLength = response.headers.get('content-length')
+    if (contentLength) {
+      setResponseHeader(event, 'Content-Length', contentLength)
+    }
+
+    // Cache por 5 minutos (los snapshots no cambian)
+    setResponseHeader(event, 'Cache-Control', 'public, max-age=300')
+
+    // Retornar el stream de la imagen
+    return response.body
+  } catch (error: unknown) {
+    console.error('[Frigate Snapshot Proxy] Error:', error)
+
+    if ((error as any).statusCode) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 500,
+      message: (error as Error)?.message || 'Error al obtener snapshot'
+    })
+  }
+})
--- a/nuxt4/server/api/streams/list.get.ts
+++ b/nuxt4/server/api/streams/list.get.ts
@@ -0,0 +1,52 @@
+/**
+ * Proxy endpoint para obtener la lista de streams de go2rtc
+ * Evita problemas de CORS/cookies entre subdominios
+ * Usa URL interna del servidor go2rtc
+ */
+
+export default defineEventHandler(async (event) => {
+  // Verificar autenticación via headers de Authentik
+  const headers = getRequestHeaders(event)
+  const username = headers['x-authentik-username']
+
+  if (!username) {
+    throw createError({
+      statusCode: 401,
+      message: 'No autenticado'
+    })
+  }
+
+  // URL interna de go2rtc (sin pasar por Traefik/Authentik)
+  const GO2RTC_URL = process.env.GO2RTC_URL || 'http://192.168.87.29:1984'
+
+  try {
+    const response = await fetch(`${GO2RTC_URL}/api/streams`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json'
+      }
+    })
+
+    if (!response.ok) {
+      throw createError({
+        statusCode: response.status,
+        message: `Error al obtener streams: ${response.statusText}`
+      })
+    }
+
+    const data = await response.json()
+
+    return data
+  } catch (error: unknown) {
+    console.error('[Streams Proxy] Error:', error)
+
+    if ((error as any).statusCode) {
+      throw error
+    }
+
+    throw createError({
+      statusCode: 500,
+      message: (error as Error)?.message || 'Error al obtener streams'
+    })
+  }
+})
Author	SHA1	Message	Date
josedario87	600ef5c96b	Corregir parametro has_clip: usar 1 en vez de true All checks were successful build-and-deploy / build-and-deploy (push) Successful in 2m41s Details	2025-12-30 04:11:02 -06:00
josedario87	adce97f193	Agregar proxy para clips y snapshots de Frigate All checks were successful build-and-deploy / build-and-deploy (push) Successful in 1m1s Details - Crear /api/frigate/events/:eventId/clip con soporte de range requests - Crear /api/frigate/events/:eventId/snapshot - Usar IP interna 192.168.87.29:5000 para evitar autenticacion Authentik - Actualizar URLs en useFrigateEvents para usar proxies internos	2025-12-30 04:05:05 -06:00
josedario87	8e555b543d	Agregar dropdown de eventos Frigate y corregir endpoint de creacion All checks were successful build-and-deploy / build-and-deploy (push) Successful in 59s Details - Agregar toggle Live/Eventos en StreamViewer - Agregar dropdown para seleccionar eventos recientes (max 10) - Reproducir clips de eventos en el mismo reproductor - Crear endpoint proxy /api/frigate/events para listar eventos - Corregir URL de creacion de eventos: /api/events/:camera/:label/create - Actualizar useFrigateEvents con fetchEvents, formatEventTime, getEventClipUrl	2025-12-30 04:02:36 -06:00
josedario87	6ddd339c3d	Ocultar reproductor hasta tener sesion y refrescar al conectar All checks were successful build-and-deploy / build-and-deploy (push) Successful in 1m1s Details - El reproductor solo se muestra si hay sesion activa - Al conectarse exitosamente, el player se refresca automaticamente - Evita mostrar iframe roto mientras no hay autorizacion	2025-12-30 03:53:47 -06:00
josedario87	9140272940	Agregar banner de conexion a streams con estilo profesional All checks were successful build-and-deploy / build-and-deploy (push) Successful in 1m0s Details - Banner con gradiente que indica cuando se requiere conexion - Boton "Iniciar Sesion" abre popup para autenticarse en streams - El popup se cierra automaticamente despues de autenticar - El banner desaparece una vez conectado	2025-12-30 03:50:07 -06:00
josedario87	9608d00484	Usar URLs internas para go2rtc y Frigate All checks were successful build-and-deploy / build-and-deploy (push) Successful in 1m1s Details - go2rtc: http://192.168.87.29:1984 (configurable via GO2RTC_URL) - Frigate: http://192.168.87.29:5000 (configurable via FRIGATE_URL) - Evita problemas de DNS/red desde el contenedor	2025-12-30 03:18:52 -06:00
josedario87	8cc88c3dc4	Agregar endpoints proxy para evitar CORS entre subdominios All checks were successful build-and-deploy / build-and-deploy (push) Successful in 1m5s Details - /api/streams/list: proxy a streams.nucleoriofrio.com/api/streams - /api/frigate/event: proxy a camaras.nucleoriofrio.com/api/events - Actualizar composables para usar los proxies del backend - Los iframes de streaming siguen usando URLs directas (sesion propia)	2025-12-30 03:14:00 -06:00
josedario87	9e7e06d477	Agregar botones de eventos Frigate al visor de streams All checks were successful build-and-deploy / build-and-deploy (push) Successful in 2m46s Details - Nuevo composable useFrigateEvents.ts para crear eventos en Frigate - Boton "Evento Rapido" crea eventoWhisper de 1 minuto - Boton de configuracion abre modal con campos personalizables - Modal permite editar: label, sub_label, duration, include_recording - API: POST camaras.nucleoriofrio.com/api/events/{camera}/create	2025-12-30 02:42:58 -06:00
josedario87	d780fd962f	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	2025-12-30 02:40:51 -06:00