ubuntuusers.de

Website: Button mit einer Action in HTML einbauen

Status: Gelöst | Ubuntu-Version: Kein Ubuntu
Antworten |

ingo2

Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

Ich möchte eine IP-Cam auf einer Website einbauen. Das Ganze klappt im Prinzip schon, sogar über einen HTTPS-Proxy (Apache) und ich kann den Video-Stream anschauen. Hier dazu eine gute Anleitung. Auch die Steuerung ist hier dokumentiert.

Ich kann z.B. eine gespeicherte Position anfahren auf der Komandozeile mit

curl -k https://user:pw@URL:Port/decoder_control.cgi?command=31

Jetzt möchte ich eine solche Aktion mit einem einfachen Button (z.B. beschrifter mit "Pos 1") auf meiner Website (reines HTML) einfügen. Kann mir da Jemand helfen?

Viele Grüße,
Ingo

sebix Team-Icon

Ehemalige

Anmeldungsdatum:
14. April 2009

Beiträge: 5582

Da vermutlich ein GET-Request erwartet wird und kein POST-Request, kannst du anfangs einen einfachen Link erstellen:

1
2
3
4
5
<html>
<body>
<a href="https://user:pw@URL:Port/decoder_control.cgi?command=31">Auf gespeicherte Position</a>
</body>
</html>

Hat aber den Nachteil, dass dann die Seite geoeffnet wird. Um das zu verhindern kannst du Javascript verwenden, und bei onlick eine Funktion ausfuehren, die die Seite im Hintergrund aufruft/anfragt.

ingo2

(Themenstarter)
Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

sebix schrieb:

Hat aber den Nachteil, dass dann die Seite geoeffnet wird. Um das zu verhindern kannst du Javascript verwenden, und bei onlick eine Funktion ausfuehren, die die Seite im Hintergrund aufruft/anfragt.

Erst mal Danke für die schnelle Antwort. Deinen Vorschlag hatte ich auch schon mal probiert - mit genau dem von dir beschriebenen Effekt: auf der Seite steht nämlich nur die Antwort "ok."

Auch mit Javescript habe ich schon probiert (habe davon aber Null Ahnung). Habe mal ein paar Buttons mit Funktionen angelegt in dieser Form:

<body>

<button type="button" onclick="myFunction1()">P1</button>
<button type="button" onclick="myFunction2()">P2</button>

<script>
function myFunction1() {
    alert('Hello world!');
}
</script>
...

Das "Hallo Welt" popt auch auf, d.h. im Prinzip sollte das so gehen, ABER

wie ich jetzt den GET oder POST Command realisiere - keine Ahnung.
Zur Info: den Return des Befehls brauche ich natürlich nicht, entweder die Cam bewegt sich oder nicht ☺

noisefloor Team-Icon

Anmeldungsdatum:
6. Juni 2006

Beiträge: 29567

Hallo,

JavaScript ist auch nicht meine Domäne, aber es geht ganz einfach mit jQuery.

Die folgende HTML-Seite enthält zwei Buttons, die beim Draufklicken nichts machen, außer Daten per GET an eine URL zu senden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>
      Test
    </title>
</head>
<body>
  <a id="pos1" class="btn btn-default" href="#" role="button">Pos 1</a>
  <a id="pos2" class="btn btn-default" href="#" role="button">Pos 2</a>
<script>
  $("#pos1").click(function(){
    $.get("http://localhost:8080/test", "foo=1", function(){});
});
  $("#pos2").click(function(){
    $.get("http://localhost:8080/test", "foo=2", function(){});
});
</script>
</body>
</html>

Das es funktioniert, kann du z.B. mit folgendem, in Bottle implementierten Webserver testen, der auf localhost und Port 8080 lauscht:

1
2
3
4
5
6
7
8
9
from bottle import route, run, request

@route('/test')
def index():
    get_data = request.query.foo
    print("Received as GET-Parameter: {}".format(get_data))
    return

run(host='localhost', port=8080)

Gruß, noisefloor

ingo2

(Themenstarter)
Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

Hallo noisefloor

am Life-Objekt klappt es leider noch nicht. Ich schätze mal, daß die Funktion

<script>
  $("#pos1").click(function(){
    $.get("http://localhost:8080/test", "foo=1", function(){});
});

nicht mit der URL "https://user:pw@URL:Port/decoder_control.cgi?command=31" klar kommt, weil:

a) er evtl. nicht mein self-sgned ssl-Zertifikat anerkennt (dafür braucht curl z.B. die Option -k)

b) oder die Syntax "https://user:pw@URL:Port" nicht versteht, dann bräuchte ich 3 Parameter=Value Sätze:
user=me
pwd=secret
command=31

Ist das auch machbar?

Gruß,
Ingo

noisefloor Team-Icon

Anmeldungsdatum:
6. Juni 2006

Beiträge: 29567

Hallo,

bei JavaScript gilt noch die "same origin policy", d.h. du kannst AJAX-Request nur an die URL schicken, die die Webseite auch ausliefert.

Gruß, noisefloor

ingo2

(Themenstarter)
Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

noisefloor schrieb:

bei JavaScript gilt noch die "same origin policy", d.h. du kannst AJAX-Request nur an die URL schicken, die die Webseite auch ausliefert.

Das wäre bei mir doch der Fall,oder?

Die Website wird von Apache auf meinem NAS via SSL ausgeliefert.

Auf dem gleichen Apache läuft auch ein VirtualHost mit Reverse-Proxy. Der leitet den Verkehr vom Webserver in der Webcam via SSL dann weiter.

Das NAS hat natürlich nur eine IP, aber Website und Proxy haben natürlich unterschiedliche Ports. Sollte das noch gehen?

Grüße,
Ingo

noisefloor Team-Icon

Anmeldungsdatum:
6. Juni 2006

Beiträge: 29567

Hallo,

dann sollte das gehen...

Die Antwort auf die andere Frage: mehrere Parameter übergibst du mit

$.get("http://localhost:8080/test", "foo=1", "bar=2", "spamegg=3", function(){});

Und https: sollte AFAIK auch kein Problem sein.

Gruß, noisefloor

ingo2

(Themenstarter)
Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

Danke,

daß das Ganze nur funktioniert, wenn "same-origin" erfüllt ist, ist evtl die Ursache für den Fehler hier. Ich hatte nämlich nur die index.html lokal auf meinem PC erstellt, und dachte, wenn ich fixe URL's einsetze, sollte das doch auch gehen.

Muß ich dann mal jetzt auf dem NAS selbst probieren, dauert aber eine Weile.
Melde mich dann wieder.

Gruß,
Ingo

ingo2

(Themenstarter)
Avatar von ingo2

Anmeldungsdatum:
15. Juni 2007

Beiträge: 2145

Wohnort: wo der gute Riesling wächst

So, habe das jetzt mal in meine Original-Website auf dem NAS eingebaut:

Scheint im Prinzip zu gehen, aber
offenbar wird da eine so ellenlange URL zusammengebaut, daß nur folgende Meldung erscheint

Fehler: Gesicherte Verbindung fehlgeschlagen

Ein Fehler ist während einer Verbindung mit nas:<Port> aufgetreten. SSL hat einen Eintrag erhalten, der die maximal erlaubte Länge überschritten hat. (Fehlercode: ssl_error_rx_record_too_long)

Das liegt wohl (nach "Startpagen") daran, daß mein Reverse-Proxy diese nicht mehr verarbeiten kann. ☹

Ich gebe das Ansinnen erst mal auf und werde nur einen Button enbauen, dar dann das komplette Frontend der IP-Cam als neue Site/Tab aufruft. Dort muß man sich dann auch nochmals authentifizieren - also zusätzliche Sicherheit.

Vielen Dank für Eure Hilfe - habe dabei gelernt, was nicht sinnvoll machbar ist.

Gruß,
Ingo

sebix Team-Icon

Ehemalige

Anmeldungsdatum:
14. April 2009

Beiträge: 5582

Noch als Nachtrag: Der Webserver kann mitsenden, welche Hosts und Domains von JS angeprochen werden duerfen. Siehe Docs dazu von Mozilla: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Antworten |