Webcam einbinden

eigentlich hatter das in den oberen Postings schon beschrieben :wink:

Gern, ich dachte, das sei eh schon klar, die meisten Schritte sind ja im Thread schon beschrieben:

VORAUSSETZUNGEN

[ol]
[li]Ich habe das mit einer Edimax IC7000 pt gemacht; es dürfte aber auch mit anderen pt- oder ptz-Kameras funktionieren, die ptz.cgi in ihrer Firmware haben. Befehlsarsenal unter http://www.edimax.co.uk/images/Image/CGI/IC7000PT%28n%29_CGI_Commands.pdf[/li][li]Wenn man von außen zugreifen will, muss man für die Webcam eine URL eingerichtet haben (z.B. bei DynDNS.com - Free Domain Name, Managed DNS, Email Services oder ähnlichen). Greift man nur innerhalb des Netzwerks zu, sollte es auch mit der internen IP-Adresse der Kamera funktionieren.[/li][li]Wenn man bestimmte Punkte direkt mit der Kamera ansteuern möchte, so muss man diese zuvor mit dem Original-Kamerainterface im Internet Explorer definieren. Vorsicht: Sie werden als 1, 2, 3… angezeigt, bei der Referenzierung später entspricht das aber 0, 1, 2…[/li][/ol]

SCHRITT-FUER-SCHRITT

[ol]
[li]In der Verwaltungskonsole im Objektbaum eine Variable hinzufügen. Ich habe das auf der obersten Ebene mit dem Namen „Webcam“ gemacht; so erscheint der Eintrag Webcam auf der Startseite der App, die eigenliche Seite mit Live Stream und Bedienelementen öffnet sich aber erst, wenn man auf „Webcam“ tippt. Typ: String, unter „Eigenes Profil“ „~HTML-Box“ wählen, alles andere auf den Standardvorgaben belassen.[/li][li]Nach dem Speichern der Variablen diese doppelklicken und „Wert editieren“. Unter „Neuer Wert“ wird dann der gesamte HTML-Code eingegeben, der - wichtig! - in einer einzigen Zeile stehen muss (hier würde man sich angesichts der ungeahnten Möglichkeiten dieses Variablentyps einen kleinen Editor wünschen).[/li][li]Der einzugebende Code muss natürlich an die eigenen Gegebenheiten angepasst werden:[/li][ul]
[li]http://USERNAME:PASSWORT@URL-DER-WEBCAM/ per Suchen&Ersetzen konfigurieren[/li][li]wenn man die Pfeilgrafiken nutzen will als Zip unten angehängt), diese in /webfront/img hinterlegen oder Pfad im Code ändern[/li][li]wenn man Skripts wie meine Licht- und Rolladenskripts nutzen will, diese anlegen und im Verzeichnis /webfront speichern (bei mir enthalten sie nur Dinge wie [/li]```php

<? FS20_SwitchMode(12345, !GetValueBoolean(54321)); if(GetValueBoolean(54321) == True) { FS20_SetIntensity(12345, 16,1); } ?>
um etwa die Dimmerlampe abwechselnd ein- und auszuschalten und den Dimmwert beim Einschalten auf 100% zu setzen). Ich habe beim Aufruf der PHPs den Port meiner Webserver Instanz mit angegeben, ist aber vermutlich in den meisten Fällen nicht nötig.
[/ul]
 
[li]Die Image Map für die 8 Bewegungsrichtungen der Kamera sieht so aus wie im Screenshot. Obwohl das Bild des Livestreams 640 x 480 px groß ist, muss man die Image Map auf einer Basis von ca. 960 x 720px anlegen, damit das auf iPhone und iPad klappt (experimentell ermittelt, da ich auf die Schnelle keine Infos dazu fand). Prinzipiell sollte das aber mit dem unten stehen Code funktionieren, so dass man keine eigene Image Map erstellen braucht.[/li][/ol]

Der Code, den ich verwende (wie gesagt, alles in einer einzigen Zeile):

```html
<!-- Code für HTML Box in IP Symcon, der die Edimax IC7000 PT nach meinen Bedürfnissen in Webfront und (vor allem) iFront-App auf iPhone und iPad einbindet; Besonderheiten: Die Befehle zum Drehen und Schwenken der Kamera sind (in reduzierter Form) über die Pfeiltasten am oberen Bildrand zugänglich; in vollem Umfang (also auch mit den diagonalen Bewegungen) durch Berühren des Webcam-Bildes an der entsprechenden Stelle -->  <table width = 100% border=2><tr><td width=20% height=100px align="center"><font size=6><span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=up'"><img src="/img/hoch.png"> </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=down'"> <img src="/img/runter.png"> </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=left'"> <img src="/img/links.png"> </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=right'"><img src="/img/rechts.png"></span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=center'">  <img src="/img/center.png"></span> </td></tr><tr><td width=20% height=100px align="center"><font size=6><span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM:8002/wz_licht.php'"> WOHNZIM. LICHT</span> </TD><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM:8002/terr_licht.php'">  TERRASSE LICHT </span></td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM:8002/spei_licht.php'">  SPEICHER LICHT </span></TD>      <td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM:8002/wz_rolladen_auf.php'">  ROLLADEN AUF </span></td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM:8002/wz_rolladen_zu.php'">  ROLLADEN ZU </span></td></tr></table>                              <img src="http://USERNAME:PASSWORT@URL-DER-WEBCAM/snapshot.cgi" usemap="#edimax" width=100%> <map name="edimax" id="edimax">       <area shape="rect" coords="252,-1,709,287" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=up'" alt="" />           <area shape="rect" coords="254,431,711,721" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=down'" alt="" />       <area shape="poly" coords="712,284,710,-1,850,0,959,0,959,154" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=upright'" alt="" />          <area shape="poly" coords="708,428,714,719,851,719,959,719,959,567" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=downright'" alt="" />          <area shape="poly" coords="960,161,709,288,714,426,961,564,957,281" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=right'" alt="" />            <area shape="poly" coords="1,717,1,717,250,717,253,428,-1,566" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=downleft'" alt="" />  <area shape="poly" coords="250,281,248,2,98,0,-1,0,1,173" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=upleft'" alt="" />                  <area shape="poly" coords="2,181,2,421,2,560,252,425,252,284" href="#" onClick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=left'" alt="" />   </map>             <table width = 100% border=2><tr><td width=20% height=100px align="center"><font size=6><span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?gotoserverpresetIndex=0'">TERRASSE </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?gotoserverpresetIndex=1'"> TREPPE </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?gotoserverpresetIndex=2'"> SPEICHER </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=right'">    </span> </td><td width=20% height=100px align="center"><font size=6> <span onclick="var img = new Image(); img.src = 'http://USERNAME:PASSWORT@URL-DER-WEBCAM/camera-cgi/com/ptz.cgi?move=center'">     </span> </td></tr></table>

Grüße
Martin

Icons.zip (4.75 KB)

Hi Leutz

bei mir sieht das ziemlich doof aus:

das ist das ergebnis von

<embed src="http://000.000.000.000:92/nphMotionJpeg?Resolution=640x480&Quality=Standard"></embed>

Ich komm net vor und net zurück, weder Stream noch sonstwas.
Die Kamera bekommt im Normalfall ein Login von mir. Ich vermute mal das wäre der erste Schritt. Wo kann ich ansetzen?

Steht eigentlich alles im Thread: User/Pass muss in einer Form wie (Beispiel Edimax Cam)

http://USERNAME:PASSWORT@URL-DER-WEBCAM/stream-pfad-der-Kamera/...

übergeben werden (je nach Kamera auch etwas modifiziert, auch da gibt es meiner Erinnerung nach verschiedene Hinweise).
Grüße
Martin

Hi Martin,
danke für die Antwort.
Das hatte schon probiert, zumindest genau die Variane die Du angegeben hattest. Wenn ich das dann im IE-Explorer so mal testweise eingefügt hatte kam nur: ungültige URL.
ebenso hatte ich schon &user=…&pwd=… probiert…wollte auch net so ganz.
Das interessante ist, ich hatte im Herbst schonmal probiert mit dem Imagegrabber einfach ein Bild einzubinden, auch das wollte nicht so wirklich, da hab ich mir auch Tagelang die Zähne dran ausgebissen. Vielleicht gibts einfach ein grundlegendes Problem oder ich mache einen grundlegenden Fehler…

Gruß and thx for help

Kai

Das mit der HTML-Box (statt Image Grabber) hast Du auch schon probiert?

Hi Martin,

da sind wir doch gerade dran oder? :smiley:

Ist eine Panasonic Cam, hab leider die genaue Nummer im Moment nicht griffbereit.

Offtopic: Die Foscam’s sind aber alle Problemlos einbindbar, oder? Hat jemand die Outdoorcam mit 155° Linse im Einsatz, wenn ja: Wie ist die?

Gruß

Kai

Naja, weil Du den Image Grabber-Ansatz erwähnst…

Zum Thema Foscam kann ich folgendes beisteuern: Ich habe mir kürzlich ein Doppelpack Wansview NC541/W PT-Kameras gekauft (120 Euro für zwei - ich fasse es immer noch nicht so recht, wie billig die Dinger geworden sind). Die sind meinen Erkenntnissen zufolge baugleich mit der Foscam FI8908W - und lassen sich mit den Foscam-Befehlen steuern.
Die lassen sich mit der HTML-Box-Methode einbinden, aber nicht ganz so elegant wie die Edimax, denn das Steuern über die Image Map habe ich nicht hinbekommen. Ich vermute, das liegt daran, dass bei der Foscam die Bewegungsbefehle immer ein Start-Befehl sind, dem dann ein Stop-Befehl folgen muss. Das geht mit ein paar Tricks auch auf der Touch-Oberfläche (Touch= Befehl starten, Finger heben = Befehl beenden). Ich habe es nun eben einfach mit Grafik-Pfeil-Buttons umgesetzt.
Grüße
Martin

Hi Martin,

ja den Imagegrabber hatte ich im Herbst schonmal versucht und habs dann wild fluchend drangegeben :wink:

Dachte nun, dass ich nun evtl. das Teil mit der HTML Box ans Laufen bekomm.
Falsch gedacht *g …bislang.

Kann gerne aber mal nen Gastzugang zum Kamera-Frontend schalten, vielleicht will mal jemand testen, oder hat noch ne andere Idee :slight_smile:

Gruß

Kai

Hi,

brauche Eure Hilfe.

Ich versuche gerade meine Hunt HLC81 über das Ifront via HTML Box einzubinden…

Ich habe es geschaft schonmal den Stream zu lokalisieren.

http://admin:XXXXX@192.XXX.0.XXX:XXXX/GetStream.cgi?Video=0

Das ist der Wert in der HTML Box:

<embed src=„http://admin:XXXXX@192.XXX.0.XXX:XXXX/GetStream.cgi?Video=0Media=Jpeg?“ style=„width: 640px ; height: 480px;“ ></embed>

Das Problem liegt darin das das Iphone nur weiss bzw. nach einmal draufklicken nur wirrwarr anzeigt.

Im Webfront wird das nicht vorhandene Bild als Weisser Rahmen dargestellt.

Hallo und guten Abend!

Als absoluter V2 Neuling habe ich auch gleich iFront ausprobiert. Da ich eine Foscam an der Haustür habe, wollte ich sie gleich einbinden. Das Bild habe ich schon integriert mit 100%. Esist allerdings recht klein. Kann man das größer machen?

Und hat vielleicht schon mal jemand die Sache mit dem Ton ausprobiert? In der Foscam gibt es ja auch ein Mikrofon welches aber normal nur per IE funktioniert.

Happy Day und Dank, Frank

Hallo !

Ich habe gerade herausgefunden, wie ich die Foscam per Zeile im Browser bewegen kann. Jetzt möchte ich das ins IPS einbinden damit ich auch Buttons im iFront erzeugen kann dafür. Leider klappt das nicht :frowning:

Im Browser geht es so:

http://192.168.178.53:999/decoder_control.cgi?&command=0&onestep=1&user=user&pwd=passwort

Wäre das im IPS so richtig?

ips_execute("iexplore.exe", "http://192.168.178.53:999/decoder_control.cgi?&command=0&onestep=1&user=user&pwd=passwort", false, false);

Happy Day und Dank, Frank

Hallo Frank,

ich mache das mit diesem Skript.

<?
if($IPS_SENDER == "WebFront")
{
   SetValue($IPS_VARIABLE, $IPS_VALUE);
 $fields = array(
     'user' => 'xxxxxxx',
     'password' => 'xxxxxxxx');
 switch($IPS_VALUE) {
 
    case 1:
       $response = http_post_fields("http://user:pass@adresse/admin/ptctl.cgi?move=p3", $fields);
  break;
 
  case 2:
       $response = http_post_fields("http://user:pass@adresse/admin/ptctl.cgi?move=p0", $fields);
  break;
  case 3:
       $response = http_post_fields("http://user:pass@adresse/admin/ptctl.cgi?move=p4", $fields);
  break;
 
 }
}
 
?>

Aufgerufen wird das Skript durch eine Integer-Var mit einem entsprechenden Variablenprofil (Anlage) wo dann unter 1=Eingang, 2= Ort 1 usw.(siehe Screenshot)

Um die obigen Befehle in PHP nutzen zu können brauchst Du noch die ebenfalls als Anhang befindliche Extension php_http.dll.

Deine URLs mußt Du natürlich an deine Kamera anpassen. Sollte dann aber nach dem Schema:

$response = http_post_fields("
http://192.168.178.53:999/decoder_control.cgi?&command=0&onestep=1&user=user&pwd=passwort
", $fields);

funktionieren.

Der Parameter $fields ist zwingend für den http_post_fields notwendig, sollte aber vom Inhalt her egal sein da Du den User & Pass ja in der URL übergibst.

hmpf99_cam.png

php_http.rar (194 KB)

Hallo und guten Tag!

Ich habe gestern Abend erstmal die Lösung von Martin umgesetzt. Vielen Dank dafür :slight_smile:
Die Ecken habe ich rausgenommen, weil ich nur rechts, links, oben und unten als Kommandos gefunden habe. Es klappt aber sowohl der Button als auch die Steuerung über das Bild :smiley:

@Werner: Deine Lösung muss ich mir nochmal in Ruhe ansehen. Danke schonmal!

Gibts es eigentlich auch eine Möglichkeit, dass man den Finger auf dem Button läßt und der Schwenk dann weitergeht?

Happy Day und Dank, Frank (total begeistert von iFront)

Hey Docmarten, spitzen vorbereitung/script. Lief auf anhieb ausgezeichnet bei mir mit einer edimax IC7000PTN

Bei den Scripts in der HTML Box hast du „URL der Webcam“ stehen - aber für die Scripts wäre es eher URL vom Webfront… :slight_smile: Kleinigkeit wie gesagt super Script.

hat hier jemand schonmal versucht die Bewegungsmelder der Foscam/Instar auszulesen und damit mitzunutzen??

Da ich an anderer Stelle noch keine Antwort erhalten habe, versuche ich es hier noch einmal.
Meine Webcams lassen sich im ifront 1.1 nicht mehr darstellen.
bisher hatte ich folgende html box verwendet:
<img src=„http://***.dyndns.org:/cgi-bin/faststream.jpg“ style=„width: 100%; height: auto;“ />
Dies hat unter ips 2.3 und ifront funktioniert.
Nach Umstellung auf 1.1 und 2.4 geht aber das Anzeigen der Htmlboxen im ifront nicht mehr. Bei den Googlecharts hab ich das über mediafiles umgangen aber bei den Webcams hab ich noch keine Lösung.

Irgendeine Lösung? wie stellt ihr eure webcams im ifront dar? (Ich hab mobotix)

Bei mir geht dies aber auch weiterhin noch… im ifront über die von dir erwähnte weise kanni ch streams von meinen Cam’s öffnen… Also was nicht ging ist wenn ich ifront SSL aktiviere und dann die html boxen öffne kommt nichts… ist aber logo da der Client/Mobile natürlich selbst versucht diese „Links“ zu laden und dafür müsste die Cam zbsp über dyndns vom web direkt erreichbar sein. Bei dir seh ich das dyndns drinn… hast du vielleicht noch ein problem das entweder die dyndns adresse von intern nicht richtig aufgelöst/geloopt wird? probier doch mal in den html boxen die interne ip direkt ob dann das bild im ifront kommt… stell sicher das du mit dem gerät/device auf die entsprechende url direkt drauf kommst. Falls du mit vpn arbeitest wirds noch kompl.

gruss

Hallo Swissboy

danke erst mal für die Hilfe

Wenn ich die IP der cam eintrage dann wird der stream angezeigt, allerdings dann nur wenn ich im heimnetz bin. Wenn ich von außen (3G) zugreife kommt nichts.
Die Dyndns der cam ist eingerichtet und erreichbar (geht über portumleitung der fritzbox), die Cam ist auch von außen über die XXX.dyndns.org:yyy erreichbar.(Browser)
Mit altem ifront und ips ging es ja auch über die dyndns, hab nichts geändert…

irgendwelche Sicherheitseinstellung im ips oder ifront müssen sich geändert haben, wie schon gesagt geht der zugriff auf .png dateien in htmlbox, auch nur noch wenn diese im media ordner sind…

vpn und ssl ist nicht aktiv, stinknormale verbindung auf dyndns des routers mit entsprechender portweiterleitung. Es geht ja auch alles bis auf diese blöden cams…