Überwachungskamera (RTSP-Stream) in FTUI anzeigen

Begonnen von aloz77, 04 Februar 2016, 17:10:44

Vorheriges Thema - Nächstes Thema

Tweak

Zitat von: mrfloppy am 17 Februar 2016, 12:19:40
Habe auch eine Hikvision IPcam.
Ich habe sie bei mir so eingebunden und funktioniert aber am PC nur in Chrome.
Am Tablet mit dem Fully Browser geht es auch in fast Echtzeit.


<li data-row="2" data-col="2" data-sizex="3" data-sizey="3">
        <header>Webcam 1</header>
   <div data-type="image" class="cell" data-url="http://10.0.0.87/Streaming/channels/1/httpPreview?snapShotImageType=JPEG&auth=XXXXXX" data-size="150%" data-refresh="5" >  </div>
</li>


Grüße

Ich wäre ja auch mit dieser Variante glücklich, jedoch wird bei mir im Fully einfach kein Bild angezeigt? Es erscheint nur das kleine img-logo.
Im Firefox funktioniert es.

Woran könnte das liegen?

mfg

aloz77

Wie sieht die URL der Cam aus? Funktioniert's mit Chrome auf Android?

Tweak

Bin jetzt leider nicht vor Ort aber der String ist dem ziemlich ähnlich,
einzigige Unterschied ist, dass mein string so beginnt: http://user:pass@xxx.xxx.xxx.xxx//Streaming/channels/1/snapShotImageType=JPEG


mfg

aloz77

Das mit user:pass habe ich vermutet. Hier ist eine Erklärung, warum das Video in Fully und Chrome nicht geht:

https://forum.fhem.de/index.php/topic,48735.msg407139.html#msg407139

Es gibt AFAIK keinen Workaround.

Tweak

Ok,
ginge eventuell eine andere Variante der Passwortübermittlung? Muss mal nachsehen ob meine Hikvision das anders auch kann.

oli82

Nutze zwar kein FTUI, aber habe das einbinden des Streams der Hikvision in SV versucht und aufgegeben.
Durch die Änderung in Android bekomme ich es einfach nicht zum laufen und bin somit auf MJPEG umgestiegen.
Es gibt einen Ansatz des VLC Players in HTML5, aber da fehlt mir die Zeit und das Know-How um das umzusetzen :(

Nebenbei: Leider nutzt Hikvision nicht den RTSP Standard, was das ganze zusätzlich erschwert...

Tweak

Naja ich könnte bei meiner Hikvision den Substream auf MPEG umstellen. Würde das irgendetwas bringen?

Mir ist gerade eine Idee gekommen, die eventuell sogar funktionieren könnte!
Einzige Vorrausetzung sollte sein, Apache mit ModProxy.

Dadurch erledigt man das Problem mit der Passworteingabe und könnte den Stream oder das Jpeg ohne Passwort zur Verfügung stellen!

mal eben testen...

mfg

Tweak

Die Lösung mit mod_proxy funktioniert tatsächlich!
Wer hätte das gedacht, mein einziges Problem was ich noch habe ist, dass sich das Bild nicht aktualisiert trotz

data-refresh="5"

Gibt es einen anderen Code welcher eine Aktualisierung des Bildes anstößt?

Mfg

setstate

class="nocache" (ich muss das unbedingt zum Default machen ...)

Tweak

Danke damit klappt es nun!

Hier ein kurzes Howto wie das mit dem mod_proxy läuft.

Vorraussetzung ist ein Rechner/Raspi etc. mit Apache.

mod_proxy installieren

apt-get install libapache2-mod-proxy-html

mod_proxy aktivieren & apache2 neustarten

a2enmod proxy
a2enmod proxy_html
a2enmod proxy_http


Damit die Passwort-Eingabe von Apache erledigt wird, müssen die Passwörter eurer Camera gehashed werden daher:

auf dem device eine Datei mit dem Namen pass.py erstellen und ausführbar machen


nano pass.py

code reinkopieren und benutzer und passwort durch eure daten ersetzen

import base64
hash = base64.b64encode(b'admin:12345')
print(hash)



chmod u+x



python pass.py


die Ausgabe ist nun der Hash, diesen kopieren.

Weiter in der apache Konfiguration.

die datei /etc/apache2/sites-enabled/000-default.conf öffnen und folgendes eintragen unter DocumentRoot


        ProxyRequests Off
        <Proxy *>
                Order deny,allow
              Allow from all
        </Proxy>
        ProxyPass /camera/ http://IP-Adresse-der-Kamera/Streaming/channels/1/  <----- Beispiel meiner Hikvision
        ProxyPassReverse /camera/ http://IP-Adresse-der-Kamera/Streaming/channels/1/ <----- Beispiel meiner Hikvision
        <Location /camera/>
        RequestHeader set Authorization "Basic <euer ermittelter Hash>" ohne <>
        </Location>


danach apache2 neuladen


service apache2 reload


Nun sollte das JPEG ohne Passwort wie folgt erreichbar sein:

http:///IP-Adresse-des-Gerätes-wo-Apache-läuft/camera/picture?snapShotImageType=JPEG

Einbinden ins FTUI wie zuvor erwähnt:

<li data-row="2" data-col="2" data-sizex="3" data-sizey="3">
        <header>Webcam 1</header>
   <div data-type="image" class="cell nocache" data-url="http:///IP-Adresse-des-Gerätes-wo-Apache-läuft/camera/picture?snapShotImageType=JPEG" data-size="150%" data-refresh="5" >  </div>
</li>



mfg

bruece-lee

#40
Hallo,

ich habe versucht den mod_proxy einzurichten und scheitere gerade mit folgender Fehlermeldung:

AH00526: Syntax error on line 22 of /etc/apache2/sites-enabled/000-default.conf:
Invalid command 'RequestHeader', perhaps misspelled or defined by a module not included in the server configuration
Action 'configtest' failed.
The Apache error log may have more information.


Hat jemand einen Tipp für mich, was ich tun muss um die Probleme mit dem unbekannten Kommando 'RequestHeader' zu beheben?

Update: Ich konnte die Fehler inzwischen selbst lösen. Zur Info für alle anderen mit ähnlichen Problemen, ich musste noch folgendes machen um alle Fehlermeldungen aufzulösen:


sudo apt-get install libxml2-dev
sudo a2enmod xml2enc

sudo a2enmod headers


Shadow3561

@ Tweak

du kannst zu deiner Anleitung noch folgendes hinzufügen.

Zitatsudo a2enmod headers

Bei mir kannte Apache2 die Anweisung "Request Headers" in der 000-default.conf nicht.
Danach hat es dann geklappt.

Danke für den Workaround

Wiesel

Hallo Zusammen,

ich wollte auch mal meine noch nicht perfekte Lösung hierzu beitragen.

Ich habe nach einer gefühlten Ewigkeit es geschafft mir den Kamerastream meiner Hootoo's HT-IP211HDP nativ im Browser anzeigen zu lassen. Der Stream ist zwar ca 30 sek verzögert und läuft an sich minimal langsamer aber für mal kurz von Unterwegs nachzusehen reicht es vollkommen aus.
Zoneminder hatte bei meinem Raspi 2 eine CPU Auslastung von >70% bei gerade mal ~6 FPS. Jetzt sind es 20FPS und ~4% CPU Last mit ffmpeg.

Mein Lösungsansatz:
- Apache 2.4 mit ReverseProxy (SSL)
- nginx mit "nginx-ts-module"
- ffmpeg
- videojs (web video player)


Apache 2.4 mit ReverseProxy (SSL)

SSLProxyEngine On
SSLProxyVerify none
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off
# SSLProxyCheckPeerExpire off

ProxyRequests Off

# ProxyPass/ProxyPassReverse leitet HTTP requests auf eine andere URL um
ProxyPass /fhem https://localhost:8083/fhem
ProxyPassReverse /fhem https://localhost:8083/fhem





nginx mit "nginx-ts-module"
https://github.com/arut/nginx-ts-module

Achtung gefährliches Halbwissen ;D

Das Modul habe ich so konfiguriert, dass die HLS Dateien in /opt/fhem/www abgelegt werden. Ich weiß das ist nicht gut für die SD-Karte aber weiß keine alternative, da die m3u8 Datei vom Server aus erreichbar sein muss.

Auszug /usr/local/nginx/conf/nginx.conf
http {
    server {
        listen 8000;

        location /publish/ {
            # This directive sets unlimited request body size
            client_max_body_size 0;

            ts;
            ts_hls path=/opt/fhem/www/media/hls segment=20s;
            ts_dash path=/opt/fhem/www/media/dash segment=20s;
        }

        location /play/ {

            types {
                application/x-mpegURL m3u8;
                application/dash+xml mpd;       
                video/MP2T ts;
                video/mp4 mp4;
            }
            alias /opt/fhem/www/media/;
        }
    }
}



ffmpeg
Mittels ffmpeg habe ich nun den RTSP Stream in MPEGTS umgewandelt und zum ngninx-ts-modul geschickt.

ffmpeg -i rtsp://XXX.XXX.XXX.XX:554/11 -bsf:v h264_mp4toannexb -c copy -f mpegts http://localhost:8000/publish/ipcam1




videojs
Zum Wiedergeben des HLS Streams habe ich mich für videojs mit videojs-contrib-hls entschieden. Hierzu habe ich folgende html erstellt.

<!doctype html>
<html>

<head>
  <link href="https://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
  <source
     src="/fhem/www/media/hls/ipcam1/index.m3u8"
     type="application/x-mpegURL">
</video>
<script src="https://vjs.zencdn.net/6.2.7/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.10.1/videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>

</html>



Sonstige Einstellungen

Was ich derzeit händisch mache und noch nicht im Skript eingefügt habe ist die Änderung der Ordnerrechte.
Von dem Modul werden die Ordner automatisch als "(0700) rwx------" angelegt. Diese müssen auf "(0755) rwxr-xr-x" abgeändert werden, da sonst videojs die Datei nicht findet.



Alternative
Vorher hatte ich dies mit dem nginx-rtmp-modul gearbeitet.
Nachteil hier:
- Port 1935 muss offen sein, wenn man von außen zugreifen will
- Wiedergabe im Browser nur mit jwplayer (geht nicht vom Android aus)

Vorteil
- war nur 3-4 sekunden verzögert


Vielleicht konnte ich ja dem ein oder anderen helfen :-)


Grüße Wiesel
Raspi 4 mit FHEM und CUL / Conbee2

E-J-D

Zitat von: aloz77 am 04 Februar 2016, 17:10:44
Jetzt kann man das Video einfach mit dem video-Tag einbinden:

<video src="http://[webserver]/hls/mystream.m3u8" type="application/x-mpegurl" controls autoplay width="640" height="480"></video>
.
.
.
3. In Fully Kiosk Browser auf Android spielt das Video sowohl embedded als auch fullscreen. Auch Autoplay geht.


Im Prinzip funktioniert meine Konfig. Aber wie bekomme ich das Video in FTUI denn in eine so schöne Kachel reingepflanzt :-) ?? Mein Video überlagert meine FTUI in Fully total. Anscheinend kenne ich mich mit der Widget Konfiguration in FTUI noch nicht so aus. Zumindest ist mir ein Video Widget noch nicht untergekommen. Oder habe ich einen grundsätzlichen Denkfehler?!?

tomster

#44
Auch auf die Gefahr hin, dass es niemand liest, weil der Thread schon seit Monaten nicht mehr "beschrieben" wird:

Mir ist eine vermeintliche Transcodierungsmöglichkeit unter die Augen gekommen, die vielleicht eine Alternative zu den bisher genannten Varianten sein kann. Also zumindest wenn jemand noch ein unbenutztes Android-Handy rumliegen hat. Mit der App "tinyCam Pro" kann man angeblich den RTSP-Stream einer Kamera über den in der App eingebauten Webserver nach MJPEG transcodieren:
https://support.actiontiles.com/communities/12/topics/3441-tinycam-pro-android-app-web-server-stream-rtsp-and-wyze-cam-to-actiontiles

Wie performant das geht, konnte ich noch nicht ausprobieren, weil ich erstmal meine RTSP-Kamera und mein altes Smartphone wieder rauskramen (=suchen) und anschließen muss.
Vielleicht hat aber jemand anderes die "Zutaten" schon griffbereiter rumliegen... Wahrscheinlich ginge es (Performance & tatsächliche Funktion vorausgesetzt) auch auf dem Tablet, welches FTUI anzeigt...

--edit--

Ich hab's natürlich nicht ausgehalten und mir die App Mal schnell auf meinem Handy (recht aktuelles Nokia 8) installiert. Eine testweise Einbindung einer Überwachungskamera bei uns im Büro hat einwandfrei funktioniert. Das Bild wird wunderbar als MJPEG im Browser angezeigt. Leider kann ich noch keine genauen Angaben zur Performance machen.