[Gelöst] Webcam "icon" und Link zum Vollbild

[itchako]

hi zusammen,

habe mehrere Webcams in FHEM eingebunden (s.u.).

Jeder Cam-Livestream wird aktuell in der Grösse 800x600 pixel dargestellt. Das nimmt mir jedoch zuviel Platz auf dem Bildschirm ein.
Daher würde ich gerne lediglich eine kleinere Vorschau (z.B. 200 Pixel breit) pro Kamera anzeigen, mit der Möglichkeit durch einen Klick auf das Vorschaubild ein neues Fenster mit dem Kamerabild in voller Auflösung darzustellen.

Irgendwie kriege ich das jedoch nicht gebacken...
Kann mir jemand einen Tipp geben wie ich das prinzipiell in FHEM implementiert bekomme?
Vielen Dank im voraus für Eure Hilfe!

Gruss
itchako

Die Cams sind allesamt folgendermassen definiert (In der html-dabei "webcamXX-locally.html" ist lediglich der Code um den Live stream anzuzeigen/aufzurufen. ):

Code Auswählen Erweitern



Internals:
   DEF        iframe http://xxx.xxx.xxx.xxx/webcam01-locally.html
   LINK       http://xxx.xxxx.xxx.xxx/webcam01-locally.html
   NAME       WebCam01
   NR         56
   STATE      initialized
   TYPE       weblink
   WLTYPE     iframe
Attributes:
   group      Kamera
   htmlattr   width="800" height="600" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" refresh="2"
   room       Info,Übersicht

[Hirvi]

Hallo itchako,

ich habe das über "weblink" gelöst.

Vielleicht hilft Dir das weiter.

define Kamera4 FLOORPLAN

define Kamera_4_267x200 weblink htmlCode { '<a  href="http://192.168.178.4:8085/fhem/floorplan/Kamera4"><img width="267" height="200" src="http://192.168.178.33:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=XXX&-pwd=XXX"></a>'}
attr Kamera_4_267x200 fp_UebersichtC 450,680,0,


define Kamera_4_1067x600 weblink htmlCode <img width="1067" height="600" src="http://192.168.178.33:80/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=XXX&-pwd=XXX"
attr Kamera_4_1067x600 fp_Kamera4 80,106,0,

Such mal hier im Forum nach "IPCAM - Liveansicht mit Steuerung"

Grüße aus Kassel

Udo

[moonsorrox]

ich mache das mit einem Bild (über width="800" height="600" einstellbar) welches ich anklicken kann und ein größeres Popup mit Live Bild geht auf, welches ich auch in der Größe einstellen kann. Je nachdem was deine Cams her geben

Code Auswählen Erweitern

define Cam_01_Stream weblink htmlCode <a target="popup" onclick="window.open ('', 'popup', 'width=1280,height=960,scrollbars=no, oolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=10,left=10') "href="http://xxxxxxx.dns:8065/cgi-bin/faststream.jpg"><img src="http://xxxxxxx.dns:8065/record/current.jpg" width="800" height="600" border="0" alt="Home"></a>

[UweUwe]

Hallo,

könnt Ihr mir hier noch weitere Infos geben?
Welche Webcam habt Ihr im Einsatz, wie ist diese angebunden.
Bin ich nicht erfahren und habe ich Erklärungsbedarf.

Merci

[itchako]

Vielen Dank schonmal an Hirvi u. moonsorrox,

werde Eure Vorschläge die Tage ausprobieren und berichten.

@uweuwe:
habe 2x 9805W und je 1x 9805E und 1x IP9900P im Einsatz. Alle von FosCam.

Gruss
     Jakob

[UweUwe]

Hallo itchako,

Vielen Dank für die schnelle Antwort.
Kannst du mir bitte noch die Details zu schicken, wie du die Kameras in das FHEM System eingebracht hast.

Viele Grüße

[itchako]

hmm dachte das ergibt sich bereits aus meiner ersten Mail ...
Das IP-Cambild wird per iframe angezeigt. Für jede Cam hab ich dafür eine HTML-Seite angelegt. In dieser HTML-Seite ist nichts anderes enthalten als die URL zur Anzeige des Webcam Bildes genauso als ob ich es im Browser aufrufe.

Wie WebCam01 in Fhem definiert wurde siehst Du oben in meiner ersten Mail, genauso wie das Listing dazu.

IPCAM nutze ich zur Zeit "nur" um z.B. die IR-Leds zu schalten und um den Bewegungsalarm zu aktivieren/deaktivieren.
Mit IPCAM sind alle vier Webcams dafür neu als Cam01 - Cam04 definiert:

define Cam01 IPCAM 192.XXX.XX.XX:88

das komplette Listing mit allen Attributen für Cam01 sieht folgendermassen aus:

Code Auswählen Erweitern

Internals:
   AUTHORITY  192.XXX.XXX.XXX:88
   DEF        192.XXX.XXX.XXX:88
   NAME       Cam01
   NR         203
   SEQ        0
   STATE      Defined
   TYPE       IPCAM
   Readings:
     2015-11-20 12:06:53   last            Cam01_snapshot.jpg
     2015-11-20 12:06:52   snapshot1       Cam01_snapshot_1.jpg
     2015-11-20 12:06:53   snapshots       1
Attributes:
   basicauth  XXXXX:XXX
   group      Kamera-Bedienung
   icon       it_camera
   path       cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXX
   room       Info,Übersicht
   snapshots  1
   storage    /volume1/web/webcams/cam01

Dann hab ich pro Cam und Funktion einen Dummy definiert (z.B. IRLeds und BewAlarm) dem über je zwei notifies (eins zum ein- und eins zum ausschalten) die URL zum an/ausschalten übergeben wird... Wenn ich mich richtig erinnere hab ich die Details dazu aus der IPCAM Dokumentation...

Gruss
itchako

[itchako]

ich mache das mit einem Bild (über width="800" height="600" einstellbar) welches ich anklicken kann und ein größeres Popup mit Live Bild geht auf, welches ich auch in der Größe einstellen kann. Je nachdem was deine Cams her geben

Code Auswählen Erweitern

define Cam_01_Stream weblink htmlCode <a target="popup" onclick="window.open ('', 'popup', 'width=1280,height=960,scrollbars=no, oolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=10,left=10') "href="http://xxxxxxx.dns:8065/cgi-bin/faststream.jpg"><img src="http://xxxxxxx.dns:8065/record/current.jpg" width="800" height="600" border="0" alt="Home"></a>

Hi Moonsorrox,
wenn das "Linkbild" der Live-Ansicht entsprechen würde, wäre das genau was ich suche.
Aber am Versuch das Image "live" zu bekommen haperts leider wieder....
Gruss
itchako

[itchako]

Hi Moonsorrox,
wenn das "Linkbild" der Live-Ansicht entsprechen würde, wäre das genau was ich suche.
Aber am Versuch das Image "live" zu bekommen haperts leider wieder....

Soderle, jetzt funkt's wie gewollt ...  :

Code Auswählen Erweitern

define Cam01 weblink htmlCode <a target="popup" onclick="window.open ('', 'popup', 'width=1280,height=960,scrollbars=no, oolbar=no,status=no,resizable=yes,menubar=no,location=no,directories=no,top=10,left=10') "href="http://XXX.XXX.XXX.XXX/webcam01-locally.html"><img src="http://XXX.XXX.XXX.XXX:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXX&pwd=XXXX&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' width="250" /></a>

Getestet mit: FosCam 9805W, 9805E und IP9900P...

Vielen Dank an Alle die geholfen haben!!!

Gruss
itchako

[masterpete23]

Kurze frage. Bekomm ich das auch hin wenn meine webcam von außen nicht erreichbar ist nur das fhem? Oder geht dann nur die Vorschau? Geht die? Danke vorab

Gesendet von meinem Huawei Honor 7

[itchako]

Kurze frage. Bekomm ich das auch hin wenn meine webcam von außen nicht erreichbar ist nur das fhem? Oder geht dann nur die Vorschau? Geht die? Danke vorab

Gesendet von meinem Huawei Honor 7

hi,

Im Bedarfsfall präferiere ich für den Zugriff von aussen übers Internet immer ein (gut verschlüsseltes) VPN.
Damit hätte sich dann auch Deine Frage erledigt da alles genauso funktioniert als ob Du zu Hause wärst.

Ansonsten denke ich solange Deine FHEM Installation Zugriff auf die Cam und den Webserver hat sollte es gehen.

Das selbst auszutesten dürfte Dich max. 5-10 Minuten kosten.
Im Code muss nur die Adresse und das PW angepasst werden und die HTML Seite enthält nichts anderes als den Code aus der Vorschau, sprich:

Code Auswählen Erweitern

<img src="http://XXX.XXX.XXX.XXX:88/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXXX&pwd=XXXXX&t=" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' />

hope that helps ... 

Gruss
itchako

[masterpete23]

Danke.
Hoffe ich komme am WE dazu.
Kann ich da irgendwie username passwort übergeben? als attribut oder muss ich das in der URL mit einbauen?