USB-Webcam in fhem

Spiff · 15 August 2015, 14:21:40

Hi,

das Beispiel von Kuzl weiter oben geht nicht, weil der Javascript-Teil auskommentiert ist.
Ich habe hier ein schön minimalistisches Beispiel, das gut funktioniert (auch mit Android 4.2 und WVC, dort gehen MJPEGs sonst nicht).
Es aktualisiert nur das Bild in einem vorgegebenen Intervall.

Code Auswählen

define dynPic weblink htmlCode <html> <head> <script LANGUAGE="JavaScript"> window.setInterval(function() {document.getElementById('dynamicImage').src = "http://xxx.xxx/image.jpg?random="+new Date().getTime();;}, 3000);; </script> </head> <body><img id="dynamicImage" src="http://xxx.xxx/image.jpg" width="960" height="720"></body>

Hinweise:
- im ersten Link muss hinter die Bildadresse das ?random bestehen bleiben. Damit wird erreicht, dass die Bilder selber eine eindeutige ID bekommen und der Browsercache nicht auf bereits vorhandene Bilder zugreift. Wenn die Adresse schon ein "?" enthält: "&" benutzen.
- die 3000 ist die Aktualisierungsangabe in Millisekunden
- bei mehreren Bildern auf einer Seite muss für jeden Bildcontainer eine eindeutige ID vergeben werden (dynamicImage; 2x im Beispiel vorhanden)

Gruß
Spiff

oti · 26 September 2015, 12:11:41

Hallo,
klappt bei mir super, was mir gefehlt hat war die Unterscheidung zwischen einer internen Adresse (192.168.XXX.XXX) und einer externen Adresse (aaa.dyndns.org), um den Traffic nach außen zu minimieren.
Da die Ersetzung des Pfades durch eine Variable bei mir nicht geklappt hat (sowas wie http://$variable/image.jpg mit z. B. $ENV{'HTTP_HOST'}) habe ich das Skript wie folgt geändert:

Code Auswählen


htmlCode 
<html> 
<head> 
  <script LANGUAGE="JavaScript">
    if(window.location.host == "aaa.dyndns.org") {
      window.setInterval(function() {document.getElementById('dynamicImage').src = "http://aaa.dyndns.org:8084/image.jpg?random="+new Date().getTime();;}, 5000);; 
    }else{
      window.setInterval(function() {document.getElementById('dynamicImage').src = "http://192.168.xxx.xxx:8084/image.jpg?random="+new Date().getTime();;}, 1000);; 
	}
  </script> 
</head> 
<body>
  <img id="dynamicImage" src="http://192.168.xxx.xxx:8084/image.jpg" width="640">
  <script>
    if(window.location.host == "aaa.dyndns.org") { document.getElementById("dynamicImage").src = "http://aaa.dyndns.org:8084/image.jpg"; }
  </script>  
</body>

Ein weiterer Vorteil ist, dass ich unterschiedliche Reloadzeiten für intern und extern einstellen kann (im Beispiel 5 Sekunden extern und 1 Sekunde intern).
Mein Pad zu Hause an der Wand lädt also die Seite 192.168.xxx.xxx und wenn ich unterwegs bin, dann rufe ich die Seite aaa.dyndns.org auf.

Übrigens in Chrome kann man mit Rechtsklick auf das Bild und "Element untersuchen" schön sehen wie das Bild immer wieder neu geladen wird.

Vielleicht braucht es ja jemand...

Gruß
OTi

AGF · 26 September 2015, 16:30:14

Hallo Oti,
ich werde mir deine Info merken, vielleicht wird die irgendwie nützlich.

oberfragger · 10 November 2015, 17:27:37

Hallo Oti,

den Code kann ich dann so in der FHEM.cfg übernehmen (also davor eine define xy) oder muss ich noch etwas machen. Der Code von Ben tuts aktuell bei mir auch ganz gut. Aber die Limitierung des Traffic finde ich eine nette Idee!

Danke@Ben

nicor2k · 11 Januar 2016, 12:01:17

Hallo!

Ich habe jetzt auch eine WebCam an den Pi angeschlossen und hier einmal zwei Beispiele zusammengestellt, wie man sie schnell und einfach in FHEM integrieren kann - entweder, indem die Kamera alle 1, 5 oder 10 Minuten automatisch ein Bild speichert (Zeit einstellbar!) oder indem das Bild mit einem speziellen PHP Skript nur dann gespeichert und angezeigt wird, wenn man mit FHEM auch wirklich das Bild sehen will (das schont die SD Karte

). Das geht bestimmt auch ohne PHP, für mich war das so aber einfacher und die Load-Zeit hat sich im normalen FHEM Betrieb bei mir überhaupt nicht erhöht...

Hoffe, es hilft dem einen oder anderen!
http://www.computerhilfen.de/info/usb-kamera-in-fhem-einbinden-so-gehts.html

FHEM Forum

USB-Webcam in fhem

Spiff

oti

AGF

oberfragger

nicor2k