Überwachungskamera (RTSP-Stream) in FTUI anzeigen

[aloz77]

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.

Code Auswählen Erweitern

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.

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

<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.

[tomster]

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.

[inesa394]

Hallo
Ich habe das bisher per vlc eingebunden Xiomi Ants Cam
was nur per firefox geht.

Code Auswählen Erweitern

<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 ?

Code Auswählen Erweitern

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.

[rumors]

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

[inesa394]

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?

[l3skon3]

Hallo,

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

Code Auswählen Erweitern

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'


[aloz77]

Code Auswählen Erweitern

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

[aloz77]

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.

[kvo1]

ich lese hier mal mit , auch ne offene Baustelle bei mir !

[l3skon3]

Code Auswählen Erweitern

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.

[peterk_de]

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 ...

Code Auswählen Erweitern


    <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).

[aloz77]

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:

Code Auswählen Erweitern

<div data-type="pagebutton" data-url="http://user:pass@server/Streaming/channels/2/preview" data-icon="fa-video-camera" class="cell"></div>

[peterk_de]

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.

[aloz77]

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.

[mrfloppy]

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.

Code Auswählen Erweitern


<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