[Codebeispiel] Anleitung Kamera Livestream mit HTML5 in SV integrieren

[yachti]

Mir ist es jetzt gelungen Live Streams von Hikvision und JVC Kameras per HTML5 in die SV zu integrieren.

Für die Streamkompatibilität zu HTML5 habe ich ffmpeg installiert und die Kamerastreams auf das Format webm gewandelt.
Getestet mit Firefox und Chrome

HTML5 Browserkompatibilität für <video></video> Tag

Type	IE	Firefox	Safari	Chrome
Ogg (Source type=video/odd)	nein	ab 3.5	nein	ab 5.0+
MPEG 4 (Source type=video/mp4)	ab 9.0	nein	ab 3.0+	ab 5.0+
WebM (Source type=video/webm)	nein	ab 4.0	nein	ab 6.0+

Das mp4 Format und restreaming mit RTSP aus ffmpeg habe ich habe ich nur im VLC erfolgreich testen können. Ich werde bei Gelegenheit weiter versuchen um die Kompatibilität zum Safari zu bekommen. Der Safari unterstützt nur das mp4 Format

Nachfolgend die Anleitung (bei mir unter Debian Jessie installiert)

ffmpeg installieren

Konfiguration ffserver.conf (liegt nach der Installation von ffmpeg in /etc/
Bei mir für 2 Kameras konfiguriert

HTTPPort 8090
RTSPPort 5454
 
 
HTTPBindAddress 0.0.0.0
 
MaxHTTPConnections 2000
 
MaxClients 1000
 
MaxBandwidth 1000
 
CustomLog -
 
 
###EINGANGSTÜR HIKVISION####
<Feed feed.ffm>
 
File /tmp/feed.ffm FileMaxSize=5G
Launch ffmpeg -i rtsp://user:pass@10.x.x.x:554/Streaming/Channels/1 -c copy
 
 #IP Bereich der zugreifen darf###
ACL allow 127.0.0.1
ACL allow 10.x.x.0 10.x.255.255
 
</Feed>
 
<Stream stream.webm>
    Feed feed.ffm
    Format webm
    VideoCodec libvpx
    AVOptionVideo flags +global_header
    AVOptionVideo cpu-used 0
    AVOptionVideo qmin 10
    AVOptionVideo qmax 51
    AVOptionVideo quality good
    AVPresetVideo main
    PreRoll 0
    StartSendOnKey
    VideoBitRate 1000
    VideoSize 480x272
    NoAudio
</Stream>
 
###GARAGE JVC###
<Feed feed2.ffm>
 
File /tmp/feed2.ffm FileMaxSize=5G
Launch ffmpeg -i rtsp://user:pass@10.x.x.x/PSIA/Streaming/channels/2 -c copy
 
ACL allow 127.0.0.1
ACL allow 10.x.x.x 10.x.255.255
 
</Feed>
 
<Stream stream2.webm>
    Feed feed2.ffm
    Format webm
    VideoCodec libvpx
    AVOptionVideo flags +global_header
    AVOptionVideo cpu-used 0
    AVOptionVideo qmin 10
    AVOptionVideo qmax 51
    AVOptionVideo quality good
    AVPresetVideo main
    PreRoll 0
    StartSendOnKey
    VideoFrameRate 5
    VideoBitRate 512
    VideoSize 640x360
    NoAudio
</Stream>

Den ffserver starten mit

ffserver -d -f /etc/ffserver.conf

HTML Code

 
 
{% block content %}
    <div class="block" style="width: 100%;">
 
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
            <div data-role="collapsible" data-collapsed="false">
                <h3>Garage</h3>
 
               <div class="image">
                <video controls>
                    <source src="[URL="http://msr-visu.stemmer-michael.de:8090/stream2.webm"]http://<IP-ffserver>:8090/stream2.webm[/URL]" type="video/webm">
                </video>
               </div>
            </div>
        </div>
        </div>
 
{% endblock %}

Mit den Stream - Einstellungen im ffserver muss jeder selber experimentieren sind teilweise abhängig von den Einstellungen der Kamera.
Ich bin diesbezüglich auch noch am optimieren.
Eine Übersicht der Parameter findet man hier: https://ffmpeg.org/ffmpeg.html

Gruß
Michael