Alle Kamerabilder in einer Übersicht anzeigen

In einem anderen Artikel (Link) habe ich beschrieben wie man die RTSP Streams komfortabel in VLC öffnet. Hier möchte ich eine weiter Möglichkeit beschreiben wie man noch schneller und komfortabler auf die Kamerabilder in einem Browser zugreifen kann.

Security Camera Monitoring  - fmunzert / Pixabay
fmunzert / Pixabay

Meine D-Link Kameras haben sowohl die Möglichkeit auf das aktuelle Bild als Standbild zuzugreifen, aber auch das Videobild als MJPG wiederzugeben.

Das Kamerabild kann man bei meiner DCS 936L/935L unter folgenden Link abrufen:
http://IP-Adresse-der-Kamera/image/jpeg.cgi

Das Kameravideo kann man unter folgendem Link erreichen:
http://IP-Adresse-der-Kamera/video/mjpg.cgi

In den Einstellungen der Kamera unter Verwaltung -> Admin kann man bei AUTHENTIFIZIERUNG festlegen, ob man ein Passwort eingeben muss für
1. RTSP -> Stream
2. HTTP -> Stream
3. Momentaufnahmen -> Einzelbild

Falls man es so einstellt, das man nur mit Passwort drauf zugreifen darf, dann muss vor die IP-Adresse im Link noch Benutzername:Passwort@ also z.B. so http://admin:Password@192.168.2.1/video/mjpg.cgi.

Mit diesen beiden Infos habe ich mir eine kleine HTML Seite aufgebaut, die mir die Bilder direkt auf einer Seite anzeigt. So benötigt es nur einen Webserver im LAN, z.B. auf einem Raspberrypi und Zugriff auf die neu erstellte HTML Seiten.

HTML Seite mit Einzelbildern

Die HTML Seite für die Einzelbilder aktualisiert das Bild alle 10 Sekunden und zeigt alle Bilder direkt untereinander an. Dies könnt ihr als Vorlage nehmen, einfach den Text kopieren, in einen Editor einfügen und die Datei als .html abspeichern.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webcams</title>

<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="-1">
<META HTTP-EQUIV="refresh" CONTENT="10">

</head>

<body bgcolor="#000000">
<main>
<ul id="galerie">
<!--	 -->
 
	
	
	<br>
	<img src="http://10.0.1.38/image/jpeg.cgi" alt="Carport">
	<br>
	<img src="http://10.0.1.39/image/jpeg.cgi" alt="Garten">
	<br>
	
		
</ul>
</main>
</body>
</html>

HTML Seite mit Videostream

Die HTML Seite mit den Video Streams zeigt alle Kamerabilder untereinander an und alle zeigen ein Livebild.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Webcams</title>

<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="-1">
<META HTTP-EQUIV="refresh" CONTENT="10">

</head>

<body bgcolor="#000000">
<main>
<ul id="galerie">
<!--	 -->
 
	<br>
	<img src="http://10.0.1.38/video/mjpg.cgi" alt="Carport">
	<br>
	<img src="http://10.0.1.93/video/mjpg.cgi" alt="Garten">
	<br>
	
		
</ul>
</main>
</body>
</html>

Ihr könnt dann z.B. den Link auf diese HTML Datei in eurem LAN auf dem Handy aufrufen und den Link abspeichern oder eine Verknüpfung direkt auf dem Homebildschirm ablegen. Dann habt ihr immer direkt Zugriff auf die Kamerabilder.

Auch von Unterwegs funktioniert dies, hierfür muss aber z.B. ein VPN eingerichtet und aktiviert sein, wenn ihr auf euer eigene Netzwerk zugreifen möchtet.

Like
Like Love Haha Wow Sad Angry

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.