1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

wie zwei oder mehr Webcams auf einer Website darstellen

Dieses Thema im Forum "JavaScript" wurde erstellt von christopherle, 15 Mai 2011.

  1. christopherle

    christopherle Neues Mitglied

    Registriert seit:
    5 Mai 2011
    Beiträge:
    5
    Punkte für Erfolge:
    0
    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
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Arcsinh

    Arcsinh Neues Mitglied

    Registriert seit:
    22 Dezember 2010
    Beiträge:
    560
    Punkte für Erfolge:
    0
    Was für eine Webcam denn? Du hast da ein Bild eingebunden...
     
  3. christopherle

    christopherle Neues Mitglied

    Registriert seit:
    5 Mai 2011
    Beiträge:
    5
    Punkte für Erfolge:
    0
    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: 15 Mai 2011
  4. threadi

    threadi Moderator Team Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    15.135
    Punkte für Erfolge:
    83
    Deine Versuche? Wie sehen die denn aus?
     
  5. christopherle

    christopherle Neues Mitglied

    Registriert seit:
    5 Mai 2011
    Beiträge:
    5
    Punkte für Erfolge:
    0
    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: 15 Mai 2011
  6. threadi

    threadi Moderator Team Moderator

    Registriert seit:
    20 Oktober 2006
    Beiträge:
    15.135
    Punkte für Erfolge:
    83
    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 (text):
    1. <script type="text/javascript">
    2. // Bilder neu laden
    3. function neu_laden( [COLOR="red"]objektid, webcamnummer[/COLOR] ) {
    4. var a= Math.floor(Math.random()*1000);
    5. document.[COLOR="red"]getElementById(objektid)[/COLOR].src = "Webcam[COLOR="red"]" + webcamnummer + "[/COLOR].jpg?"+a;
    6. setTimeout("neu_laden([COLOR="red"]" + objektid + ", " + webcamnummer + "[/COLOR]);", 50000); // 1000! = 1 Sekunde
    7. }
    8. </script>
    9.  
    10. <body onLoad="neu_laden[COLOR="red"]('bild1','01');neu_laden('bild2','02'[/COLOR]);">
    11.  
    12. <img src="/webcam/Webcam01.jpg" [COLOR="red"]id[/COLOR]="bild1" width=320 height=240>
    13. [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.
     
  7. christopherle

    christopherle Neues Mitglied

    Registriert seit:
    5 Mai 2011
    Beiträge:
    5
    Punkte für Erfolge:
    0
    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: 16 Mai 2011
  8. christopherle

    christopherle Neues Mitglied

    Registriert seit:
    5 Mai 2011
    Beiträge:
    5
    Punkte für Erfolge:
    0
    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 (text):
    1. <script language=javascript>
    2. zeit = window.setInterval("BildNeuLaden()",1000);
    3.  
    4. function BildNeuLaden()
    5. {
    6. pic1=new Image();
    7. pic1.src="webcam01.jpg";
    8. pic2=new Image();
    9. pic2.src="webcam02.jpg";
    10. pic3=new Image();
    11. pic3.src="webcam03.jpg";
    12. document.getElementById("pic1").src = "webcam01.jpg?" + (new Date()).getTime();
    13. document.getElementById("pic2").src = "webcam02.jpg?" + (new Date()).getTime();
    14. document.getElementById("pic3").src = "webcam03.jpg?" + (new Date()).getTime();
    15. }
    16.    
    17. </script>
    18. <img src="webcam01.jpg" id="pic1" width=320 height=240/>
    19. <img src="webcam02.jpg" id="pic2" width=320 height=240/>
    20. <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