150

Bir sunucudan RTSP / RTP akışını oynatması gereken bir web uygulaması geliştiriyorum ~~http://lscube.org/projects/feng~~ .

HTML5 video / ses etiketi rtsp veya rtp'yi destekliyor mu? Değilse, en kolay çözüm ne olurdu? Belki bir VLC eklentisine veya bunun gibi bir şeye bırakın.

— Elben Shira
kaynak

video etiketi RTSP ile "çalışmaz". Ve RTSP bildiğim herhangi bir tarayıcı tarafından yerel olarak uygulanmıyor. Daha önce de düşündüğünüz gibi bir eklentiye ihtiyacınız olacaktır. Veya Chrome ve Firefox tarafından yerel olarak desteklenen webRTC'yi kullanın; video etiketini bazı webRTC mantığıyla kullanabilirsiniz. IP kamera gibi bir kaynaktan akış yapmaya çalışıyorsanız, RTSP'den webRTC'ye geçmek için Wowza gibi bir akış hizmeti kullanın (veya kendinizinkini yazın). Bu sana tavsiyem.

— Michael P

Bu soruyu Multimedya Sistemleri için StackOverflow

— Hamed'de

Ben html5 ile akışı alabilirsiniz düşünüyorum ama bir yere akışı olamaz.

— Salih Karagoz

Harika soru, teşekkür ederim. "RTSP'yi desteklemediğimize inanıyorum, sadece videojs-flash ile RTMP." - Bu Video.js medya yürütücüsünün ana sorumlusunun bir cevabıdır. Konuyu yeniden araştırıyorum ve bunun için iyi bir çözüm bulamıyorum.

— zhibirc

Bir HTML video öğesinde bir RTSP'yi (veya RTSP'nin ayarladığı RTP akışını) oynatmak için bir WebRTC RTCPeerConnection kullanmak mümkündür. Daha önce webrtc.live555.com adresinde bir demo vardı . Hile, gerekli WebRTC DTLS ve SRTP emchanizmlerini ekleyen bir RTSP sunucusu bulmak olacaktır.

— sipwiz

89

Teknik olarak 'Evet'

(ama gerçekten değil...)

HTML 5'in <video>etiketi protokol agnostiktir - umursamaz. Protokolü srcURL'nin bir parçası olarak özniteliğe yerleştirirsiniz. Örneğin:

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

ya da belki

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

Bununla birlikte, <video>etiketin uygulanması tarayıcıya özgüdür. HTML 5 için ilk günler olduğundan, sık sık değişen destek (veya destek eksikliği) bekliyorum.

W3C'nin HTML5 spesifikasyonundan ( Video öğesi ):

Kullanıcı aracıları video ve ses kodeklerini ve kapsayıcı biçimlerini destekleyebilir

— Stu Thompson
kaynak

3

GÜNCELLEME : kromdaki ilk yöntemi denedi ve aldım GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Öğelerde yalnızca HTTP [S] şemalarına izin verildiği anlaşılıyor video.

— Yan Foto

Kesinlikle bir videoyu HTTP üzerinden aktarmazsınız ve yalnızca RTP gibi bir protokol kullanır mısınız? TCP üzerinden çok yavaş olurdu ..

— markmnl

7

@markmnl Bu alaycı mı? (Söyleyemem ... Bu şekilde safkanım.) HTTP aktarımı, videoyu birkaç yıl boyunca web üzerinden aktarmanın en baskın yöntemidir. Youtube, Netflix, vd. Bu bir verimlilik meselesi değil, basitlik, güvenlik duvarı enine, önbellek sunucusu dostu vb.

— Stu Thompson

Netflix HTTP kullanarak video akışı yapıyor ?! Hiçbir alaycılık video akışı için verimsiz bir yol gibi görünmüyor.

— markmnl

6

@markmnl Postity uğruna, Netflix'in MS Silverlight ile yayın yaptığını, ancak bir süre önce terk ettiğini belirtmek gerekir. 2001'den beri akışta olan biri olarak, başlangıçta HTTP'nin ele geçirildiğini görünce şok oldum. Şimdi Kool Yardımını içiyorum. Verimliliğin önemli olduğu kurumsal ağlarda, RTP, özellikle çok noktaya yayın gibi özellikler sunabiliyorsa, RTP'nin amaca yönelik protokolleri normdur.

— Stu Thompson

55

Sorunun ruhu, bence, gerçekten cevaplanmadı. Hayır, şu andan itibaren rtsp akışlarını oynatmak için video etiketi kullanamazsınız. Chromium'un "asla" bağlantısına ilişkin diğer cevap, bağlantılı konu / cevap doğrudan video etiketi aracılığıyla rtsp oynayan Chrome'a atıfta bulunmadığı için biraz yanıltıcıdır. Bağlantılı konunun tamamını, özellikle en alttaki yorumları ve diğer konulara bağlantıları okuyun.

Gerçek cevap şudur: Hayır, bir html 5 sayfasına video etiketi koyamaz ve rtsp oynatamazsınız. Akış videosu oynatmak için bir tür Javascript kütüphanesi kullanmanız gerekir (flash ve silverlight oynatıcılarla bir şeyler oynamak istemiyorsanız). {IMHO} html 5 video tartışması ve uygulaması söz konusu olduğunda, çeşitli özel video standartları sağlayıcıları bu işlemin ilerlemesine yardımcı olmakla ilgilenmemektedir, bu nedenle tarayıcı yapmadıkça video etiketinin vaat edilen kullanım kolaylığını saymayın sorunu bir şekilde çözmek için kendileri üstlenin ... tekrar, muhtemelen değil. {/ IMHO}

— GolfARama
kaynak

1

İyi yorum Golf. Elben'ın yaptıklarını başarılı olmadan da yapmak istedim.

— will824

31

Bu eski bir qustion, ama son zamanlarda kendim yapmak zorunda kaldım ve çalışan bir şey elde ettim (benimki gibi cevap vermenin yanı sıra bana biraz zaman kazandıracak): Temelde ffmpeg'i kullanarak konteyner HLS'ye değiştirdi, IPCams akışının çoğu h264 ve bazı temel tip PCM, bu yüzden böyle bir şey kullanın:

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

Sonra HLS eklentisi ile video.js kullanın. Bu canlı akışı güzel bir şekilde oynatır.

Not: Bu yerel bir destek olmasa da, kullanıcı ön ucunda fazladan bir şey gerektirmez.

— Pawel K
kaynak

Benim için çalıştı, Videojs i zaten kullanıyordu ve bu HLS eklentisi, m3u8 dosyasıyla canlı kanalı, hepsi olmasa da, çoğu url için çalışır hale getiriyor.

— Dheeraj Thedijje

Yardımcı oldu sevindim, ama biraz daha fazla gecikme var, ama göründüğü gibi çok yardımcı olamaz.

— Pawel K

1

Bunu @Cesar deneyin:

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 Temel olarak bunu sunucunuzda (komut satırından) Linux kutusu veya uzak bir şey gibi çalıştırmanız gerekir. Geçerli kullanıcı perspektifinden / var / www / html / klasörüne (bu örnekte) erişiminizin olması gerekir. Ayrıca bir LAMP yığını veya Tekdüzen Sunucu (çok daha yalın bir çözüm) yardımıyla pencerelerde yapmaya çalışabilirsiniz

— Pawel K

1

Bu benim için çalıştı. 'hls_wrap' en son ffmpeg'de kullanımdan kaldırıldı. Bu komut satırını ilgilenen herkes için kullandım:

ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]

— DanTheMan

19

Chrome asla RTSP akışını desteklemez.

En azından burada bir Chromium geliştiricisinin sözleriyle :

bunun için asla destek eklemeyeceğiz

— janesconference
kaynak

4

Neredeyse. Chrome zaten RTSP akışını destekliyor, bu yüzden bunun için asla destek eklemeyecek;)

— Stefan Steiger

2

Hayır, chrome'da çalıştıramazsınız, youtube rtsp bağlantıları ile çalışırken çalışmıyor.

— IdidntKnewIt

18

HTML5'te üç akış protokolü / teknolojisi vardır:

Canlı akış, düşük gecikme süresi - WebRTC - Websocket

VOD ve Canlı akış, yüksek gecikme süresi - HLS

1. WebRTC

Aslında WebRTC SRTP'dir (güvenli RTP protokolü). Böylece video etiketinin dolaylı olarak WebRTC üzerinden RTP'yi (SRTP) desteklediğini söyleyebiliriz.

Bu nedenle, Chrome, Firefox veya başka bir HTML5 tarayıcınızda RTP akışını almak için, SRTP akışını tarayıcıya gönderecek bir WebRTC sunucusuna ihtiyacınız vardır.

2. Web Soketi

TCP tabanlıdır, ancak HLS'den daha düşük gecikme süresine sahiptir. Yine bir Websocket sunucusuna ihtiyacınız var.

3. HLS

VOD için en popüler yüksek gecikmeli akış protokolü (önceden kaydedilmiş video).

— ankitr
kaynak

3

Web soketi kullanarak canlı ses + video akışını nasıl oynatırsınız? Videonun tek yolu Broadway.js kullanmaktır ve bu h264 nal akışları kullanmak için oldukça hacky.

— mark gamache

1

HLS HTTP Canlı Akışı anlamına gelir, HLS'nin neden VOD için yaygın olarak kullanıldığını, ancak LOD için kullanılmadığını merak ediyorum?

— shintaroid

1

Web tarayıcısında WebSocket'ten video oynatamazsınız. En azından kutunun dışında değil.

— Michael IV

-1, web soketi için ... ama insanların söylediği diğer tüm nedenlerden dolayı değil. Verileri websocket üzerinden alarak kesinlikle bir video oynatabilirsiniz. MediaSource Extensions ile bu önemsizdir. Olmamalısınız, çünkü sadece HTTP Progressive'ı kullanabilirsiniz!

— Brad

8

VLC ile canlı bir RTSP akışını (mpeg4) bir OGG formatında bir HTTP akışına (Vorbis / Theora) dönüştürebilirim. Kalitesi düşük ama video Chrome 9'da çalışıyor. Ayrıca WEBM'de (VP8) bir kodlama ile test ettim, ancak çalışmıyor gibi görünüyor (VLC seçeneği var ama gerçekten şimdilik uygulanmış olup olmadığını bilmiyorum. .)

Bu konuda ilk dokümanı bize bildirmeli;)

— molokoloco
kaynak

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

- bu, girişinizi (örn. ekran yakalama cihazı) belirli bir çıkış akışına (örn. 127.0.0.1:8080/desktop.ogg ) aktaran VLC komutudur

— Zsolt

1

ve sonra bir video etiketinin üzerinde bu yerleştirebilirsiniz: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.

— Zsolt

2

Ancak performans maalesef oldukça zayıf ve MP4 konteyneri ile de yapılabilirse harika olurdu. AFAIK daha fazla tarayıcı, OGG için olduğundan MP4 desteğine sahiptir.

— Zsolt

1

Benim için de çalıştı. Ben HTTP üzerinden konulu protokolü hem ses ve video akışı için VLC kurdum my_ip:portadrese ve HTML5 eskisinden daha <video>böyle etiketi: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.

— patryk.beza

1

HTML 5 video etiketi ve rtsp (rtp) akışlarıyla ilgili gözlemlerim, yalnızca konqueror ile çalıştığıdır (KDE 4.4.1, Phonon arka ucu GStreamer olarak ayarlanmıştır). Sadece H.264 / AAC RTSP (RTP) akışı olan video (ses yok) aldım.

Http://media.esof2010.org/ adresinden gelen akışlar konqueror ile çalışmadı (KDE 4.4.1, Phonon-backend GStreamer olarak ayarlandı).

— Renegah
kaynak

1

Chrome, RTSP akışını desteklemiyor. WebRTC'yi kontrol etmek için önemli bir proje.

"WebRTC, tarayıcılara ve mobil uygulamalara basit API'ler aracılığıyla Gerçek Zamanlı İletişim (RTC) özellikleri sağlayan ücretsiz, açık bir projedir"

Desteklenen Tarayıcılar:

Chrome, Firefox ve Opera.

Desteklenen Mobil Platformlar:

Android ve IOS

http://www.webrtc.org/

— vrbsm
kaynak

HTML5'te RTSP veya RTP üzerinden akış

Teknik olarak 'Evet'