WebCam in die Hompage einbauen

Webcam in Homepage einbinden

Wenn die Kamera Installiert ist und man die Bilder mit einer Software auf einen Server überträgt, dann stellt sich nur eine Frage, wie zeige ich das Bild auf meiner Homepage an?

HTML Image Tag

Am einfachsten ist das Bild per HTML Image Tag in die Seite zu integrieren. Beispiel:

<img src="http://mein.server/webcambild/bild.jpg"
 width=320 height=240 border=0 alt="">

Wobei unter src= der Server deiner Homepage und der Pfad zu dem Webcam Bild stehen muß Die anderen Angaben können auch weggelassen werden. Das ist noch sehr einfach, aber hat den Nachteil, das das Bild nicht automatisch aktuallisiert wird, und die Besucher deiner Homepage immer auf Refresh drücken müssen, wenn sie ein aktuelles Bild sehen wollen.

Demo1

HTML Image Tag Page Refresh

Um zu umgehen, dasder Besucher die Seite immer selber neu laden muß, kannst Du zwischen <HEAD> und </HEAD> folgendes auf deine Seite einbauen:

<meta http-equiv="Refresh" content="60">

Damit wird die Seite alle 60 Sekunden neu geladen. Der Nachteil hierbei ist, das immer die gesamte Seite neu geladen wird. Wenn sie neu geladen wird und nicht aus dem Cache des Browsers oder eines Proxyservers kommt.

Demo2

Java Script Teil 1

Um immer ein Aktuelles Bild vom Server zu bekommen gibt es den Trick, das der man den Namen des Bildes einfach nur ändern muß, damit es neu vom Server angefordert wird. Da das Bild auf dem Server fast immer den gleichen Namen hat, hängt man einfach eine zufällige Zeichenfolge an den Namen der Datei an. Die Zeichenfolge wird mit einem Fragezeichen zum Dateinamen abgegrenzt. Lösung ist ein Java Script.die Seite sieht dann so aus:

<html>
  <head>
  <title>Webcam</title>
    <SCRIPT LANGUAGE="JavaScript">
      var BaseURL = "http://mein.server.de";
      var File = "/bilder/image.jpg";
      var theTimer = setTimeout("reloadImage()",1);
      function reloadImage() {
        theDate = new Date();
        var url = BaseURL;
        url += File;
        url += "?dummy=";
        url += theDate.getTime().toString(10);
        document.Bild.src = url;
        theTimer = setTimeout("reloadImage()",10000);
      }
    </SCRIPT>
  </head>
  <body>
    <IMG NAME="Bild" SRC="" HEIGHT="240"
           WIDTH="320" ALT="Live Bild">
  </body>
</html>

Hier muß bei BaseURL der Server angegeben werden auf dem das Bild ist, als File das Verzeichnis und der Name des Webcambildes. Das Script lädt dann alle 10 Sekunden (10000 Millisekunden) nur das Bild neu in den Browser.

Demo3

Java Script Teil 2

Der folgende Javascript Code lädt die Bilder so schnell es die Internetverbindung, der Server und der Browser zulassen herunter und zeigt sie an. der Code wird an die stelle der Homepage eingefügt, an der das Bilde zu sehen sein soll, dabei muß http://server/path/to/webcam.jpg jeweils gegen die Richtige URL des Bildes ausgetauscht werden. Wenn das Bild eine andere Größe als 320×240 Pixel hat, so muß width=«320» height=«240» noch entsprechend angepasst werden.
Das Script sollte unter allen modernen Brosern die document.images unterstützen funktionieren.

<script type="text/javascript" language="JavaScript">
newImage = new Image();
var today = new Date();

function GetImage() { 
    
    document.images.cam.src = newImage.src; 
    newImage.src = "http://server/path/to/webcam.jpg?time=" + today.getTime();
} 

function InitImage() { 
    
    newImage.onload = GetImage; 
    newImage.src = "http://server/path/to/webcam.jpg?time=" + today.getTime(); 
    document.images.cam.onload="";
} 
</script> 
<img src="http://server/path/to/webcam.jpg" name="cam" onload="InitImage()" width="320" height="240">

Demo4

Java Script Teil 3

Java Script Teil 4

Java Applet

Eine Weitere Möglichkeit, ist es ein Java Applet zu benutzen. Ein Applet gibt es unter http://webcamapplet.sourceforge.net/ zum Herunterladen. Es wird folgendermaßen in die HTML Datei eingefügt:

<applet code="org.webcamapplet.WebCamApplet_0_1_1.class"
archive="webcamapplet_0_1_1.jar" name="Applet1" width="160"
height="140" VIEWASTEXT>
<param name=width value="160">
<param name=height value="140">
<param name=labelHeight value="20">
<param name=delayMillis value="6000">
<param name=camRetrySecs value="20">
<param name=camviewLimitMins value="2">
<param name="labelReloadSecs" value="3">
<param name="title" value="Example 1">
<param name=onImage value="camview.jpg">
<param name=offImage value="offimage.jpg">
<param name=limitImage value="limitimage.jpg">
<param name=click value="http://webcamapplet.sourceforge.net/">
<param name=logging value="true">
</applet>

Anstelle von Codebase mußt Du den Server und das Verzeichnis des Java Applets angeben. Unter Code den Namen des Applets. Bei URL die komplette URL zu deinem Bild und unter Intervall die Zeit, in Sekunden, nach der das Bild neu geladen werden soll.

Demo5

Flash Film

Unter diesem Link gibt es eine Kostenlose Flash Datei, die du in deine Seite integrieren kannst. Nach dem entpacken des Archives musst du nur die Datei flash_webcam.swf in das Verzeichnis kopieren, in dem sich auch das Bild deiner Webcam befindet.

<object
    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase=
    "http://download.macromedia.com/pub/shockwave/
    cabs/flash/swflash.cab#version=6,0,79,0"
    id="flash_webcam"
    width="320" height="240"
>
<param name="movie" value="flash_webcam.swf?camurl=MEINBILD&camtimer=60">
<param name="bgcolor" value="#FFFFFF">
<param name="quality" value="high">
<param name="allowscriptaccess" value="samedomain">
<embed
    type="application/x-shockwave-flash"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    name="flash_webcam"
    width="320" height="240"
    src="flash_webcam.swf?camurl=MEINBILD&camtimer=60"
    bgcolor="#FFFFFF"
    quality="high"
    swliveconnect="true"
    allowscriptaccess="samedomain"
>
<noembed>
</noembed>
</embed>
</object>

Hier müssen die beiden Zeilen die camurl=MEINBILD&camtimer=60 enthalten an die Webseite angepasst werden. camurl=MEINBILD wobei MEINBILD durch den Dateinamen des Webcambildes ersetzt wird und camtimer=60 das Bild alle 60 Sekunden neu lädt.

Demo6

Welche Lösung brauch ich

All diese Varianten haben Vor- und Nachteile. Der eine Surfer hat kein Java-Script aktiviert, der Andere kein Java, einer kein Flash, wieder ein Anderer nichts von allem, der eine Browser unterstützt es erst gar nicht. Manche Browser machen den Reload nicht richtig. Aus diesem Grund solltest Du den Besuchern deiner Seite mehrere Möglichkeiten anbieten, denn wer das Bild nicht sehen kann der kommt nicht wieder!