📌 Prezentarea aplicației „ESP32-CAM Viewer cu IP-uri Locale” Această aplicație web este o interfață creată pentru a vizualiza fluxul video (stream-ul) generat de un modul ESP32-CAM, atât din rețeaua locală, cât și din exterior (prin un domeniu DDNS, exemplu GO.RO). Pagina este proiectată astfel încât să ofere o navigare ușoară, feedback vizual clar și gestionare robustă a conexiunilor.
Interfața este simplă și modernă.
Pagina folosește o structură centrată, cu:
un titlu clar („ESP32-CAM Viewer”);
trei butoane mari de control:
Conectare Locală, Conectare Externă, Deconectare;
o zonă mare tip cadru pentru afișarea stream-ului video;
o listă de IP-uri locale detectabile, prezentate sub formă de butoane;
mesaje de status pentru informarea utilizatorului.
Elementele vizuale includ:
efecte de hover și animație,
spinner animat în timpul conectării,
mesaje de eroare animate (shake),
culori intuitive: albastru pentru conectare, verde pentru extern, roșu pentru deconectare.
Aplicația permite utilizatorului să se conecteze la camera ESP32 în trei moduri:
-
Conectare Locală Accesează dispozitivul pe IP-ul intern stabilit în rețea.
-
Conectare Externă (GO.RO) Folosește un domeniu DDNS, util când camera este accesată din afara rețelei.
-
Conectare la un IP local din listă Sunt afișate mai multe IP-uri prestabilite, utile dacă există mai multe camere în rețea.
-
Deconectare Oprește fluxul video și curăță complet zona video.
Gestionarea fluxului de imagini
Când utilizatorul selectează un IP:
aplicația resetează orice conexiune anterioară;
afișează un spinner animat în locul stream-ului;
încearcă să încarce un obiect cu sursa http://IP/stream.
Dacă imaginea se încarcă cu succes:
spinnerul dispare,
stream-ul este afișat în fereastră.
Dacă se produce o eroare:
conexiunea este anulată,
apare un mesaj roșu animat de eroare.
Codul folosește un sistem inteligent bazat pe connectionId:
Fiecare încercare de conectare primește un ID unic.
Dacă utilizatorul apasă apoi Alt buton într-un timp scurt,
vechile evenimente onload sau onerror sunt ignorate automat.
Astfel se evită situațiile în care o conexiune veche suprascrie o conexiune nouă.
Este o metodă elegantă de a preveni erorile și conflictele între conexiuni rapide consecutive.
Funcția disconnect():
resetează connectionId pentru a invalida orice apel vechi,
șterge sursa imaginii,
golește cadrul video,
actualizează vizual starea la „Deconectat”.
Funcția handleError():
apelează deconectarea,
afișează un mesaj clar de eroare,
schimbă culoarea statusului în roșu,
folosește o mică animație "shake" pentru a evidenția problema.
Codul creează automat butoane pentru fiecare IP local, oferind acces rapid la camere multiple din rețea.
Această pagină este o interfață completă și intuitivă pentru controlul și vizualizarea unui ESP32-CAM, oferind:
conectare rapidă,
feedback vizual profesionist,
siguranță la schimbarea conexiunilor,
listă de IP-uri multiple,
gestionarea corectă a erorilor.
Este o soluție practică, elegantă și eficientă pentru supraveghere video sau testarea modulelor ESP32-CAM în rețea.
📌 Presentation of the “ESP32-CAM Viewer with Local IPs” Web App
This web application provides an interface designed to view the video stream generated by an ESP32-CAM module — both from the local network and externally (via a DDNS domain such as GO.RO). The page is built to offer easy navigation, clear visual feedback, and robust connection handling.
The interface is simple and modern.
The page uses a centered layout with:
-
a clear title (“ESP32-CAM Viewer”)
-
three large control buttons:
- Local Connect, External Connect, Disconnect
-
a large frame area for displaying the video stream
-
a list of detectable local IPs displayed as buttons
-
status messages for user feedback
Visual elements include:
- hover effects and animations
- a loading spinner while connecting
- animated error messages (shake effect)
- intuitive colors: blue for local connect, green for external, red for disconnect
The application allows the user to connect to the ESP32-CAM camera in three ways:
Accesses the device via its internal IP address within the network.
Uses a DDNS domain, useful when accessing the camera from outside the network.
Displays several preset local IPs — useful when multiple cameras exist in the same network.
Stops the video stream and clears the display area.
When the user selects an IP:
- the app resets any previous connection
- shows an animated spinner instead of the stream
- attempts to load an
<img>object with the sourcehttp://IP/stream
If the image loads successfully:
- the spinner disappears
- the video stream becomes visible
If an error occurs:
- the connection is canceled
- a red animated error message is displayed
The code uses an intelligent system based on connectionId:
- Each connection attempt receives a unique ID.
- If the user quickly presses another button,
older
onloadoronerrorevents are automatically ignored.
This prevents situations where an old connection overrides a new one — an elegant solution to avoid conflicts during rapid connection switching.
The disconnect() function:
- resets
connectionIdto invalidate any old calls - clears the image source
- empties the video frame
- visually updates the state to "Disconnected"
The handleError() function:
- triggers a disconnect
- displays a clear error message
- changes the status color to red
- uses a small "shake" animation to highlight the issue
The code automatically creates buttons for each local IP, offering quick access to multiple cameras on the network.
This page is a complete and intuitive interface for controlling and viewing an ESP32-CAM, offering:
- fast connection
- professional visual feedback
- safe connection switching
- multiple IP selection
- proper error management