Przesyłanie strumieniowe przez RTSP lub RTP w HTML5


150

Tworzę aplikację internetową, która powinna odtwarzać strumień RTSP / RTP z serwera http://lscube.org/projects/feng .

Czy tag wideo / audio HTML5 obsługuje rtsp lub rtp? Jeśli nie, jakie byłoby najłatwiejsze rozwiązanie? Być może upuść do wtyczki VLC lub czegoś w tym stylu.


tag wideo nie „tylko działa” z RTSP. A RTSP nie jest implementowany natywnie przez żadną ze znanych mi przeglądarek. Będziesz albo potrzebował wtyczki, jak już się zorientowałeś. Lub użyj webRTC, który jest natywnie obsługiwany przez Chrome i Firefox, a będziesz mógł używać tagu wideo z pewną logiką webRTC. Jeśli próbujesz przesyłać strumieniowo ze źródła, takiego jak kamera IP, użyj usługi przesyłania strumieniowego, takiej jak Wowza (lub napisz własną), aby transkodować z RTSP do webRTC. To jest moja rada dla Ciebie.
Michael P

Proponuję zadać to pytanie w StackOverflow for Multimedia Systems
Hamed

Myślę, że możesz uzyskać strumień z html5, ale nie możesz nigdzie przesyłać strumieniowo.
Salih Karagoz

Świetne pytanie, dziękuję. „Uważam, że nie obsługujemy RTSP, tylko RTMP przez videojs-flash”. - to odpowiedź głównego opiekuna odtwarzacza multimedialnego Video.js. Badam temat i nie mogę znaleźć dla niego dobrego rozwiązania.
zhibirc

Możliwe jest użycie WebRTC RTCPeerConnection do odtwarzania RTSP (lub bardziej poprawnie strumienia RTP, który konfiguruje RTSP) w elemencie wideo HTML. Wcześniej było demo na webrtc.live555.com . Sztuczka polega na znalezieniu serwera RTSP, który dodał wymagane emchanizmy WebRTC DTLS i SRTP.
sipwiz

Odpowiedzi:


89

Technicznie „tak”

(ale nie naprawdę...)

<video>Znacznik HTML 5 jest niezależny od protokołu - nie obchodzi go to. Umieszczasz protokół w srcatrybucie jako część adresu URL. Na przykład:

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

albo może

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

To powiedziawszy, implementacja <video>tagu zależy od przeglądarki. Ponieważ jest to początek HTML 5, spodziewam się częstych zmian wsparcia (lub braku wsparcia).

Ze specyfikacji HTML5 W3C ( element wideo ):

Programy użytkownika mogą obsługiwać dowolne kodeki wideo i audio oraz formaty kontenerów


3
UPDATE : wypróbowałem pierwszą metodę w chrome i otrzymałem GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Wygląda na to, że na videoelementach dozwolone są tylko schematy HTTP [S] .
Yan Foto

Na pewno nigdy nie przesłałbyś wideo przez HTTP i używałbyś tylko protokołu takiego jak RTP? Byłoby strasznie wolno przez TCP ..
markmnl

7
@markmnl Czy to sarkazm? (Nie potrafię powiedzieć ... w ten sposób jestem naiwny). Transport HTTP jest dominującą metodą przesyłania wideo przez Internet od kilku lat. Youtube, Netflix i in. To nie jest kwestia wydajności, ale raczej prostota, przekrój firewalla, przyjazność dla serwera pamięci podręcznej itp.
Stu Thompson

Netflix przesyła strumieniowo wideo przy użyciu protokołu HTTP ?! Żaden sarkazm nie wydaje się po prostu nieefektywnym sposobem przesyłania strumieniowego wideo.
markmnl

6
@markmnl Ze względu na potomstwo warto wspomnieć, że Netflix przesyłał strumieniowo z MS Silverlight, ale porzucił to jakiś czas temu. Jako osoba korzystająca ze streamingu od 2001 roku byłem zszokowany, gdy zobaczyłem, że HTTP przejmuje kontrolę. Teraz piję Kool Aid. W sieciach korporacyjnych, w których liczy się wydajność, standardem są specjalnie opracowane protokoły RTP, zwłaszcza gdy mogą one zapewniać funkcje takie jak multiemisja.
Stu Thompson

55

Myślę, że duch pytania nie został naprawdę rozwiązany. Nie, od tej pory nie możesz używać tagu wideo do odtwarzania strumieni rtsp. Druga odpowiedź dotycząca linku do „nigdy” w Chromium jest trochę myląca, ponieważ wątek / odpowiedź, do której prowadzi link, nie odnosi się bezpośrednio do tego, że Chrome odtwarza rtsp za pośrednictwem tagu wideo. Przeczytaj cały wątek, do którego prowadzą linki, a zwłaszcza komentarze na samym dole i linki do innych wątków.

Prawdziwa odpowiedź brzmi: Nie, nie możesz po prostu umieścić tagu wideo na stronie HTML 5 i odtwarzać rtsp. Musisz użyć jakiejś biblioteki Javascript (chyba że chcesz grać w gry z odtwarzaczami Flash i Silverlight), aby odtwarzać strumieniowe wideo. {IMHO} Przy tempie, w jakim odbywa się dyskusja i wdrażanie wideo HTML 5, różni dostawcy zastrzeżonych standardów wideo nie są zainteresowani pomaganiem w tym postępie, więc nie licz na obiecaną łatwość użycia tagu wideo, chyba że twórcy przeglądarki weźmie na siebie rozwiązanie problemu ... znowu mało prawdopodobne. {/ IMHO}


1
Dobry komentarz Golf. Chciałem też zrobić to, co robi Elben bez powodzenia.
will824

31

To stara kwestia, ale ostatnio musiałem to zrobić samemu i osiągnąłem coś działającego, więc (poza odpowiedzią taką jak moja zaoszczędziłaby mi trochę czasu): Zasadniczo użyj ffmpeg do zmiany kontenera na HLS, większość strumienia IPCams h264 i trochę podstawowy typ PCM, więc użyj czegoś takiego:

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

Następnie użyj video.js z wtyczką HLS To ładnie odtworzy transmisję na żywo. Pod drugim linkiem znajduje się również przykład jsfiddle).

Uwaga: chociaż nie jest to natywna obsługa, nie wymaga niczego dodatkowego na interfejsie użytkownika.


To zadziałało dla mnie, Videojs, z których już korzystałem, a ta wtyczka HLS sprawia, że ​​kanał na żywo z plikiem m3u8 działa dla większości adresów URL, jeśli nie dla wszystkich.
Dheeraj Thedijje

Cieszę się, że pomogło, jest jednak trochę większe opóźnienie, ale wydaje się, że nie można wiele zaradzić.
Paweł K

1
Spróbuj tego @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
Paweł K

1
@Arter Zasadniczo musisz uruchomić to na swoim serwerze (z linii poleceń), jak Linux lub coś zdalnego. Musisz mieć dostęp do folderu / var / www / html / (w tym przykładzie) z perspektywy bieżącego użytkownika. Można też spróbować zrobić to na Windowsie za pomocą stosu LAMP lub The Uniform Server (dużo szczuplejsze rozwiązanie)
Paweł K.

1
To zadziałało dla mnie. „hls_wrap” jest przestarzały w najnowszym pliku ffmpeg. Użyłem tego wiersza poleceń dla wszystkich zainteresowanych:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan

19

Chrome nigdy nie zaimplementuje obsługi przesyłania strumieniowego RTSP.

Przynajmniej słowami programisty Chromium tutaj :

nigdy nie dodamy do tego wsparcia


4
Cóż prawie. Chrome obsługuje już streaming RTSP, dlatego nigdy nie doda do tego wsparcia;)
Stefan Steiger

2
Nie, nie możesz go uruchomić w Chrome, nie działa podczas próby z linkami rtsp youtube.
IdidntKnewIt

18

Istnieją trzy protokoły / technologie przesyłania strumieniowego w HTML5:

Transmisja na żywo, małe opóźnienia - WebRTC - Websocket

Transmisja na żywo i VOD, duże opóźnienia - HLS

1. WebRTC

W rzeczywistości WebRTC to SRTP (bezpieczny protokół RTP). Można więc powiedzieć, że tag wideo obsługuje RTP (SRTP) pośrednio przez WebRTC.

Dlatego, aby uzyskać strumień RTP w przeglądarce Chrome, Firefox lub innej przeglądarce HTML5, potrzebujesz serwera WebRTC, który dostarczy strumień SRTP do przeglądarki.

2. Websocket

Opiera się na protokole TCP, ale ma mniejsze opóźnienia niż HLS. Ponownie potrzebujesz serwera Websocket.

3. HLS

Najpopularniejszy protokół przesyłania strumieniowego o dużym opóźnieniu dla VOD (wstępnie nagrane wideo).


3
Jak odtwarzać strumień audio i wideo na żywo przy użyciu gniazda sieciowego? Jedynym sposobem na wideo jest użycie Broadway.js i jest to dość hakerskie używanie strumieni h264 nal.
zaznacz gamache

1
HLS to skrót od HTTP Live Streaming. Zastanawiam się, dlaczego HLS jest powszechnie używany do VOD, ale nie LOD?
shintaroid

1
Nie możesz odtwarzać wideo w przeglądarce internetowej z WebSocket. Przynajmniej nie po wyjęciu z pudełka.
Michael IV

-1, dla gniazda sieciowego ... ale nie ze wszystkich innych powodów, o których mówią ludzie. Możesz absolutnie odtwarzać wideo, odbierając dane przez websocket. Jest to trywialne w przypadku rozszerzeń MediaSource. Nie powinieneś jednak, ponieważ możesz od razu użyć protokołu HTTP Progressive!
Brad

8

Dzięki VLC jestem w stanie transkodować strumień RTSP na żywo (mpeg4) na strumień HTTP w formacie OGG (Vorbis / Theora). Jakość jest słaba, ale wideo działa w Chrome 9. Testowałem również z trankodowaniem w WEBM (VP8), ale wydaje się, że nie działa (VLC ma taką opcję, ale nie wiem, czy na razie jest naprawdę zaimplementowana. .)

Pierwszy, który ma dokument na ten temat, powinien nas powiadomić;)


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- to jest polecenie VLC, które przesyła dane wejściowe (np. urządzenie do przechwytywania ekranu) do danego strumienia wyjściowego (np. 127.0.0.1:8080/desktop.ogg )
Zsolt

1
a następnie można umieścić to w tagu wideo: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt,

2
Ale wydajność jest niestety dość słaba i byłaby świetna, gdyby można to zrobić również za pomocą kontenera MP4. AFAIK więcej przeglądarek obsługuje MP4 niż OGG.
Zsolt,

1
Mnie też się udało. Mam ustawiony VLC dla streamingu audio i wideo za pośrednictwem protokołu HTTP na my_ip:portadres niż kiedyś i HTML5 <video>tag tak: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza

1

Moje obserwacje dotyczące znacznika wideo HTML 5 i strumieni rtsp (rtp) są takie, że działa on tylko z programem Konqueror (KDE 4.4.1, zaplecze Phonon ustawione na GStreamer). Mam tylko wideo (bez dźwięku) ze strumieniem H.264 / AAC RTSP (RTP).

Strumienie z http://media.esof2010.org/ nie działały z Konquerorem (KDE 4.4.1, zaplecze Phonon ustawione na GStreamer).


1

Chrome nie obsługuje przesyłania strumieniowego RTSP. Ważny projekt do sprawdzenia WebRTC.

„WebRTC to darmowy, otwarty projekt, który zapewnia przeglądarkom i aplikacjom mobilnym funkcje komunikacji w czasie rzeczywistym (RTC) za pośrednictwem prostych interfejsów API”

Obsługiwane przeglądarki:

Chrome, Firefox i Opera.

Obsługiwane platformy mobilne:

Android i IOS

http://www.webrtc.org/

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.