Einbindung IP-Cam in Webpage über CGI Kommandos

Weatherman09 · 24.01.2009, 09:30

Hallo Leute,
es ist spät und ich benötige Eure Hilfe. Bitte verzeiht mir die Anfänger-Fragen. Ich habe eine IP-Cam gekauft und die Pan/Tilt Steuerung läßt sich über Befehle wie http://YourName.Linksys-Cam.com/pt/ptctrl.cgi?mv=D,X
gesteuert werden.

Ich möchte eine Homepage bauen, in der verschiedene derartige Befehle vorkommen und ein statisches Bild der Webcam angezeigt wird. Mein Problem: Schreibe ich alle diese Steuer-Links sowie den Link für das aktuelles statische Kamerabild in ein html File, so bewegt sich zwar die Kamera, aber die darauf folgende Webseite ist leer. Gehe ich "zurück", so ist die Position wie gewünscht verändert.

Wie mache ich das, das ich wie in normalen Softwareprogrammen auch, auf die STeuerbuttons klicken kann und sich die Seite von selbst wieder ladet sowie das statische Bild erneut herladet?

Bittebitte um Hilfe, auch wenn ein paar von Euch den Kopf über solch einen Anfänger schütteln.

Weatherman09

ps: Das ist das hmtl file im Moment:
<html>
<head>
<title>Pan-Tilt Camera control for Cell Phone</title>
</head>
<body>
<img src=http://192.168.1.150:8080/img/mobile.cgi></img> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=L,7"><img src=leftarrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=U,7"><img src=uparrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=D,7"><img src=downarrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=R,7"><img
src=rightarrows.png></a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=L,70"><img src=leftarrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=U,70"><img src=uparrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=D,70"><img src=downarrows.png></a>
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=R,70"><img
src=rightarrows.png></a> 
 GOTO PRESETS: 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,7"> Preset Location 7 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,1"> Preset Location 1 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,2"> Preset Location 2 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,3"> Preset Location 3 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,4"> Preset Location 4 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,5"> Preset Location 5 </a> 
<a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,6"> Preset Location 6
</a> 
</body>
</html>

RaistlinMajere · 27.01.2009, 18:10

mag vllt. eine veraltete lösung sein, aber warum verwendest du nicht einfach frames?

ich hätte daran gedacht, daß du in einem frame dein bild darstellst, in einem anderen deine steuerlinks und in einem dritten, unsichtbaren lädst du die kommandolinks.

das würde ca. so aussehen. zuerst brauchst du ein frameset:

Code:

<html>
  <frameset rows="50%, 50%, *">
    <frame src="bild.htm">
    <frame src="steuerung.htm">
    <frame src="empty.htm">
  </frameset>
</html>

anstatt empty.htm könnte vllt. auch nix dastehen, das weiß ich nicht. gebraucht wird es jedenfalls nicht, aber vllt. regt sich ja HTML auf, wenn das attribut nichts enthält.

ok, bild.htm schaut so aus:

Code:

<html>
  <body>
    <img src=http://192.168.1.150:8080/img/mobile.cgi></img>
  </body>
</html>

steuerung.htm (enthält jetzt nicht alle links, aber du verstehst denke ich, was ich meine):

Code:

<html>
  <script language="javascript">
    function accessCam(param) {
      parent.frames[2].location.href = "http://192.168.1.150:8080/pt/ptctrl.cgi?" + param;
      parent.frames[0].reload();
    }
  </script>

  <body>
    <a href="javascript:accessCam('mv=L,7'"><img src=leftarrows.png></a>
   ...
  </body>
</html>

was passiert, ist daß du in dem unsichtbaren frame die cgi-datei mit den entsprechenden parametern aufrufst, damit sich das bild ändert. daraufhin wird ein reload des bildframes gemacht, damit man die änderung auch sieht.

beachte aber bitte dabei, daß diese lösung keinenfalls sehr professionell ist. gängige webbrowser werden sich aus gutem grund erstmal dagegen wehren, daß du einfach so per javascript den inhalt eines frames änderst, immerhin stellt das ein ziemliches sicherheitsrisiko dar, wenn das einfach so ginge. solange du deiner eigenen seite aber vertraust (und ich denke das kannst du, wenn du sie lokal lädst

), kannst du eine entsprechende ausnahme setzen und es wird funktionieren.

Weatherman09 · 02.02.2009, 22:13

Hallo RaistlinMajere,

danke für deine Hilfe. Nach genau sowas habe ich gesucht!

Ich habe die Seite umgebastelt. Was noch nicht so ganz klappen will sind die Steuerungslinks. IE meldet da "Fehler auf der Seite: Unterminated string constant" -> fehlt da vielleicht irgendwo ein Zeichen?

Noch drei Sonderwünsche wären toll:
a) ein manueller "Reload Button" - welcher javascript Befehl?
b) dass die bild.htm erst nach 1 Sekunde neu geladen wird - die Kamera muss erst die Position wechseln
c) dass die Bild.htm alle 30 Sekunden automatisch neu geladen wird.

Kannst du mir da bitte nochmals helfen?

Vielen Dank,
Weaterman09

ps: Hier der Code meiner steuerung.htm:

<html>
<script language="javascript">
function accessCam(param) {
parent.frames[2].location.href = "http://111.111.11.11/pt/ptctrl.cgi?" + param;
parent.frames[0].reload();
}
</script>
<body>
Kamera
 
 
kleine Kamerabewegung 
<a href="javascript:accessCam('mv=L,7"><img src=leftarrows.png></a>
<a href="javascript:accessCam('mv=U,7"><img src=uparrows.png></a>
<a href="javascript:accessCam('mv=D,7"><img src=downarrows.png></a>
<a href="javascript:accessCam('mv=R,7"><img src=rightarrows.png></a>
 
 
große Kamerabewegung> 
<a href="javascript:accessCam('mv=L,70"><img src=leftarrows.png></a>
<a href="javascript:accessCam('mv=U,70"><img src=uparrows.png></a>
<a href="javascript:accessCam('mv=D,70"><img src=downarrows.png></a>
<a href="javascript:accessCam('mv=R,70"><img src=rightarrows.png></a>


 <a href="javascript:accessCam('preset=move,1"> Position 1 </a>
 <a href="javascript:accessCam('preset=move,2"> Position 2 </a>
 <a href="javascript:accessCam('preset=move,3"> Position 3 </a>
 <a href="javascript:accessCam('preset=move,4"> Position 4 </a>

</body>
</html>

rev.antun · 03.02.2009, 16:22

und falls du mit dem teil auch zoomen kannst und umliegende objekte/nachbaren etc vorhanden würd ich VOR einsatz der cam auf jeden fall mit ihnen klären bzw gewisse einschränkungen in der steuerung vornehmen - ned lachen da kannst probs bekommen ...

eine (lack)firma bei uns kannst jetzt nicht mehr ganz frei richtung/zoom durch den besucher der site gesteuert werden!

Weatherman09 · 05.02.2009, 18:30

hallo leute,

danke für die guten tipps! schaut schon sehr gut aus!

ein sache bringe ich aber nicht recht hin:

wenn ich im ganz linken frame auf ein "bewegungskommando" für die kamera klicke, so hätte ich gerne, dass danach im mittleren frame das bild neu geladen wird. idealerweise erst 1 sekunde später, damit das kameraobjektiv erst dorthin fahren kann.

irgendwo habe ich mal was mit javascript und "clickon" gelesen, kann das aber leider nicht mehr finden.

wäre für eure hilfe dankbar.

ps: derzeit schaut die steuerungsseite so aus:

Code:

<html>
<script language="javascript">
function accessCam(param) {
parent.frames[2].location.href = "http://1xx.2xx.xx.xx/pt/ptctrl.cgi?" + param;
parent.frames[0].reload();
}
</script>
<body>
Lilo Cam
<br>
<br>
kleine Kamerabewegung<br>
<a href="javascript:accessCam('mv=L,7') "><img src=leftarrows.png></a> 
<a href="javascript:accessCam('mv=U,7') "><img src=uparrows.png></a>
<a href="javascript:accessCam('mv=D,7') "><img src=downarrows.png></a>
<a href="javascript:accessCam('mv=R,7') "><img src=rightarrows.png></a>
<br>
<br>
große Kamerabewegung<br>
<a href="javascript:accessCam('mv=L,70') "><img src=leftarrows.png></a>
<a href="javascript:accessCam('mv=U,70') "><img src=uparrows.png></a>
<a href="javascript:accessCam('mv=D,70') "><img src=downarrows.png></a>
<a href="javascript:accessCam('mv=R,70') "><img src=rightarrows.png></a>
<p>
<p>
<br><a href="javascript:accessCam('preset=move,1') "> Schlafplatz </a>
<br><a href="javascript:accessCam('preset=move,2') "> Türe 1 </a>
<br><a href="javascript:accessCam('preset=move,3') "> Türe 2 </a>
<br><a href="javascript:accessCam('preset=move,4') "> draußen </a>
<br>
 
</body>
</html>

24.01.2009, 09:30	#1
Weatherman09 Newbie Registriert seit: 24.01.2009 Alter: 35 Beiträge: 3	Einbindung IP-Cam in Webpage über CGI Kommandos Hallo Leute, es ist spät und ich benötige Eure Hilfe. Bitte verzeiht mir die Anfänger-Fragen. Ich habe eine IP-Cam gekauft und die Pan/Tilt Steuerung läßt sich über Befehle wie http://YourName.Linksys-Cam.com/pt/ptctrl.cgi?mv=D,X gesteuert werden. Ich möchte eine Homepage bauen, in der verschiedene derartige Befehle vorkommen und ein statisches Bild der Webcam angezeigt wird. Mein Problem: Schreibe ich alle diese Steuer-Links sowie den Link für das aktuelles statische Kamerabild in ein html File, so bewegt sich zwar die Kamera, aber die darauf folgende Webseite ist leer. Gehe ich "zurück", so ist die Position wie gewünscht verändert. Wie mache ich das, das ich wie in normalen Softwareprogrammen auch, auf die STeuerbuttons klicken kann und sich die Seite von selbst wieder ladet sowie das statische Bild erneut herladet? Bittebitte um Hilfe, auch wenn ein paar von Euch den Kopf über solch einen Anfänger schütteln. Weatherman09 ps: Das ist das hmtl file im Moment: <html> <head> <title>Pan-Tilt Camera control for Cell Phone</title> </head> <body> <img src=http://192.168.1.150:8080/img/mobile.cgi></img><br><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=L,7"><img src=leftarrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=U,7"><img src=uparrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=D,7"><img src=downarrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=R,7"><img src=rightarrows.png></a><br><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=L,70"><img src=leftarrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=U,70"><img src=uparrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=D,70"><img src=downarrows.png></a> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?mv=R,70"><img src=rightarrows.png></a><br><br> <b><br>GOTO PRESETS:<br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,7"> Preset Location 7 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,1"> Preset Location 1 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,2"> Preset Location 2 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,3"> Preset Location 3 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,4"> Preset Location 4 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,5"> Preset Location 5 </a><br> <a href="http://192.168.1.150:8080/pt/ptctrl.cgi?preset=move,6"> Preset Location 6 </a></b><br> </body> </html>

27.01.2009, 18:10	#2
RaistlinMajere Inventar Registriert seit: 06.04.2001 Alter: 44 Beiträge: 2.343	mag vllt. eine veraltete lösung sein, aber warum verwendest du nicht einfach frames? ich hätte daran gedacht, daß du in einem frame dein bild darstellst, in einem anderen deine steuerlinks und in einem dritten, unsichtbaren lädst du die kommandolinks. das würde ca. so aussehen. zuerst brauchst du ein frameset: Code: <html> <frameset rows="50%, 50%, "> <frame src="bild.htm"> <frame src="steuerung.htm"> <frame src="empty.htm"> </frameset> </html> anstatt empty.htm könnte vllt. auch nix dastehen, das weiß ich nicht. gebraucht wird es jedenfalls nicht, aber vllt. regt sich ja HTML auf, wenn das attribut nichts enthält. ok, bild.htm schaut so aus: Code: <html> <body> <img src=http://192.168.1.150:8080/img/mobile.cgi></img> </body> </html> steuerung.htm (enthält jetzt nicht alle links, aber du verstehst denke ich, was ich meine): Code: <html> <script language="javascript"> function accessCam(param) { parent.frames[2].location.href = "http://192.168.1.150:8080/pt/ptctrl.cgi?" + param; parent.frames[0].reload(); } </script> <body> <a href="javascript:accessCam('mv=L,7'"><img src=leftarrows.png></a> ... </body> </html> was passiert, ist daß du in dem unsichtbaren frame die cgi-datei mit den entsprechenden parametern aufrufst, damit sich das bild ändert. daraufhin wird ein reload des bildframes gemacht, damit man die änderung auch sieht. beachte aber bitte dabei, daß diese lösung keinenfalls sehr professionell ist. gängige webbrowser werden sich aus gutem grund erstmal dagegen wehren, daß du einfach so per javascript den inhalt eines frames änderst, immerhin stellt das ein ziemliches sicherheitsrisiko dar, wenn das einfach so ginge. solange du deiner eigenen seite aber vertraust (und ich denke das kannst du, wenn du sie lokal lädst ), kannst du eine entsprechende ausnahme setzen und es wird funktionieren. ____________________________________ "Life is like a box of rockets," said the Marine. "You never know what you´re gonna ret." Then he pulled the trigger of his BFG9000. Geändert von RaistlinMajere (27.01.2009 um 18:21 Uhr).*

02.02.2009, 22:13	#3
Weatherman09 Newbie Registriert seit: 24.01.2009 Alter: 35 Beiträge: 3	Hallo RaistlinMajere, danke für deine Hilfe. Nach genau sowas habe ich gesucht! Ich habe die Seite umgebastelt. Was noch nicht so ganz klappen will sind die Steuerungslinks. IE meldet da "Fehler auf der Seite: Unterminated string constant" -> fehlt da vielleicht irgendwo ein Zeichen? Noch drei Sonderwünsche wären toll: a) ein manueller "Reload Button" - welcher javascript Befehl? b) dass die bild.htm erst nach 1 Sekunde neu geladen wird - die Kamera muss erst die Position wechseln c) dass die Bild.htm alle 30 Sekunden automatisch neu geladen wird. Kannst du mir da bitte nochmals helfen? Vielen Dank, Weaterman09 ps: Hier der Code meiner steuerung.htm: <html> <script language="javascript"> function accessCam(param) { parent.frames[2].location.href = "http://111.111.11.11/pt/ptctrl.cgi?" + param; parent.frames[0].reload(); } </script> <body> Kamera <br> <br> kleine Kamerabewegung<br> <a href="javascript:accessCam('mv=L,7"><img src=leftarrows.png></a> <a href="javascript:accessCam('mv=U,7"><img src=uparrows.png></a> <a href="javascript:accessCam('mv=D,7"><img src=downarrows.png></a> <a href="javascript:accessCam('mv=R,7"><img src=rightarrows.png></a> <br> <br> große Kamerabewegung><br> <a href="javascript:accessCam('mv=L,70"><img src=leftarrows.png></a> <a href="javascript:accessCam('mv=U,70"><img src=uparrows.png></a> <a href="javascript:accessCam('mv=D,70"><img src=downarrows.png></a> <a href="javascript:accessCam('mv=R,70"><img src=rightarrows.png></a> <p> <p> <br><a href="javascript:accessCam('preset=move,1"> Position 1 </a> <br><a href="javascript:accessCam('preset=move,2"> Position 2 </a> <br><a href="javascript:accessCam('preset=move,3"> Position 3 </a> <br><a href="javascript:accessCam('preset=move,4"> Position 4 </a> </body> </html>

03.02.2009, 16:22	#4
rev.antun Inventar Registriert seit: 02.04.2002 Alter: 60 Beiträge: 5.198 Mein Computer	und falls du mit dem teil auch zoomen kannst und umliegende objekte/nachbaren etc vorhanden würd ich VOR einsatz der cam auf jeden fall mit ihnen klären bzw gewisse einschränkungen in der steuerung vornehmen - ned lachen da kannst probs bekommen ... eine (lack)firma bei uns kannst jetzt nicht mehr ganz frei richtung/zoom durch den besucher der site gesteuert werden!

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)