Streaming über RTSP oder RTP in HTML5

149

Ich erstelle eine Web-App, die einen RTSP / RTP-Stream von einem Server http://lscube.org/projects/feng wiedergeben soll .

Unterstützt das HTML5-Video- / Audio-Tag RTSP oder RTP? Wenn nicht, was wäre die einfachste Lösung? Vielleicht fallen Sie zu einem VLC-Plugin oder so etwas.

video html streaming rtsp rtp Elben Shira
quelle
Video-Tag funktioniert nicht "nur" mit RTSP. Und RTSP wird von keinem mir bekannten Browser nativ implementiert. Sie benötigen entweder ein Plug-In, wie Sie bereits herausgefunden haben. Oder verwenden Sie webRTC, das von Chrome nativ unterstützt wird, und Firefox, und Sie können das Video-Tag mit einer webRTC-Logik verwenden. Wenn Sie versuchen, von einer Quelle wie einer IP-Kamera zu streamen, verwenden Sie einen Streaming-Dienst wie Wowza (oder schreiben Sie Ihren eigenen), um von RTSP zu webRTC zu transkodieren. Dies ist mein Rat für Sie.
Michael P
Ich schlage vor, diese Frage in StackOverflow für Multimedia-Systeme
Hamed
Ich denke, Sie können mit HTML5 streamen, aber Sie können nicht irgendwo streamen.
Salih Karagoz
Gute Frage, danke. "Ich glaube, wir unterstützen kein RTSP, nur RTMP über videojs-flash." - Dies ist eine Antwort des Hauptbetreuers von Video.js Media Player. Ich erforsche das Thema und kann keine gute Lösung dafür finden.
Zhibirc
Es ist möglich, eine WebRTC-RTCPeerConnection zu verwenden, um einen RTSP (oder genauer gesagt den von RTSP eingerichteten RTP-Stream) in einem HTML-Videoelement abzuspielen. Zuvor gab es eine Demo unter webrtc.live555.com . Der Trick besteht darin, einen RTSP-Server zu finden, der die erforderlichen WebRTC-DTLS- und SRTP-Emchanismen hinzugefügt hat.
Sipwiz

Antworten:

89

Technisch 'Ja'

(aber nicht wirklich...)

Das HTML 5- <video>Tag ist protokollunabhängig - es ist ihm egal. Sie platzieren das Protokoll im srcAttribut als Teil der URL. Z.B:

<video src="rtp://myserver.com/path/to/stream">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

oder vielleicht

<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

Das heißt, die Umsetzung der <video> Tags ist jedoch browserspezifisch. Da HTML 5 noch in den Anfängen steckt, erwarte ich häufig wechselnde Unterstützung (oder mangelnde Unterstützung).

Aus der HTML5-Spezifikation des W3C ( Das Videoelement ):

Benutzerprogramme unterstützen möglicherweise alle Video- und Audio-Codecs und Containerformate

Stu Thompson
quelle
3
UPDATE : habe die erste Methode in Chrome ausprobiert und bekommen GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Es scheint, dass nur HTTP [S] -Schemata für videoElemente zulässig sind.
Yan Foto
Sicherlich würden Sie niemals ein Video über HTTP übertragen und nur ein Protokoll wie RTP verwenden? Es wäre schrecklich langsam über TCP ..
markmnl
7
@markmnl Ist das Sarkasmus? (Ich kann nicht sagen ... ich bin auf diese Weise leichtgläubig.) Der HTTP-Transport ist seit einigen Jahren die dominierende Methode für die Übertragung von Videos über das Internet. Youtube, Netflix et al. Es geht nicht um Effizienz, sondern um Einfachheit, Firewall-Transversal, Cache-Server-Freundlichkeit usw.
Stu Thompson
Netflix überträgt Videos über HTTP?! Kein Sarkasmus scheint nur eine ineffiziente Möglichkeit zu sein, Videos zu streamen.
Markmnl
6
@markmnl Aus Gründen der Nachwelt ist es erwähnenswert, dass Netflix früher mit MS Silverlight gestreamt hat, dies aber vor einiger Zeit eingestellt hat. Als jemand, der seit 2001 im Streaming ist, war ich zunächst schockiert, als HTTP übernahm. Jetzt trinke ich die Kool Aid. In Unternehmensnetzwerken, in denen es auf Effizienz ankommt, sind speziell entwickelte Protokolle RTP die Norm, insbesondere wenn sie Funktionen wie Multicast bereitstellen können.
Stu Thompson
55

Ich denke, der Geist der Frage wurde nicht wirklich beantwortet. Nein, Sie können derzeit kein Video-Tag zum Abspielen von RTSP-Streams verwenden. Die andere Antwort bezüglich des Links zu "nie" von Chromium Guy ist etwas irreführend, da sich der verknüpfte Thread / die verknüpfte Antwort nicht direkt auf Chrome bezieht, das RTSP über das Video-Tag spielt. Lesen Sie den gesamten verknüpften Thread, insbesondere die Kommentare ganz unten und Links zu anderen Threads.

Die eigentliche Antwort lautet: Nein, Sie können nicht einfach ein Video-Tag auf eine HTML 5-Seite setzen und RTSP abspielen. Sie müssen eine Javascript-Bibliothek verwenden (es sei denn, Sie möchten mit Flash- und Silverlight-Playern spielen), um Streaming-Videos abzuspielen. {IMHO} Angesichts der Geschwindigkeit, mit der die Diskussion und Implementierung von HTML 5-Videos voranschreitet, sind die verschiedenen Anbieter von proprietären Videostandards nicht daran interessiert, diesen Fortschritt voranzutreiben. Zählen Sie also nicht auf die versprochene Benutzerfreundlichkeit des Video-Tags, es sei denn, die Browser-Hersteller nimm es auf dich, das Problem irgendwie zu lösen ... wieder unwahrscheinlich. {/ IMHO}

GolfARama
quelle
1
Guter Kommentar Golf. Ich wollte auch das tun, was Elben ohne Erfolg tut.
Will824
31

Dies ist eine alte Frage, aber ich musste es kürzlich selbst tun und habe etwas erreicht, das funktioniert (abgesehen von einer Antwort wie meiner, die mir einige Zeit sparen würde): Verwenden Sie im Grunde genommen ffmpeg, um den Container in HLS zu ändern, die meisten IPCams-Streams h264 und einige Grundtyp des PCM, verwenden Sie also so etwas:

ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8

Verwenden Sie dann video.js mit dem HLS-Plugin Dies wird den Live-Stream gut wiedergeben. Es gibt auch ein jsfiddle-Beispiel unter dem zweiten Link.

Hinweis: Obwohl dies keine native Unterstützung ist, ist im Benutzer-Frontend nichts extra erforderlich.

Pawel K.
quelle
Es hat bei mir funktioniert, Videojs, die ich bereits verwendet habe, und dieses HLS-Plugin lässt den Live-Kanal mit m3u8-Datei für die meisten URLs funktionieren, wenn nicht für alle.
Dheeraj Thedijje
Ich bin froh, dass es geholfen hat, es gibt zwar etwas mehr Latenz, aber das kann anscheinend nicht viel geholfen werden.
Pawel K
1
Versuchen Sie dies @Cesar:ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
Pawel K
1
@Arter Grundsätzlich müssen Sie dies auf Ihrem Server (über die Befehlszeile) wie Linux Box oder etwas Remote ausführen. Sie müssen aus der aktuellen Benutzerperspektive Zugriff auf den Ordner / var / www / html / haben (in diesem Beispiel). Sie können auch versuchen, dies unter Windows mit Hilfe eines LAMP-Stacks oder The Uniform Server (viel schlankere Lösung) zu tun
Pawel K
1
Das hat bei mir funktioniert. 'hls_wrap' ist im neuesten ffmpeg veraltet. Ich habe diese Befehlszeile für alle Interessierten verwendet:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan
19

Chrome wird niemals RTSP-Streaming unterstützen.

Zumindest mit den Worten eines Chromium-Entwicklers hier :

Wir werden niemals Unterstützung dafür hinzufügen

janesconference
quelle
4
Naja fast. Chrome unterstützt bereits RTSP-Streaming, deshalb wird er dies niemals unterstützen;)
Stefan Steiger
2
Nein, Sie können es nicht in Chrome zum Laufen bringen. Es funktioniert nicht, wenn Sie es mit YouTube-RTSP-Links versuchen.
IdidntKnewIt
17

In HTML5 gibt es drei Streaming-Protokolle / -Technologien:

Live-Streaming, geringe Latenz - WebRTC - Websocket

VOD- und Live-Streaming, hohe Latenz - HLS

1. WebRTC

Tatsächlich ist WebRTC SRTP (Secure RTP Protocol). Wir können also sagen, dass Video-Tags RTP (SRTP) indirekt über WebRTC unterstützen.

Um einen RTP-Stream auf Ihrem Chrome, Firefox oder einem anderen HTML5-Browser zu erhalten, benötigen Sie einen WebRTC-Server, der den SRTP-Stream an den Browser übermittelt.

2. Websocket

Es basiert auf TCP, hat jedoch eine geringere Latenz als HLS. Auch hier benötigen Sie einen Websocket-Server.

3. HLS

Das beliebteste Streaming-Protokoll mit hoher Latenz für VoD (aufgezeichnetes Video).

ankitr
quelle
3
Wie spielt man einen Live-Audio- und Videostream mit einem Web-Socket ab? Der einzige Weg für Videos ist die Verwendung von Broadway.js und das ist ziemlich hacky mit h264 nal Streams.
Mark Gamache
1
HLS steht für HTTP Live Streaming. Ich frage mich, warum HLS häufig für VOD verwendet wird, aber nicht für LOD.
Shintaroid
1
Sie können kein Video im Webbrowser von WebSocket abspielen. Zumindest nicht sofort einsatzbereit.
Michael IV
-1, für Web-Socket ... aber nicht aus all den anderen Gründen, die die Leute sagen. Sie können ein Video absolut abspielen, indem Sie die Daten über den Websocket empfangen. Dies ist bei MediaSource-Erweiterungen trivial. Sie sollten dies jedoch nicht tun, da Sie HTTP Progressive direkt verwenden können!
Brad
8

Mit VLC kann ich einen Live-RTSP-Stream (mpeg4) in einen HTTP-Stream im OGG-Format (Vorbis / Theora) umcodieren. Die Qualität ist schlecht, aber das Video funktioniert in Chrome 9. Ich habe auch mit einer Trancodierung in WEBM (VP8) getestet, aber es scheint nicht zu funktionieren (VLC hat die Option, aber ich weiß nicht, ob es jetzt wirklich implementiert ist. .)

Der erste, der ein Dokument dazu hat, sollte uns benachrichtigen;)

Molokoloco
quelle
2
"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep- Dies ist ein VLC-Befehl, der Ihre Eingabe (z. B. Bildschirmaufnahmegerät) an einen bestimmten Ausgabestream (z. B. 127.0.0.1:8080/desktop.ogg ) überträgt.
Zsolt
1
und dann können Sie dies in ein Video-Tag einbetten : <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt
2
Aber die Leistung ist leider ziemlich schlecht und wäre toll, wenn es auch mit MP4-Container möglich wäre. AFAIK mehr Browser unterstützen MP4 als OGG.
Zsolt
1
Es hat auch bei mir funktioniert. Ich habe VLC für das Streamen von Audio und Video über das HTTP-Protokoll auf der my_ip:portAdresse eingestellt und dann das HTML5- <video>Tag wie folgt verwendet : <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza
1

Meine Beobachtungen bezüglich der HTML 5-Video-Tag- und RTSP-Streams (RTP) lauten, dass es nur mit Konqueror funktioniert (KDE 4.4.1, Phonon-Backend auf GStreamer eingestellt). Ich habe nur Video (kein Audio) mit einem H.264 / AAC RTSP (RTP) -Stream.

Die Streams von http://media.esof2010.org/ funktionierten nicht mit konqueror (KDE 4.4.1, Phonon-Backend auf GStreamer eingestellt).

Renegah
quelle
1

Chrome implementiert kein RTSP-Streaming. Ein wichtiges Projekt, um es WebRTC zu überprüfen.

"WebRTC ist ein kostenloses, offenes Projekt, das Browsern und mobilen Anwendungen RTC-Funktionen (Real-Time Communications) über einfache APIs bietet."

Unterstützte Browser:

Chrome, Firefox und Opera.

Unterstützte mobile Plattformen:

Android und IOS

http://www.webrtc.org/

vrbsm
quelle