Mehrere IP-Kameras auf einer Seite nebeneinander

Sankafahrer · 9. September 2013

Guten Abend liebe Community,

ich schreibe diesen Post, weil ich absolut nicht mehr weiter komme. Ich bin schon den ganzen Tag am basteln, doch es will einfach nicht klappen. Auch sämtliche Google-Suchen blieben erfolglos/haben nicht funktioniert.

Ich habe in meinem Netwerk 5 IP-Kameras laufen (Marke AXIS), diese sollen alle auf einer Seite nebeneinander dargestellt werden.

Als Quelle greife ich einfach ein Bild ab das von der Kamera erstellt wird, und sich immer erneuert.

Nun zum Problem: Wie kann ich in meinen HTML (falls benötigt auch PHP) Quellcode festlegen, dass sich die Bilder (nicht die Seite selbst, nur die Bilder!) alle 2 Sekunden aktualisieren?

Mein aktueller Quellcode sieht so aus:

PHP

<img width="480" height="360" src="http://XXX.XX.XXX.1/jpg/1/image.jpg" name="cam1" />


<script language="JavaScript"><!--


function reloadImage() {


    var now = new Date();


    if (document.images) {


        document.images.cam1.src = http://XXX.XX.XXX.1/jpg/1/image.jpg?' + now.getTime();


    }


    setTimeout('reloadImage()',2000);


}






setTimeout('reloadImage()',2000);


//--></script>


<img width="480" height="360" src="http://XXX.XX.XXX.2/jpg/1/image.jpg" name="cam2" />


<script language="JavaScript"><!--


function reloadImage() {


    var now = new Date();


    if (document.images) {


        document.images.cam2.src = 'http://XXX.XX.XXX.2/jpg/1/image.jpg?' + now.getTime();


    }


    setTimeout('reloadImage()',2000);


}






setTimeout('reloadImage()',2000);


//--></script>


<img width="480" height="360" src="http://XXX.XX.XXX.3/jpg/1/image.jpg" name="cam3" />


<script language="JavaScript"><!--


function reloadImage() {


    var now = new Date();


    if (document.images) {


        document.images.cam3.src = 'http://XXX.XX.XXX.3/jpg/1/image.jpg?' + now.getTime();


    }


    setTimeout('reloadImage()',2000);


}






setTimeout('reloadImage()',2000);


//--></script>


<img width="480" height="360" src="http://XXX.XX.XXX.4/jpg/1/image.jpg" name="cam4" />


<script language="JavaScript"><!--


function reloadImage() {


    var now = new Date();


    if (document.images) {


        document.images.cam4.src =http://XXX.XX.XXX.4/jpg/1/image.jpg?' + now.getTime();


    }


    setTimeout('reloadImage()',2000);


}






setTimeout('reloadImage()',2000);


//--></script>


<img width="480" height="360" src="http://XXX.XX.XXX.5/jpg/1/image.jpg" name="cam5" />


<script language="JavaScript"><!--


function reloadImage() {


    var now = new Date();


    if (document.images) {


        document.images.cam5.src = http://XXX.XX.XXX.5/jpg/1/image.jpg?' + now.getTime();


    }


    setTimeout('reloadImage()',2000);


}






setTimeout('reloadImage()',2000);


//--></script>

Alles anzeigen

Vielleicht lässt sich das ganze auch irgendwie anders realisieren, ich bin für alles offen

Danke im Voraus für eure Antworten,

Mit freundlichen Grüßen

euer verzweifelter LennoX

//edit: Das eigentliche Problem ist nun, dass sich die Bilder nicht neu laden.

Andi aKa E4sTsId3 · 9. September 2013

Du hast mehrmals die gleiche Funktion reloadImage - eventuell solltest du die eindeutig pro Bild benennen - sprich reloadImage1, reloadImage2, etc.

Sankafahrer · 9. September 2013

Danke Andi, genau das war das Problem, es funktionert endlich Du bist der Beste

xGreekz7x · 9. September 2013

Hier eine ganz einfache Lösung ( mit jQuery

HTML

<img class="cam" width="480" height="360" src="http://XXX.XX.XXX.1/jpg/1/image.jpg" name="cam1" />
<img class="cam" width="480" height="360" src="http://XXX.XX.XXX.2/jpg/1/image.jpg" name="cam2" />
<img class="cam" width="480" height="360" src="http://XXX.XX.XXX.3/jpg/1/image.jpg" name="cam3" />
<img class="cam" width="480" height="360" src="http://XXX.XX.XXX.4/jpg/1/image.jpg" name="cam4" />
<img class="cam" width="480" height="360" src="http://XXX.XX.XXX.5/jpg/1/image.jpg" name="cam5" />


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
	$(".cam").each( function( index ) {
		var c = $(this);
		setInterval( function() {
			var now = new Date();
			c.attr("src", "http://XXX.XX.XXX."+(index+1)+"/jpg/1/image.jpg?"+ now.getTime());
		}, 2000);
	});
});
</script>

Alles anzeigen

Sankafahrer · 10. September 2013

Zitat von xGreekz7x

Hier eine ganz einfache Lösung ( mit jQuery )

Danke dir, das ist natürlich noch besser

Jetzt hätte ich allerdings noch eine Frage, um zwar muss man sich bei jeder Kamera mit einem Benutzernamen und einem Passwort authentifizieren, dieses ist bei allen 5 Kameras gleich.
Allerdings öffen sich beim betreten der Seite 5 Dialoge (Passwortschutz mit .htaccess) in denen ich jeweils nach den Daten gefragt werde.
Gibt es vielleicht irgendeine Abfrage, bei der ich die Daten nur einmal eingebe und er diese dann auf alle 5 Login-Fenster überträgt?

Klemmlampe · 10. September 2013

Eine Google-Suche nach "javascript basic http auth" bringt einige Ansätze zum Vorschein, unter anderem einen via XMLHttpRequest.
Wenn du dir das ganze nun entsprechend anpasst, das heißt 1x Nutzerdaten abfragen oder gar fest im Code verankern (wenn es nur privat genutzt wird) und mit diesen kannst du dich einfach der Reihe nach bei den Kameras anmelden.

xGreekz7x · 11. September 2013

Ne andere Möglichkeit wäre auch das hier:

PHP

<?php
	$username = "Benutzer";
	$password = "password";

	for($i = 1; $i<=5; $i++) {
		echo "<img class='cam' width='480' height='360' src='http://{$username}:{$password}@XXX.XX.XXX.{$i}/jpg/1/image.jpg' name='cam{$i}' />\r\n";
	}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
	$(".cam").each( function( index ) {
		var c = $(this);
		setInterval( function() {
			var now = new Date();
			c.attr("src", "http://<?php echo $username; ?>:<?php echo $password; ?>@XXX.XX.XXX."+(index+1)+"/jpg/1/image.jpg?"+ now.getTime());
		}, 2000);
	});
});
</script>

Alles anzeigen

Sankafahrer · 12. September 2013

Zitat von xGreekz7x

Ne andere Möglichkeit wäre auch das hier

Danke, das wäre bist jetzt eingentlich die eleganteste und beste Lösung, allerdings frisst der Internet Explorer seit der Version 6.0 diese "username:passwort" Authentifizierung nicht mehr (siehe hier), beim Firefox klappt es wunderbar.
Dieses Problem würde sich nur mittels einens Registry-Eintrags lösen lassen, dies ist aber eher schlecht, da die das Script von mehreren Computern (hauptsächlich mit dem Internet Explorer) aufgerufen werden soll.

Gibt es vielleicht nicht noch eine andere Lösung, die in allen Browsern funktioniert? Sorry wenn ich schon nerve

breadfish.de 12. März 2022