Hilfe: Kamerastream in Tablet UI einbinden

Andre0909 · 05 Oktober 2016, 15:35:28

Hallo zusammen,

ich brauche auch einmal eure Hilfe!
Ich habe seit einigen Monaten Fhem am Laufen und habe mich in alles rein gefuxt.
Nun möchte ich noch eine schöne Visualisierung (idealerweise auf einem Tablet an der Wand), deswegen lese ich mich gerade in FTUI ein.

Grundvoraussetzung ist für mich , dass ich das Bild meiner Kamera (Trendnet 310) auf dem Interface angezeigt bekomme, sonst lohnen sich für mich keine weiteren Schritte.
Da ich keine HTML Grundkenntnisse habe, versuchte ich daher anhand Anleitungen und Tutorials mir die ersten Schritte beizubringen. Dabei teste ich natürlich die Kameraeinbindung als erstes. Meine Kamera stellt als Substream einen Stream über http://ip/etc zur Verfügung. Diesen kann ich in jedem Browser auch direkt aufrufen.

Ich habe nun versucht die Kamera einzubinden gemäß Seite 4/5:

<li data-row="1" data-col="2" data-sizex="8" data-sizey="5"> 
<header>Kamera</header>
<div data-type="iframe"
data-src="http://meine steam url"
data-icon-spinner="fa-spinner fa-spin"
data-color-spinner="#aa6900"
data-icon-error="fa-frown-o"
data-color-error="#505050"
data-scrolling="yes"
data-timeout="3000">
</div>
</li>
Das hat leider nicht funktioniert, die Kachel bleibt einfach schwarz, als hätte Sie keinen Inhalt. (Auch kein Symbol oder ähnliches)

Binde ich den Stream allerdings folgender maßen ein klappt es:

<li data-row="1" data-col="2" data-sizex="3" data-sizey="3"> 

<header>Außenkamera</header>

<iframe src="http://192.168.178.222/Streaming/Channels/1/httpPreview" style="width:400px;height:300px;" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</li>

Jetzt habe ich aber das "Problem", dass beim Aufruf des UI im Browser immer unten ein Popup kommt "empfange Daten von <Kameraip>".
Zudem hat der TAB des Browsers immer ein "Laden" Symbol, so wie wenn eine Homepage nicht fertig geladen ist.
Das sieht etwas unschön und nicht richtig aus.

Jetzt weiss ich nicht wo mein Fehler ist, ob ich den Stream mit der "Alternative" so richtig eingebunden habe, wenn ja, wie ich das nonstop Browserladen "wegbekomme" oder wie ich den Stream alternativ eingebunden bekomme.
Habe auch den Teil zum Thema "Origin" gelesen, aber ehrlich gesagt nicht verstanden, ob dies ietzt verantwortlich ist, dass 1. Variante nicht geht 2. aber schon und wenn es das Problem ist, wie ich es umgehe....

Ich hoffe jemand kann mir helfen, denn nur wenn ich das sauber eingebunden bekomme kann ich mich um die Einbindung der ganzen FHEM Sachen kümmern.

SvenJust · 05 Oktober 2016, 15:43:57

Hallo Andre0909,

ich habe meine Lösung hier beschrieben: https://forum.fhem.de/index.php/topic,58133.msg495456.html#msg495456

Meine Kamera ist eine Hikvision, baugleich mit deiner Trendnet 310. Entscheidend ist auch das Tablet, es muss den Stream der Kamera dekodieren können. Als Browser verwende ich fully und für die Steuerung des Tablets AMAD2.

VG Sven

Andre0909 · 05 Oktober 2016, 16:15:15

Hallo und vielen Dank für die schnelle Antwort.

Glaube nur ich bin zu blöd dafür. Den Hauptstream (RTSP) will ich ja gar nicht einblenden sondern nur den substream der ja nicht mehr dekodiert werden muss ?!
Ich habe auch keine Abhängigkeit mit einer Klingel. Der Stream soll in einem Widget auf den Tablet UI Immer angezeigt werden.
Leider verstehe ich nicht wie ich deinen Code mit meinen Voraussetzungen und schlussendlich auch im html code richtig eingebettet bekomme

Vielleicht kannst du mir noch ein paar Tipps geben wie ich weiterkomme...

setstate · 05 Oktober 2016, 17:46:03

Dann hole dir mal den Quellcode der Seite, die jetzt das Bild der Kamera anzeigt -> Kontext-Menü > Seitenquelltext anzeigen

Da muss ein HTML Tag dabei sein, der das Bild von der IP holt/anzeigt. Zeige das mal bitte

Thorsten Pferdekaemper · 05 Oktober 2016, 18:05:26

Hi,
bei mir sieht das ganz einfach so aus:

Code Auswählen


<li data-row="5" data-col="2" data-sizex="3" data-sizey="3">
<header>KAMERA HAUST&Uuml;R</header>
<img height="300" width="400" src="http://doorcam:8081"/>
</li>

Der Stream ist allerdings ein MJPEG Stream und ich habe keine Ahnung, ob das auch mit anderen Streams geht.
Gruß,
Thorsten

Andre0909 · 05 Oktober 2016, 18:06:06

Also der Stream wird über

http://192.168.178.222/Streaming/Channels/1/httpPreview (mpeg)

aufgerufen.

Alternatic gibt es einen rtsp stream den ich im VLC aufrufen kann.

Der Quellcode wird mir leider nicht angezeigt, bzw. es erscheinen nur 1 mio. wirre Zeichen wie....

(�!1AQa"q2'¡#B±ÁRÑð$3br,
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzƒ,,...†‡ˆ‰Š'""•–—˜™š¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ��
ÿÄ�µ��w�!1AQaq"2B'¡±Á   #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijst)

Andre0909 · 05 Oktober 2016, 18:11:00

Zitat von: Thorsten Pferdekaemper am 05 Oktober 2016, 18:05:26
Hi,
bei mir sieht das ganz einfach so aus:
Code Auswählen Erweitern
<li data-row="5" data-col="2" data-sizex="3" data-sizey="3"> <header>KAMERA HAUSTÜR</header> <img height="300" width="400" src="http://doorcam:8081"/> </li>
Der Stream ist allerdings ein MJPEG Stream und ich habe keine Ahnung, ob das auch mit anderen Streams geht.
Gruß,
Thorsten

Ausproibiert, und es scheint zu funktionieren

)) Kein nachladen nix, SUPER DANKE!!!!!!!! alle!

Thorsten Pferdekaemper · 05 Oktober 2016, 18:15:26

Na das war jetzt einfach. Freut mich!

Eisix · 07 Oktober 2016, 11:55:14

Hallo,

dann erhöhe ich jetzt mal die Schwierigkeitsstufe

Habe eine Netatmo Welcome und möchte den Stream anzeigen.

Code Auswählen


    <video
        src="http://192.168.178.15/4d79bb6e5260bae8b4c450d1a7134460/A1PTYV47FrELyyKryCGJTRp2AMM/live/files/medium/index.m3u8"
        height="300" width="400"
    </video>

Mit

Code Auswählen


mplayer -playlist http://192.168.178.15/4d79bb6e5260bae8b4c450d1a7134460/A1PTYV47FrELyyKryCGJTRp2AMM/live/files/medium/index.m3u8

werden die Videos am Rechner selbst angezeigt aber für FTUI fehlt mir eine Möglichkeit. Kann man den mplayer irgendwie über embedded einbinden oder hat jemand eine andere Lösung?

Gruß
Eisix

setstate · 07 Oktober 2016, 12:40:41

Und der video-Tag funktioniert nicht?

Sollte mit einem HTML5 Browser klappen.

Eisix · 07 Oktober 2016, 14:11:48

An Browsern probiert habe ich:

Safari: zeigt bei FTUI nichts. Beim direkten Aufruf des Links wird ein Standbild angezeigt
Chrome: zeigt bei FTUI nichts. Beim direkten Aufruf des Links wird der Film angezeigt
Firefox: zeigt bei FTUI nichts. Beim direkten Aufruf des Links auch nicht (versucht VLC, geht aber nicht)
SilkBrowser: zeigt bei FTUI nichts.

Brauche ich in FTUI noch irgendwelche Optionen? Videos sind als .ts (livestream) oder .mp4 (Aufnahmen) abgelegt. Genaue Kodierung habe ich mir noch nicht angeschaut.

Gruß
Eisix

Thorsten Pferdekaemper · 07 Oktober 2016, 14:29:13

Hi,
Du versuchst da anscheinend eine Playlist abzuspielen. Das kann das video-Tag wahrscheinlich nicht. Was ist denn in der Playlist "drin"? Kannst Du die URL http://192.168.178.15/4d79bb6e5260bae8b4c450d1a7134460/A1PTYV47FrELyyKryCGJTRp2AMM/live/files/medium/index.m3u8 in einem Browser aufrufen oder per wget? Das müsste dann eine Textdatei sein, die die eigentliche Adresse des Streams enthält. Zumindest die .mp4-Teile muesste das video-Tag dann können. .ts wahrscheinlich nicht.
Gruß,
Thorsten

Eisix · 07 Oktober 2016, 14:47:21

Ja ist eine Playlist. Sieht nach dem Apple Standard Format aus. Sind in dem Fall .ts. Ich habe aber auch schon .mp4 bei Aufzeichnungen gesehen.

Code Auswählen


#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:2
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:2.000000,
live0000001919.ts
#EXTINF:2.000000,
live0000001920.ts
#EXTINF:2.000000,
live0000001921.ts
#EXTINF:2.000000,
live0000001922.ts
#EXTINF:2.000000,
live0000001923.ts
#EXTINF:2.000000,
live0000001924.ts
#EXTINF:2.000000,
live0000001925.ts
#EXTINF:2.000000,
live0000001926.ts
#EXTINF:2.000000,
live0000001927.ts
#EXTINF:2.000000,
live0000001928.ts
#EXTINF:2.000000,
live0000001929.ts
#EXTINF:2.000000,
live0000001930.ts
#EXTINF:2.000000,
live0000001931.ts
#EXTINF:2.000000,
live0000001932.ts
#EXTINF:2.000000,
live0000001933.ts
#EXTINF:2.000000,
live0000001934.ts
#EXT-X-ENDLIST

setstate · 07 Oktober 2016, 14:59:00

Offiziell unterstützt <video> keine m3u bzw. m3u8
m3u8 soll Safari aber trotzdem spielen.

Hast du mal

Code Auswählen

<video controls autoplay="true">
<source src="...
</video>

probiert?

Eisix · 07 Oktober 2016, 15:09:48

autoplay hatte ich noch nicht. Das Verhalten bleibt aber gleich.
Gibt es die Möglichkeit mplayer oder was anderes einzubinden?