50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T119f,"use client"; import { useEffect, useRef } from "react"; import { MediaController, MediaControlBar, MediaVolumeRange, MediaPlayButton, MediaMuteButton, MediaFullscreenButton, } from "media-chrome/react"; import { ENV } from "@/lib/haAuth"; import { useWebRTC, type WebRTCConnection } from "@/lib/video-rtc"; import { StatusIndicator } from "@/components/ha-ui/ui/status-indicator"; import { RetryButton } from "@/components/ha-ui/ui/retry-button"; import type { EntityId } from "@/types/entity-types"; import { cn } from "@/lib/utils"; type AspectRatio = "1/1" | "4/3" | "16/9"; export interface CameraFeedProps { /** * HomeAssistant Entity Name, used to generate Websocket URL for go2rtc stream */ entity: EntityId; /** * Optional: Explicit WebSocket override URL (e.g. ws://localhost:5555/websocketVideo) */ wsURL?: string; /** * Optional: Proxy server to forward websocket requests over (e.g. ws://localhost:5555/proxy) * (Default: None) */ proxyURL?: string; /** * Optional: Disable video controls * (Default: False) */ disableControls?: boolean; /** * Optional: Aspect Ratio for component to follow, * Will Letterbox to meet ratio * (Default: 16/9) * */ aspectRatio?: AspectRatio; /** * Optional: Camera Source override * Will ignore entity, wsURL and proxyURl args. */ externalCameraSource?: WebRTCConnection; } export function Camera({ entity, wsURL, proxyURL, externalCameraSource, disableControls = false, aspectRatio = "16/9", }: CameraFeedProps) { const webRTC = useWebRTC({ wsSrc: wsURL || `ws://${ENV.HA_HOST}:11984/api/ws?src=${entity}`, proxy: proxyURL, media: "video,audio", enabled: !externalCameraSource, autoReconnect: true, retryDelay: 5000, maxReconnectAttempts: 5, }); // Use external source if provided, otherwise use hook's stream const mediaStream = externalCameraSource?.mediaStream || webRTC.mediaStream; const status = externalCameraSource ? externalCameraSource.status : webRTC.status; const error = externalCameraSource ? externalCameraSource.error : webRTC.error; const videoRef = useRef(null); // Attach stream to video element useEffect(() => { if (mediaStream && videoRef.current) { videoRef.current.srcObject = mediaStream; } else if (!mediaStream && videoRef.current) { videoRef.current.srcObject = null; } }, [mediaStream]); const aspectRatioMap: Record = { "1/1": "aspect-square", "16/9": "aspect-video", "4/3": "aspect-[4/3]", }; return ( {/* Video Element */}

); } 53:T41d,"use client"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; export interface StatusIndicatorProps { status: ConnectionStatus; error?: Error | null; } export type ConnectionStatus = "connecting" | "connected" | "disconnected" | "error"; export function StatusIndicator({ status, error }: StatusIndicatorProps) { const statusConfig = { connecting: { color: "bg-yellow-500", text: "Connecting..." }, connected: { color: "bg-green-500", text: "Connected" }, disconnected: { color: "bg-orange-500", text: "Disconnected" }, error: { color: "bg-red-500", text: error?.message || "Connection error" }, }; const config = statusConfig[status]; return (

{config.text}

); } 54:T21e5,import { useEffect, useRef, useState } from "react"; export type ConnectionStatus = "connecting" | "connected" | "disconnected" | "error"; export interface UseWebRTCOptions { /** * WebSocket URL for go2rtc stream (e.g. ws://localhost:5555/websocketVideo) */ wsSrc: string; /** * Optional Proxy server to forward websocket requests over (e.g. ws://localhost:5555/proxy) */ proxy?: string; /** * Media types to receive (default: "video,audio") * Supports: "video", "audio", "video,audio" */ media?: string; /** * Whether the connection should be active (default: true) */ enabled?: boolean; /** * Whether to automatically reconnect on disconnection (default: false) */ autoReconnect?: boolean; /** * Delay before retrying connection in ms (default: 5000) */ retryDelay?: number; /** * Maximum number of reconnect attempts (default: 5) */ maxReconnectAttempts?: number; } export interface WebRTCConnection { /** * Current connection status */ status: ConnectionStatus; /** * Last error that occurred, if any */ error: Error | null; /** * The MediaStream received from the remote peer * Can be attached directly to a video element via srcObject */ mediaStream: MediaStream | null; /** * Number of reconnect attempts made */ reconnectAttempts: number; /** * Function to manually trigger a reconnection attempt */ retry: () => void; } const DEFAULT_PEERCONNECTION_CONFIG: RTCConfiguration = { bundlePolicy: "max-bundle", iceServers: [{ urls: "stun:stun.cloudflare.com:3478" }, { urls: "stun:stun.l.google.com:19302" }], }; export function useWebRTC({ wsSrc, proxy, media = "video,audio", enabled = true, autoReconnect = false, retryDelay = 5000, maxReconnectAttempts = 5, }: UseWebRTCOptions): WebRTCConnection { const [status, setStatus] = useState(enabled ? "connecting" : "disconnected"); const [error, setError] = useState(null); const [mediaStream, setMediaStream] = useState(null); const [reconnectAttempts, setReconnectAttempts] = useState(0); // Refs to avoid stale closures const wsRef = useRef(null); const pcRef = useRef(null); const reconnectTimerRef = useRef(null); const isConnectingRef = useRef(false); const optionsRef = useRef({ enabled, autoReconnect, maxReconnectAttempts, retryDelay }); const mediaStreamRef = useRef(null); const reconnectAttemptsRef = useRef(0); // Update options ref when they change useEffect(() => { optionsRef.current = { enabled, autoReconnect, maxReconnectAttempts, retryDelay }; }, [enabled, autoReconnect, maxReconnectAttempts, retryDelay]); useEffect(() => { mediaStreamRef.current = mediaStream; }, [mediaStream]); useEffect(() => { reconnectAttemptsRef.current = reconnectAttempts; }, [reconnectAttempts]); const connect = async () => { const opts = optionsRef.current; if (!opts.enabled || isConnectingRef.current) return; isConnectingRef.current = true; try { // 1. Create RTCPeerConnection const pc = new RTCPeerConnection(DEFAULT_PEERCONNECTION_CONFIG); pcRef.current = pc; // 2. Add transceivers BEFORE offer if (media.includes("video")) pc.addTransceiver("video", { direction: "recvonly" }); if (media.includes("audio")) pc.addTransceiver("audio", { direction: "recvonly" }); // 3. Set up ICE candidate handler BEFORE WebSocket pc.onicecandidate = (ev) => { if (ev.candidate && wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send( JSON.stringify({ type: "webrtc/candidate", value: ev.candidate.candidate, }), ); } }; // 4. Handle tracks pc.ontrack = (ev) => { const stream = ev.streams[0] || new MediaStream([ev.track]); setMediaStream(stream); setStatus("connected"); setError(null); setReconnectAttempts(0); }; pc.onconnectionstatechange = () => { if ( pc.connectionState === "failed" || pc.connectionState === "disconnected" || pc.connectionState === "closed" ) { handleDisconnect("WebRTC connection failed"); } }; // 5. Create WebSocket AFTER PeerConnection is fully configured let wsUrl = wsSrc; if (proxy) wsUrl = `${proxy}?target=${encodeURIComponent(wsUrl)}`; const ws = new WebSocket(wsUrl); wsRef.current = ws; // 6. WebSocket event handlers ws.onopen = async () => { try { // Create and send offer const offer = await pc.createOffer(); await pc.setLocalDescription(offer); ws.send( JSON.stringify({ type: "webrtc/offer", value: offer.sdp, }), ); } catch (err) { handleError(err as Error); } }; ws.onmessage = async (ev) => { try { const msg = JSON.parse(ev.data); if (msg.type === "webrtc/answer") { await pc.setRemoteDescription({ type: "answer", sdp: msg.value }); } else if (msg.type === "webrtc/candidate") { await pc.addIceCandidate({ candidate: msg.value, sdpMid: "0" }); } } catch (err) { console.warn("[useWebRTC] Failed to parse message:", err); } }; ws.onclose = () => handleDisconnect("WebSocket closed"); ws.onerror = () => handleDisconnect("WebSocket error"); } catch (err) { handleError(err as Error); } finally { isConnectingRef.current = false; } }; const handleDisconnect = (reason: string) => { const opts = optionsRef.current; cleanup(); if (opts.autoReconnect && reconnectAttemptsRef.current < opts.maxReconnectAttempts) { setStatus("disconnected"); setError(new Error(reason)); reconnectTimerRef.current = window.setTimeout(() => { setReconnectAttempts((prev) => prev + 1); connect(); }, opts.retryDelay); } else { setStatus("error"); setError(new Error(reason)); } }; const handleError = (err: Error) => { console.error("[useWebRTC] Error:", err); cleanup(); setStatus("error"); setError(err); }; const cleanup = () => { if (wsRef.current) { try { wsRef.current.close(); } catch { // ignore } wsRef.current = null; } if (pcRef.current) { try { pcRef.current.close(); } catch { // ignore } pcRef.current = null; } if (reconnectTimerRef.current) { clearTimeout(reconnectTimerRef.current); reconnectTimerRef.current = null; } if (mediaStreamRef.current) { mediaStreamRef.current.getTracks().forEach((track) => track.stop()); setMediaStream(null); } }; const retry = () => { if (reconnectTimerRef.current) { clearTimeout(reconnectTimerRef.current); } setReconnectAttempts(0); setStatus("connecting"); setError(null); connect(); }; // Connect on mount and when enabled changes useEffect(() => { if (enabled) { connect(); } return () => { cleanup(); }; }, [enabled, wsSrc, proxy, media]); return { status, error, mediaStream, reconnectAttempts, retry, }; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","media-chrome",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/media-chrome","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"media-chrome"}]]}]}]]}],["$","$L50",null,{"namespace":"@ha-components","registryDependencies":["tooltip","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ha-ui/camera.tsx","content":"$52","type":"registry:component","target":"components/ha-ui/camera.tsx"},{"path":"components/ha-ui/ui/retry-button.tsx","content":"\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport type { ConnectionStatus } from \"./status-indicator\";\n\nexport interface RetryButtonProps {\n onRetry: () => void;\n status: ConnectionStatus;\n error?: Error | null;\n autoReconnect?: boolean;\n}\n\nexport function RetryButton({ onRetry, status, error, autoReconnect = false }: RetryButtonProps) {\n const showButton = status === \"error\" || (status === \"disconnected\" && !autoReconnect);\n\n if (!showButton) return null;\n\n return (\n

\n {status === \"error\" && error &&

{error.message}

}\n \n

\n );\n}\n","type":"registry:component","target":"components/ha-ui/ui/retry-button.tsx"},{"path":"components/ha-ui/ui/status-indicator.tsx","content":"$53","type":"registry:component","target":"components/ha-ui/ui/status-indicator.tsx"},{"path":"lib/video-rtc.tsx","content":"$54","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]