Einbindung Überwachungskamera in FTUI (Authentifizierungsproblem?!)

IcemanNRW · 03 Oktober 2017, 13:01:14

Hallo zusammen,

bin gerade dabei, TabletUI zu programmieren, um dies dann auf einem Telekom Puls-Tablet mittels Fully Kiosk-Browser anzuzeigen (besitze die Vollversion).
Leider bekomme ich meine Überwachungskamera (Vivotek FD8369) nicht eingebunden. Vorgesehen ist es, dass alle 2 Sekunden ein Snapshot in der Übersicht angezeigt wird und man bei Bedarf auf diesen Snapshot drücken kann und dann wird der Livestream angezeigt. Der Code dazu sieht wie folgt aus:

Code Auswählen

       <header>Foto Haustür:</header>
		<div class="nocache" data-type="popup" data-refresh="2" data-height="600px" data-width="960px">
		<div data-type="image" 
		data-refresh="2" 
		data-url="http://192.168.178.187/cgi-bin/viewer/video.jpg?resolution=640x480"
		class="nocache"></div>
		<div class="dialog nocache">
		<header>Haustür Livebild:</header>
		<div class="container">
		<div data-type="image" data-size="" data-refresh="2" data-url="http://user:pw@192.168.178.187/cgi-bin/viewer/video2.mjpg">
                </div> 
		</div>
		</div>
		</div>

Leider bekomme ich kein Bild angezeigt. Am PC im normalen Browser funktioniert es, nur nicht auf dem Tablet. Dies hat wohl mit der Authentifizierung zu tun:
https://forum.fhem.de/index.php/topic,48735.msg407139.html#msg407139

Soweit ich es rausgefunden habe, kann ich das Kamerabild entweder über rtsp oder über mjpg wiedergeben (plus als Snapshot über jpg). Als Codec kann ich H.264 oder JPEG auswählen. Die Authentifizierung kann ich nicht (und möchte ich auch ungern) in der Kamera ausschalten.

Welche Möglichkeiten bleiben mir noch?

VG

Vaddi · 03 Oktober 2017, 17:20:13

Mir geht es da ähnlich, allerdings habe ich das Gefühl, dass es am Popup liegt.

Code Auswählen

                    <div data-type="popup" data-height="90%" data-width="90%">
                        <div data-type="image"
                             data-url="http://user:pw@192.168.178.80/mjpeg/stream.cgi?chn=2"
                             
                             width="100%"
                             height="100%"
                             class="nocache">
                        </div>
                        <div class="dialog">
                            <header>LIVEKAMERA</header>
                            <div data-type="image"
                                 data-url="http://user:pw@192.168.178.80/mjpeg/stream.cgi?chn=2"
                                 
                                 width="100%"
                                 height="100%"
                                 class="nocache">
                            </div>
                        </div>
                    </div>

Auf meiner Hauptseite lasse ich mir ein kleines Vorschaubild anzeigen.
Am Anfang hatte ich refresh auf 4, aber im Timecode der Kamera ist mir aufgefallen, dass es ein Livebild war.
Sobald ich aber das Popup öffne (mit dem gleichen Link) kommt einfach kein Bild.

IcemanNRW · 04 Oktober 2017, 13:15:23

Hat sonst noch jemand eine Idee?

VG

moonsorrox · 04 Oktober 2017, 18:00:43

ich habe das ganz einfach eingebunden bei mir in einer Tabelle, die lasse ich hier mal weg..
Bei mir wird ein kleines Bild angezeigt und beim drauf klicken kommt das große Bild/Stream eigentlich nicht viel Code...!

Ich habe eine Mobotix und damit funktioniert das sehr gut... Kamera Adresse bzw. Stream ist anzupassen
Hier das div:

Code Auswählen

	<div class="large left-align">Kamera Eingang
						</div>
					</td>
					<td width="50%">
					<!-- ============= Kamera Popup ============ -->
										
					<div data-type="popup" data-height="760px" data-width="1000px">
					<img style="width:250px;height:160px" src="http://xxxxxxxxxx/cgi-bin/faststream.jpg" ></img>
					<div class="dialog">
					<div data-type="image"
						 data-url="http://xxxxxxxxxx/cgi-bin/faststream.jpg"
						 data-size="100%"						 
						 data-nocache="true"
						 data-refresh="2"
						 onclick="$('.dialog-close').trigger('click');">
					</div>

IcemanNRW · 05 Oktober 2017, 00:08:35

Zitat von: moonsorrox am 04 Oktober 2017, 18:00:43
ich habe das ganz einfach eingebunden bei mir in einer Tabelle, die lasse ich hier mal weg..
Bei mir wird ein kleines Bild angezeigt und beim drauf klicken kommt das große Bild/Stream eigentlich nicht viel Code...!

Ich habe eine Mobotix und damit funktioniert das sehr gut... Kamera Adresse bzw. Stream ist anzupassen
Hier das div:
Code Auswählen Erweitern
<div class="large left-align">Kamera Eingang </div> </td> <td width="50%">  <div data-type="popup" data-height="760px" data-width="1000px"> <img style="width:250px;height:160px" src="http://xxxxxxxxxx/cgi-bin/faststream.jpg" ></img> <div class="dialog"> <div data-type="image" data-url="http://xxxxxxxxxx/cgi-bin/faststream.jpg" data-size="100%" data-nocache="true" data-refresh="2" onclick="$('.dialog-close').trigger('click');"> </div>

Das funktioniert auch leider nicht...

Hab es sowohl mit user:pw, wie auch ohne ausprobiert $:-\$

IcemanNRW · 05 Oktober 2017, 11:43:17

Mir fällt grad eine andere Alternative ein.

Was ist, wenn ich mir das Modul ,,IPCAM" in FHEM einrichte und dort den letzten Snapshot der Kamera ausgeben lasse. Im FTUI referenziere ich dann auf das IPCAM-Modul (und nicht direkt auf meine Überwachungskamera). So müsste ich ja ohne eigene Basic Authentification ein Bild bekommen. Bei Klick auf dieses Bild, könnte ich ja mir einen Livestream (als URL - per Popup) anzeigen lassen (dies funktioniert ja wohl laut dem Forum hier ohne Probleme in Fully)

Was meint ihr?

VG

moonsorrox · 05 Oktober 2017, 12:15:35

der Fehler mit dem leeren Bild dort bei dir den hatte ich auf meinem Samsung Tablet auch..!
Das liegt am User und Passwort, daher habe ich in meiner Mobotix eine sogenannte Gast-Ansicht die ich ohne Passwort aufrufen kann und eben mit der lokalen IP.. Kannst du das bei dir auch einstellen, denn lokal ist das ja ohne Probleme möglich ohne Passwort, bist ja in deinem Netzwerk...

pcbastler · 06 Oktober 2017, 11:27:24

Ich hab jetzt damit mal ein wenig probiert. URLs mit http://user:passwort@hostname kann der Firefox (unter Win, Linux und Android) problemlos darstellen. Chrome (unter Android), der IE und Edge weigern sich aber.
Ergänzend habe ich bei serverfault noch gefunden:

ZitatFYI, the http://username:password@example.com format is no longer supported by either IE or Chrome, wouldn't be surprised if others followed suit if they haven't already. – T.J. Crowder Jun 20 '14 at 10:31

EDIT: Lösung: hier im Forum