Autor Thema: Überwachungskamera (RTSP-Stream) in FTUI anzeigen  (Gelesen 16668 mal)

Offline aloz77

  • Full Member
  • ***
  • Beiträge: 471
Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« am: 04 Februar 2016, 17:10:44 »
Ich habe einige (übrigens sehr gute!) Überwachungskameras Hikvision DS-2CD2032-I im Einsatz. Jetzt habe ich mir die Aufgabe gestellt, die Videos in FTUI auf einem Android-Gerät einzubinden. Ich bin ziemlich weit gekommen, die letzten Schwierigkeiten sind offensichtlich lösbar.

Die Kameras können als Substream wahlweise RTSP/H.264 oder MJPEG ausgeben, was beides in einem Android-Browser nicht unproblematisch ist. Vorweg: MJPEG ist auf Desktop easy als <img> einzubinden. Ich habe es jedoch auf Android (egal ob in Webview oder Chrome) auch mit Hilfe von diversen JS-Lösungen nicht zum Laufen gebracht.

Mein erster und komplizierterer Ansatz war RTSP in HLS umzukodieren, um dann in einem HTML5-Video-Tag abspielen zu können. Nach viel Rumprobieren kann ich sagen, das Umkodieren geht einfacher als gedacht. Das erledigt auf Raspi ein einziger FFMPEG-Prozess mit minimaler CPU Auslastung, da das Video schon glücklicherweise H.264 kodiert ist und nur remuxt und in HLS-Scheiben geschnitten werden muss.

mkdir /var/hls
ffmpeg -d -y -i rtsp://[user]:[pass]@[ipcam]:554/Streaming/Channels/2 -c copy -f hls -hls_time 3 -hls_list_size 3 -hls_wrap 10 /var/hls/mystream.m3u8 &

Man braucht jetzt noch einen Web-Server, mit dem man auf die Dateien im Verzeichnis /var/hls zugreifen kann. Ich habe nginx konfiguriert, es geht so ähnlich wahrscheinlich auch mit jedem anderen.

location /hls {
           types {
               application/vnd.apple.mpegurl m3u8;
               video/mp2t ts;
           }
           root /var;
           add_header Cache-Control no-cache;
           add_header Access-Control-Allow-Origin *;
       }

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>
Folgenden Stand habe ich nun auf Android (Nexus 7, CM12.1):

1. Das Video wird abgespielt mit ein paar Sekunden Verzögerung, was bei HLS normal scheint. Das finde ich auch nicht schlimm.

2. In Crome auf Android spielt das Video, wo es soll. Autoplay geht jedoch nicht.

3. In Fully Kiosk Browser auf Android spielt das Video sowohl embedded als auch fullscreen. Auch Autoplay geht.

4. Das Seiteverhältnis im Video stimmt nicht. Es wird 16:9 aufgenommen, aber 4:3 gestreamt. Mit ffmpeg -aspect 16:9 geht das leider nicht zu korrigieren. Auch mit bekannten HTML-Mitteln ließ sich das Aspect Ratio auf Android nicht ändern. Das ist aber ein (spezifisches?) Problem der Hikvision-Kamera.

5. Es geht theoretisch auch mit dem Full-HD-Stream, nur da kommt bei mir ffmpeg (oder das Netzwerk?) an die Grenzen.
« Letzte Änderung: 07 Januar 2017, 10:14:43 von aloz77 »

Offline tomster

  • Sr. Member
  • ****
  • Beiträge: 800
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #1 am: 04 Februar 2016, 17:58:07 »
DAS muss ich unbedingt in den nächsten Tagen ausprobieren. Danke schon Mal im Voraus!

Ich hab mir eine PTZ-Überwachungskamera vom Chinesen geholt, die nur RTSP/H.264 rauslässt. Da dafür ja keine native Browserunterstützung existiert, war's bislang Essig mit der Anbindung an's FTUI. Dass eine Traskodierung soo wenig CPU-Last verursacht hätte ich aber nie gedacht und deshalb schon von vorneherein die Finger davon gelassen.

Offline inesa394

  • Full Member
  • ***
  • Beiträge: 204
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #2 am: 04 Februar 2016, 21:58:33 »
Hallo
Ich habe das bisher per vlc eingebunden Xiomi Ants Cam
was nur per firefox geht.
<div class="top-space">
      <embed type='application/x-vlc-plugin' pluginspage='http://www.videolan.org' version='VideoLAN.VLCPlugin.2'width='360' height='320' id='vlc' loop='yes' autoplay='yes'  img src="rtsp://192.168.2.100:554/ch0.h264" height="130%" wight="100%" border="1">
        </img src>
</div>

Was icht sehr performet ist.
Als Webserver nutze ich lighthttp
Weiss jemand wie man es dort per HLS einbindet ?
alias.url += (
 "/xiomi" => "/home/xiomi/mystream.m3u8
So funktioniert es nicht :-[
Hatte es schon mal mit Zoneminder versucht aber dort wird
für h.264 Version 1.28 benötigt aber nur 1.26 bereitgestellt
beim Raspberry2.
Eine Möglichkeit Version 1.28 zu installieren habe ich bisher
nicht gefunden.Vielleicht weiß da jemand mehr hier.

Offline rumors

  • Jr. Member
  • **
  • Beiträge: 69
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #3 am: 04 Februar 2016, 22:18:07 »
Zitat
für h.264 Version 1.28 benötigt aber nur 1.26 bereitgestellt
beim Raspberry2.
Eine Möglichkeit Version 1.28 zu installieren habe ich bisher
nicht gefunden.Vielleicht weiß da jemand mehr hier

Hast du noch wheezy auf deinem PI2 ?
Kurze suche meinerseits ergab bei Jessie für zoneminder 1.28

Offline inesa394

  • Full Member
  • ***
  • Beiträge: 204
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #4 am: 06 Februar 2016, 11:11:09 »
Hallo
Nein bei mir wird nur Version 1.26 bereitgestellt un die kann mit h264 nicht umgehen aber vieleicht
sind auch meine Paketquellen nicht aktuell..
Eine installation aus den Sourcen ist wohl nicht möglich?



Offline l3skon3

  • Jr. Member
  • **
  • Beiträge: 76
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #5 am: 06 Februar 2016, 16:25:06 »
Hallo,

bei mir kommt leider schon beim Anlegen des Kodierungsprozesses ein Fehler:

root@raspberrypi:/var/hls# ffmpeg version 0.8.17-6:0.8.17-1+rpi1, Copyright (c) 2000-2014 the Libav developers
  built on Mar 25 2015 00:39:58 with gcc 4.6.3
The ffmpeg program is only provided for script compatibility and will be removed
in a future release. It has been deprecated in the Libav project to allow for
incompatible command line syntax improvements in its replacement called avconv
(see Changelog for details). Please use avconv instead.
Unrecognized option 'd'
Failed to set value '-y' for option 'd'


Offline aloz77

  • Full Member
  • ***
  • Beiträge: 471
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #6 am: 06 Februar 2016, 20:34:17 »
Unrecognized option 'd'
Failed to set value '-y' for option 'd'

Lass -d einfach weg. Das sagt dem ffmpeg bei mir lediglich, dass er nicht so viel quatscht.

-d scheint eine nicht dokumentierte Option zu sein. Keine Ahnung, warum dein Build sie nicht kennt.

https://trac.ffmpeg.org/ticket/1698

Offline aloz77

  • Full Member
  • ***
  • Beiträge: 471
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #7 am: 06 Februar 2016, 20:36:50 »
Um das HTML5-Video-Abspielproblem in Android zuverlässig zu lösen, habe ich eine einfache neue Webview-basierte App geschrieben (Fully Fullscreen Browser), die alles macht, was ich will. Sie soll auf Android ab 4.4 laufen. Auch Autoplay bei Videos klappt jetzt dank einem kleinen Trick.
« Letzte Änderung: 06 Februar 2016, 22:33:33 von aloz77 »

Offline kvo1

  • Hero Member
  • *****
  • Beiträge: 1473
  • FHEMonaut
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #8 am: 07 Februar 2016, 21:54:44 »
ich lese hier mal mit , auch ne offene Baustelle bei mir !
RPi1: mit CUL: HM-CC-RT-DN,HM-ES-PMSw1-Pl,HM-LC-BL1-FM,HM-LC-Bl1PBU-FM,HM-LC-SW1-PL2,HM-SCI-3-FM,HM-SEC-SC-2,KFM-Sensor
RPi2: Viessmann(optolink) mit 99_VCONTROL.pm,
Cubietruck: Wheezy / Apache / Owncloud
Cubietruck: Armbian(Jessie) / fhem 5.7 / LMS 7.9
RPi3: (Test) mit 7" Touch  &  HM-MOD-RPI-PCB

Offline l3skon3

  • Jr. Member
  • **
  • Beiträge: 76
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #9 am: 08 Februar 2016, 00:35:27 »
Unrecognized option 'd'
Failed to set value '-y' for option 'd'

Lass -d einfach weg. Das sagt dem ffmpeg bei mir lediglich, dass er nicht so viel quatscht.

-d scheint eine nicht dokumentierte Option zu sein. Keine Ahnung, warum dein Build sie nicht kennt.

https://trac.ffmpeg.org/ticket/1698

Anscheinend liegt es das ich per Paketverwaltung installiert habe mit apt-get install ffmpeg.
Nun hab ich es von der ffmpeg.com seite Installiert und bin ein schritt weiter.

Offline peterk_de

  • Sr. Member
  • ****
  • Beiträge: 683
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #10 am: 08 Februar 2016, 22:55:19 »
Vorweg: MJPEG ist auf Desktop easy als <img> einzubinden. Ich habe es jedoch auf Android (egal ob in Webview oder Chrome) auch mit Hilfe von diversen JS-Lösungen nicht zum Laufen gebracht.

Also das lief und läuft bei mir Out-of-the Box auf 2 verschiedenen Tablets mit Chrome (Samsung Galaxy S 8.4 mit Android 5.0 und einem Acer Iconia Tab mit Android 4.x (grad nicht griffbereit) absolut problemlos und stabil ohne Aufhänger etc. Und zwar mit allen 4 Kameras, die ich in einem "Alarm-"-Pagetab auch alle gleichzeitig anzeige ...

    <div data-type="image"
     data-url="http://192.168.x.x/videostream.cgi?loginuse=admin&loginpas=xxxxx"
     data-size="100%"
     data-refresh="7">
    </div>

Nur die Refresh-Rate hab ich n bissel gedämpft (s.o.), aber das langt mir hin. Keine Abbrüche, nix .. also vielleicht notfalls mal mit gedrosselter Framerate probieren? Die Kameras sind 2xPanasonic WV Sc385 (teuer), 1xInstar IN-3010 (billig) 1xWansview NCL616W (billigstens).
« Letzte Änderung: 08 Februar 2016, 22:57:23 von peterk_de »
2x Intel NUC5i5 -> Proxmox -> Ubuntu 16.04 LTS
FHEM2FHEM-Roomnodes: 6x Raspi, 1x Cubietruck
IOdevs: 3x Homematic, CUL868, HarmonyHub
Frontends: 3x TabletUI/Android-Tablets, Homebridge/Siri, Grafana
Devices: 86x Homematic, 15x Techem, 15x BTLE, >20xLAN/WiFi, 3xSONOS, 2xHomeConnect, Geofency, ...

Offline aloz77

  • Full Member
  • ***
  • Beiträge: 471
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #11 am: 09 Februar 2016, 21:35:23 »
Also das lief und läuft bei mir Out-of-the Box auf 2 verschiedenen Tablets mit Chrome...

Das ist ein sehr interessanter Punkt. Ich habe hier mal tiefer reingeschaut. Es 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.)

Eine Diskussion zu diesem Thema gibt hier: https://code.google.com/p/chromium/issues/detail?id=308999

Edit: Das einbetten eines MJPEG-Video mit Auth im Chromium geht nicht, aber im eigenen Fenster aufrufen geht sogar gut. Also das ist nicht schick, aber es funktioniert:

<div data-type="pagebutton" data-url="http://user:pass@server/Streaming/channels/2/preview" data-icon="fa-video-camera" class="cell"></div>
« Letzte Änderung: 09 Februar 2016, 22:14:54 von aloz77 »

Offline peterk_de

  • Sr. Member
  • ****
  • Beiträge: 683
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #12 am: 09 Februar 2016, 22:10:01 »
Na das könnte man doch dann aber vielleicht lösen ... probier mal, ob du bei dem Webinterface wenn du dich per HTTP-Auth einloggst nen Cookie mit ner Session-ID verpasst bekommst. Falls ja, könnte  danach (im gleichen Browser für eine Weile) der MJPEG-Stream ohne basic auth abrufbar sein... notfalls könnte man auch nen nginx Proxy dazwischenhängen, der das Basicauth anhängt. Spart ggü remuxen sicher nochmal CPU-Load.
2x Intel NUC5i5 -> Proxmox -> Ubuntu 16.04 LTS
FHEM2FHEM-Roomnodes: 6x Raspi, 1x Cubietruck
IOdevs: 3x Homematic, CUL868, HarmonyHub
Frontends: 3x TabletUI/Android-Tablets, Homebridge/Siri, Grafana
Devices: 86x Homematic, 15x Techem, 15x BTLE, >20xLAN/WiFi, 3xSONOS, 2xHomeConnect, Geofency, ...

Offline aloz77

  • Full Member
  • ***
  • Beiträge: 471
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #13 am: 09 Februar 2016, 22:24:12 »
Der Cookie-Trick funktioniert übrigens nicht auf der Cam. Sie fordert auf /Streaming/... immer per 401 die Authentifizierung an.

Die CPU-Last des ffmpeg ist echt minimal (<5%). Ich bin zur Zeit voll von H.264 und HTML5-Video überzeugt und werde daher bei MJPEG nicht tiefer explorieren.

Offline mrfloppy

  • Full Member
  • ***
  • Beiträge: 151
Antw:Überwachungskamera (RTSP-Stream) in FTUI anzeigen
« Antwort #14 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
Fhem 5.8, CCU2, RFXtrx433 E USB, KeyMatic, Div. Thermostate, CUL433, Fhemduino, Temp/luftfeuchesensoren,Fensterkontakte,Intertechno Schalter,.......