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"> <!-- 928*655 -->
<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"> <!-- 928*655 -->
<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.
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
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...
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
Hi,
bei mir sieht das ganz einfach so aus:
<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
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)
Zitat von: Thorsten Pferdekaemper am 05 Oktober 2016, 18:05:26
Hi,
bei mir sieht das ganz einfach so aus:
<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!
Na das war jetzt einfach. Freut mich!
Hallo,
dann erhöhe ich jetzt mal die Schwierigkeitsstufe :)
Habe eine Netatmo Welcome und möchte den Stream anzeigen.
<video
src="http://192.168.178.15/4d79bb6e5260bae8b4c450d1a7134460/A1PTYV47FrELyyKryCGJTRp2AMM/live/files/medium/index.m3u8"
height="300" width="400"
</video>
Mit
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
Und der video-Tag funktioniert nicht?
Sollte mit einem HTML5 Browser klappen.
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
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
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.
#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
Offiziell unterstützt <video> keine m3u bzw. m3u8
m3u8 soll Safari aber trotzdem spielen.
Hast du mal
<video controls autoplay="true">
<source src="...
</video>
probiert?
autoplay hatte ich noch nicht. Das Verhalten bleibt aber gleich.
Gibt es die Möglichkeit mplayer oder was anderes einzubinden?
Externe Tools einbinden, irgendwie wird das schon gehen. Mit irgendwelchen Plugins
Aber der Html5 Standard mit dem Video Tag ist schon der richtige Weg. Ich sage nur Flash-Katastrophe des vergangenen Jahrzehnts.
Und als src das *.ts File direkt eingeben? Oder ist das immer ein anderer Name?
Wie zeigt man das Video sonst an? Auch im Browser, kann man dort nicht den Codeschnipsel kopieren?
Der name des .ts zählt immer weiter hoch.
Hab mal versucht an Codeschnipsel zu kommen.
<div id="jwplayer-wrapper" class="jwplayer jw-reset jw-skin-seven jw-flag-controls-disabled jw-flag-user-inactive jw-flag-flash-blocked jw-state-buffering jw-flag-live" tabindex="0" style="width: 100%; height: 100%;">
<div class="jw-aspect jw-reset"></div>
<div class="jw-media jw-reset"><object type="application/x-shockwave-flash" data="https://my.netatmo.com//scripts/vendors/jwplayer-7.1.4/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="jwplayer-wrapper_swf_0" name="jwplayer-wrapper_swf_0" class="jw-swf jw-reset" style="display: block; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="opaque"><param name="menu" value="false"></object></div>
Sieht so aus als nutzen die jwplayer.
Ich möchte mich auch mal einklinken.
Mein Cam hat leider nur einen rtsp Stream.
Gibt es für das eine Lösung?
Ich krame den Thread mal raus - vo dem Problem stehe ich auch. Xioami 1080p Cam mit fang-hack, stellt rtsp Stream bereit. In VLC kann ich mir den anschauen, in FHEM/FTUI komme ich noch nicht wirklich weiter...
Schau doch mal im Fully Thread, da gab es das Thema auch schon. Meiner Meinung nach sind mjpeg Streams im Browser deutlich einfacher zu handhaben.
Ansonsten über Amad den VLC nach vorne holen und nach einer Zeit wieder schließen.
Zitat von: Tedious am 05 März 2017, 17:22:32
Ich krame den Thread mal raus - vo dem Problem stehe ich auch. Xioami 1080p Cam mit fang-hack, stellt rtsp Stream bereit. In VLC kann ich mir den anschauen, in FHEM/FTUI komme ich noch nicht wirklich weiter...
Hast du vielleicht ein Synology NAS? Dann könntest du den Stream auf mjpeg umkonvertieren und so als "image" einbinden.
Hi, danke für die Hinweise. Nein, kein Synology, ich habe einen kleinen Server hier stehen der u.a. als NAS fungiert. Hatte noch nicht wirklich die Zeit mich da einzulesen, aber bei mir läuft FHEM ja auf einem Brix - der hat auch noch Ressourcen, insofern schaue ich mal ob ich den missbrauchen kann :)
Hallo,
schau mal nach video.js. Eventuell kann der auch rtsp. Damit hat's bei mir mit .ts und Playlisten .m3u geklappt.
Gruß
Eisix
Zitat von: Andre0909 am 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)
Hallo zusammen, muss mich mal selber zitieren und hoffe jemand weiß Rat. Unregelmäßig wird mir auf meinem Tablet das Kamerabild nicht mehr angezeigt. Es erscheint dann nur ein kleines Symbol oben links und erst nach refresh kommt es wieder aber auch nicht immer .. habe das Gefühl das liegt An Fehlern in Übergabe des User/Passwort. Kennt noch jemand eine andere vorsllem sichere Möglichkeit den Stream angezeigt zu bekommen? Die Kamera läuft bei mir über eine synology. Der Weg über sscam ist wegen Änderungen dort leider auch nicht zukunftssicher :(
Hi,
wenn es am Username und Passwort liegt, schreib die mal Testweise in dir URL rein:
http://username:passwort@192.168.178.222/Streaming/Channels/1/httpPreview
Aber Achtung:
Username und Passwort werden via http im Klartext übermittelt.
Im LAN geht das ggf. -> via Internet ein no-go!
Gruß
Hajo
Hallo,
ich habe ein ähnliches Problem mit dem Livestream einer Netatmo Presence.
Im IE funktioniert das Abspielen, in Chrome oder FireFox nicht. Nach einer Suche bin ich auf eine Erweiterung für Chrome gestossen, sie nennt sich "Native HLS Playback". Jetzt funzt es auch in Chrome, eingebunden habe ich das ganze über einen I-Frame mit der src="chrome-extension://emnphkkblegpebimobpbekeedfgemhof/player.html#https://v0.netatmo.net/restricted/... ".
So wird mir der Player mit Video und Ton im ftui angezeigt.
Gruß
Peter