Webcam per iframe einbinden und Benutzer/Passwort mit senden

Rheingold · 23 September 2017, 12:12:36

Hallo Gemeinde,

ich habe mir eine TP-Link Kamera (Modell NC-200) gekauft und möchte das Live-Bild in das Tablet-UI einbinden. Soweit so simpel. Die Frage ist, wie ich bei einer URL Benutzername und Passwort weiter geben kann?

Zugriff auf das Live-Bild erhalte ich im Browser unter der Adresse: http://192.168.178.37:8080/stream/getvideo Anschließend kommt ein CGI-Login mit Benutzername und Passwort [1]. Gebe ich die Daten ein, sehe ich das Bild.

Nun möchte ich im Tablet-UI das Bild ebenfalls anzeigen und habe es wie folgt eingebunden:

Code Auswählen

		<div data-type="iframe"
			data-src="https://admin:YWRtaW4=@192.168.178.37:8080/stream/getvideo"
			data-check-src="https://192.168.178.37/fhem/ftui/batterie.html"
			data-height="500"
			data-width="500"
		></div>

Mein Browser am PC (Chrome und Firefox) zeigen an dieser Stelle kein Bild an. Öffne ich die URL mit der Passwortweitergabe in einem neuen Fenster, hat der Browser die Logindaten für die Sitzung gespeichert und ich sehe das Bild im Tablet-UI. Schließe ich den Browser und öffne ihn erneut, habe ich wieder erst mal kein Bild. Also an sich eine unpraktische Lösung. Letztlich soll das Bild natürlich auch auf einem Android-Tablet im Fully-Browser laufen, womit ich meine Zentrale darstelle.

Wer kann mir helfen die Kamera in das Tablet-UI einzubinden?

Danke

1: http://forum.tp-link.com/showthread.php?81011-Accessing-nc200-stream&p=161015&viewfull=1#post161015

Vaddi · 24 September 2017, 00:48:54

Hey, versuche mal folgendes

(ist nur nen Auszug)

Code Auswählen

	<li data-row="5" data-col="7" data-sizex="4" data-sizey="2">
		<header><div data-type="label" class="medium">Kamera</div></header>
		<iframe src="http://admin:YWRtaW4=@192.168.178.37:8080/stream/getvideo"></iframe> 
	</li>

Bei mir funktioniert das in Firefox, allerdings nicht im Fully Kiosk Browser.

Rheingold · 24 September 2017, 11:13:04

Hi,

habe es probiert und es klappt leider nicht

Zudem habe ich das hier in einem anderen Beitrag gefunden:

ZitatEs scheint, dass Android Chrome nicht das Problem mit MJPEG hat, sondern mit der Authentifizierung (basic auth), die in der URL mithängt. Bei meinen Cams geht der MJPEG-Stream AFAIK nur unter dieser URL:

http://[user]:[pass]@[ipcam]/Streaming/Channels/2/preview

Und genau das funktioniert im Chromium nicht. Es wurde anscheinend schon in 2011 aus Sicherheitsgründen abgeschaltet, dass eingebettete Inhalte eine eigene Authentifizierung durchführen können. Erstaunlicherweise funktioniert es im Chrome auf Windows noch. Also MJPEG ist bei diesen Cams nicht wirklich eine Option. (Beim RTSP-Stream lässt sich die Authentifizierung bei der Cam sogar abschalten, beim MJPEG nicht.)

Ich muss mal weiter suchen.

pcbastler · 01 November 2017, 10:38:40

Ist zwar schon etwas her, gleiches Problem hatte ich mit meiner upcam auch.
Einbindung mit

Code Auswählen

http://nutzer:passwort@ip/tmpfs/snap.jpg
geht nur im Firefox.
Nach längerer Suche hier die Lösung:

Code Auswählen

http://ip/tmpfs/snap.jpg?usr=nutzer&pwd=passwort

Rheingold · 02 November 2017, 08:54:04

Meines Wissens funktioniert das dann nur so lange problemlos, wie du nicht zwischen http und httpS wechselst. Sprich wenn du deine Seite per httpS abgesichert hast, wird es schwer einen iFrame per http einzubinden.

pcbastler · 02 November 2017, 18:07:52

Aber warum sollte ich TabletUI mit https betreiben? Der Zugriff auf die Kamera klappt ohnehin nur unverschlüsselt. Intern läuft alles mit http, Zugriff von außen nur per VPN.
Ich hab das auch noch etwas eleganter gelöst, für die Einbindung der Kamera kommt eine eigene Seite ins Spiel:

Code Auswählen


<html>
  <head>
  <META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://192.168.35.6/webcam.html">
  <title>Webcam</title>
  </head>
  <body>
    <img style="width:250px;height:160px" src="http://192.168.35.124/web/tmpfs/snap.jpg?usr=gast&pwd=gast" alt="webcam">
  </body>
</html>

Absolute Adressen müssen leider sein, die Namensauflösung per VPN klappt nicht immer

, aber das ist ein anderes Thema.

FHEM Forum

Webcam per iframe einbinden und Benutzer/Passwort mit senden

Rheingold

Vaddi

Rheingold

pcbastler

Rheingold

pcbastler