• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

wie zwei oder mehr Webcams auf einer Website darstellen

C

christopherle

Neues Mitglied
Guten Morgen,

ich habe nach langem "Basteln" es endlich geschafft Bilder meiner Webcam auf eine Website hochzuladen und anzeigen zu lassen.
Auch, dass das Bild alle 1 Sekunde aktualisiert wird ohne die ganze Seite neu zu laden.
Dazu habe ich ein Script im I-Net gefunden.

Ich lade die Bilder mit dem Programm -YAWCAM- via FTP in einen Ordner auf meinen Webpace ( bei Strato ).
Habe dann mit Adobe Go Live eine Seite erstellt. Dort das Script eingefügt und etwas abgeändert( Optik, Hintergrund, Text usw. ).
Funktioniert super. Bin auch froh das ich das geschafft habe obwohl ich absolut ahnungslos bin.
Ich habe es mir durch Probieren so irgendwie hin gebastelt.
Jetzt würde ich aber noch gern mehrere Webcams auf dieser Seite einbinden, anzeigen lassen.
Leider schaff ich das nicht.
Ist es mit diesem Script möglich, dass ich verwendet habe?
Das ist meine Testseite. Webcam von Dj
Könnte sich das mal ein Fachmann anschauen und mir ein paar Tips geben?
Oder soll ich hier besser den Quelltext der Seite hochladen ?
Wäre aber bestimmt zu viel Text.

Vielen Dank, Gruß Christoph
 
Hallo,

Also, ich verwende eine ganz einfache Billig USB Webcam.
Mit YAWCAM Lade ich per FTP alle Sekunde ein Bild hoch. Dieses aktualisiert sich automatisch.
Ist die Cam / PC offline wird das zuletzt aufgenommene Bild angezeigt.

Nachtrag:
Es wird immer das zuletzt hoch geladene Bild vom nächsten überschrieben. Somit liegt immer nur ein Bild im Ordner.
Auf dieses greift die Website zu.
Nun würde ich gern mehrere sich autom. aktualisierende Bilder einfügen.

Hier das Script für ein Bild: (Webcam01 ):

<script type="text/javascript">
// Bilder neu laden
function neu_laden() {
var a= Math.floor(Math.random()*1000);
document.bild.src = "Webcam01.jpg?"+a;
setTimeout("neu_laden();", 50000); // 1000! = 1 Sekunde
}
</script>

<body onLoad="neu_laden()">

<img src="/webcam/Webcam01.jpg" name="bild" width=320 height=240>

Nun würde ich gern noch ein oder mehr Bilder ( Webcam02, Webcam03 usw.) genau wie oben auf der gleichen Seite anzeigen.
Alle meine Versuche schlagen fehl.
 
Zuletzt bearbeitet:
Wie sehen die Versuche aus?
Lieber erzähl ich das nicht alles. Da lacht man mich ja aus.
Für mich war es schon ein Erfolg überhaupt die eine Cam da einzubauen.
Für mehr langt mein Wissen nicht.

Ich habe versucht z.B. eine Seite mit inframes zu erstellen.
Habe also zwei extra Seiten erstellt. Genau wie die jetzige, nur ohne Text usw. Nur das Bild.
Dann eine zweite für die zweite Cam.
In beide Seiten dann das Script eingefügt.
Dann eine Hauptseite mit zwei inframes. Dort die beiden Seiten der Webcams verlinkt.
Funktioniert nicht. Bekomme nur leere Anzeige in den Fenstern. Kein Bild.
Da ich leider absolut keine oder viel zu wenig Ahnung habe suche ich nach Hilfe.
Ich bastel normal ja nur mit Hilfe von Adobe Go Live einfache Seiten. Ganz primitiv.

Gruß, Christoph
 
Zuletzt bearbeitet:
Auslachen würde dich hier niemand dafür. Du hast es zumindest schon hinbekommen ein Webcam-Bild einzubinden. Folglich kannst Du doch schon einiges :)

Deine Idee mit dem iframe ist eine Variante. Du hast jedoch schon ein JavaScript, welches Du eigentlich nur anpassen müsstest. Beispiel:

Code: 
<script type="text/javascript">
// Bilder neu laden
function neu_laden( [COLOR="red"]objektid, webcamnummer[/COLOR] ) {
var a= Math.floor(Math.random()*1000);
document.[COLOR="red"]getElementById(objektid)[/COLOR].src = "Webcam[COLOR="red"]" + webcamnummer + "[/COLOR].jpg?"+a;
setTimeout("neu_laden([COLOR="red"]" + objektid + ", " + webcamnummer + "[/COLOR]);", 50000); // 1000! = 1 Sekunde
}
</script>

<body onLoad="neu_laden[COLOR="red"]('bild1','01');neu_laden('bild2','02'[/COLOR]);">

<img src="/webcam/Webcam01.jpg" [COLOR="red"]id[/COLOR]="bild1" width=320 height=240>
[COLOR="red"]<img src="/webcam/Webcam02.jpg" id="bild2" width=320 height=240>[/COLOR]

Meine Änderungen habe ich rot markiert.
Code ist nicht getestet, aber sollte dir die Richtung weißen können.
 
Vielen Dank,
habe es eben getestet. Aber leider funktioniert die autom. Aktualisierung nicht.
Dafür werden jetzt aber die beiden Bilder korrekt angezeigt.
Nur wenn ich die ganze Seite im Browser aktualisiere, dann werden die neuesten Bilder geladen.
Ich habe jetzt schon mal mein altes Script mit dem neuen verglichen.
Aber wo der Fehler liegt, finde ich noch nicht.
Aber ich werde mal noch weiter probieren.

gruß, Christoph
 
Zuletzt bearbeitet:
Hallo threadi,
Jetzt habe ich nochmal nach einer Lösung gesucht, um das Script von Dir zum laufen zu bekommen.
Aber ohne Erfolg.
Habe dann nochmal mit den "blödesten" Suchbegriffen in Google gesucht, auch unter Verwendung einzelner Zeilen aus Deinem Script. Dabei bin ich zufällig auf das nachfolgende Script gestoßen:

Code: 
<script language=javascript>
zeit = window.setInterval("BildNeuLaden()",1000);

function BildNeuLaden()
{
pic1=new Image();
pic1.src="webcam01.jpg";
pic2=new Image();
pic2.src="webcam02.jpg";
pic3=new Image();
pic3.src="webcam03.jpg";
document.getElementById("pic1").src = "webcam01.jpg?" + (new Date()).getTime();
document.getElementById("pic2").src = "webcam02.jpg?" + (new Date()).getTime();
document.getElementById("pic3").src = "webcam03.jpg?" + (new Date()).getTime();
}
    
</script>
<img src="webcam01.jpg" id="pic1" width=320 height=240/>
<img src="webcam02.jpg" id="pic2" width=320 height=240/>
<img src="webcam03.jpg" id="pic3" width=320 height=240/>

Das funktioniert für meine Zwecke sehr gut.
Jetzt muss ich nur noch lernen wie und warum das so funktioniert.

Vielen Dank für die Hilfe, Gruß Christoph
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben