Streaming melalui RTSP atau RTP dalam HTML5

150

Saya sedang membangun aplikasi web yang harus memutar aliran RTSP / RTP dari server http://lscube.org/projects/feng .

Apakah tag video / audio HTML5 mendukung rtsp atau rtp? Jika tidak, apa solusi termudah? Mungkin drop down ke plugin VLC atau sesuatu seperti itu.

Elben Shira
sumber
tag video tidak "hanya berfungsi" dengan RTSP. Dan RTSP tidak diterapkan secara native oleh browser apa pun yang saya ketahui. Anda juga perlu plug in, karena Anda sudah tahu. Atau gunakan webRTC, yang secara asli didukung oleh Chrome, dan Firefox, dan Anda akan dapat menggunakan tag video dengan beberapa logika webRTC. Jika Anda mencoba melakukan streaming dari sumber seperti kamera IP, gunakan layanan streaming seperti Wowza (atau tulis sendiri) untuk transcode dari RTSP ke webRTC. Ini saran saya untuk Anda.
Michael P
Saya sarankan untuk mengajukan pertanyaan ini di StackOverflow untuk Sistem Multimedia
Hamed
Saya pikir Anda bisa mendapatkan streaming dengan HTML5 tetapi Anda tidak bisa streaming ke suatu tempat.
Salih Karagoz
Pertanyaan yang bagus, terima kasih. "Saya yakin kami tidak mendukung RTSP, hanya RTMP melalui videojs-flash." - ini adalah jawaban dari pengelola utama pemutar media Video.js. Saya meriset subjek dan tidak dapat menemukan solusi yang baik untuk itu.
zhibirc
Dimungkinkan untuk menggunakan WebRTC RTCPeerConnection untuk memutar RTSP (atau lebih tepatnya aliran RTP yang diatur RTSP) dalam elemen video HTML. Sebelumnya ada demo di webrtc.live555.com . Triknya adalah menemukan server RTSP yang telah menambahkan emchanisms WebLTC DTLS dan SRTP yang diperlukan.
sipwiz

Jawaban:

89

Secara teknis 'Ya'

(tapi tidak juga ...)

Tag HTML 5 <video>adalah protokol agnostik — tidak peduli. Anda menempatkan protokol di srcatribut sebagai bagian dari URL. Misalnya:

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

atau mungkin

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

Yang mengatakan, implementasi <video>tag adalah spesifik browser. Karena ini adalah hari-hari awal untuk HTML 5, saya berharap sering mengubah dukungan (atau kurangnya dukungan).

Dari spec HTML5 W3C ( Elemen video ):

Agen pengguna dapat mendukung codec video dan audio dan format wadah apa pun

Stu Thompson
sumber
3
UPDATE : mencoba metode pertama di chrome dan dapatkan GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Tampaknya hanya skema HTTP [S] yang diizinkan pada videoelemen.
Yan Foto
Tentunya Anda tidak akan pernah mentransfer video melalui HTTP dan hanya menggunakan protokol seperti RTP? Akan sangat lambat melalui TCP ..
markmnl
7
@markmnl Apakah itu sarkasme? (Saya tidak tahu ... Saya mudah tertipu.) Transport HTTP adalah metode utama untuk mentransfer video melalui web selama beberapa tahun sekarang. Youtube, Netflix, dkk. Ini bukan masalah efisiensi, melainkan kesederhanaan, firewall transversal, keramahan server cache, dll.
Stu Thompson
Netflix stream video menggunakan HTTP ?! Tidak ada sarkasme yang tampaknya merupakan cara yang tidak efisien untuk melakukan streaming video.
markmnl
6
@markmnl Demi anak cucu, ada baiknya menyebutkan bahwa Netflix digunakan untuk streaming dengan MS Silverlight, tetapi membuangnya beberapa waktu lalu. Sebagai seseorang yang sudah streaming sejak tahun 2001, saya awalnya terkejut melihat HTTP mengambil alih. Sekarang saya minum Kool Aid. Dalam jaringan perusahaan, di mana efisiensi penting, protokol yang dibangun secara khusus RTP adalah norma, terutama ketika dapat memberikan fitur seperti multicast.
Stu Thompson
55

Semangat pertanyaan, saya pikir, tidak benar-benar dijawab. Tidak, Anda tidak dapat menggunakan tag video untuk memutar stream rtsp seperti yang sekarang. Jawaban lain mengenai tautan ke Chromium "tidak pernah" agak menyesatkan karena utas / jawaban yang tertaut tidak secara langsung merujuk ke Chrome yang memainkan rtsp melalui tag video. Baca seluruh utas tertaut, terutama komentar di bagian paling bawah dan tautan ke utas lainnya.

Jawaban sebenarnya adalah ini: Tidak, Anda tidak bisa hanya memasang tag video pada halaman html 5 dan memutar rtsp. Anda perlu menggunakan semacam perpustakaan Javascript (kecuali jika Anda ingin bermain-main dengan pemutar flash dan silverlight) untuk memutar video streaming. {IMHO} Pada tingkat diskusi video dan implementasi html 5 berjalan, berbagai vendor standar video berpemilik tidak tertarik untuk membantu ini bergerak maju jadi jangan menghitung kemudahan penggunaan tag video yang dijanjikan kecuali pembuat browser bawa sendiri untuk memecahkan masalah ... sekali lagi, tidak mungkin. {/ IMHO}

GolfARama
sumber
1
Komentar bagus Golf. Saya juga ingin melakukan apa yang Elben lakukan tanpa keberhasilan.
will824
31

Ini adalah qustion lama, tetapi saya harus melakukannya sendiri baru-baru ini dan saya mencapai sesuatu yang berhasil (selain itu tanggapan seperti milik saya akan menghemat waktu): Pada dasarnya gunakan ffmpeg untuk mengubah wadah ke HLS, sebagian besar aliran IPCams h264 dan beberapa tipe dasar PCM, jadi gunakan sesuatu seperti itu:

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

Kemudian gunakan video.js dengan plugin HLS. Ini akan memainkan streaming langsung dengan baik. Ada juga contoh jsfiddle di bawah tautan kedua).

Catatan: meskipun ini bukan dukungan asli tetapi tidak memerlukan tambahan apa pun di antarmuka pengguna.

Pawel K
sumber
Ini bekerja untuk saya, Videojs saya sudah menggunakan dan plugin HLS ini membuat saluran langsung dengan file m3u8 berfungsi untuk sebagian besar url, jika tidak semua.
Dheeraj Thedijje
Senang itu membantu, ada sedikit lebih banyak latensi, tetapi sepertinya tidak banyak membantu.
Pawel K
1
Coba ini @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 Pada dasarnya Anda perlu menjalankan ini di server Anda (dari baris perintah) seperti kotak Linux atau sesuatu yang jauh. Anda harus memiliki akses ke folder / var / www / html / (dalam contoh ini) dari perspektif pengguna saat ini. Anda juga dapat mencoba melakukannya di windows dengan bantuan tumpukan LAMP atau Server Seragam (solusi yang lebih ramping)
Pawel K
1
Ini berhasil untuk saya. 'hls_wrap' sudah tidak digunakan lagi di ffmpeg terbaru. Saya menggunakan baris perintah ini untuk siapa pun yang tertarik:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan
19

Chrome tidak akan pernah menerapkan dukungan streaming RTSP.

Paling tidak, dalam kata-kata pengembang Chromium di sini :

kami tidak akan pernah menambahkan dukungan untuk ini

konferensi janes
sumber
4
Hampir saja. Chrome sudah mendukung streaming RTSP, itu sebabnya dia tidak akan pernah menambahkan dukungan untuk ini;)
Stefan Steiger
2
Tidak, Anda tidak dapat membuatnya bekerja di chrome, Ini tidak berfungsi saat mencoba dengan tautan rtsp youtube.
IdidntKnewIt
18

Ada tiga protokol / teknologi streaming di HTML5:

Streaming langsung, latensi rendah - WebRTC - Websocket

VOD dan Streaming langsung, latensi tinggi - HLS

1. WebRTC

Sebenarnya WebRTC adalah SRTP (secure RTP protocol). Dengan demikian kita dapat mengatakan bahwa tag video mendukung RTP (SRTP) secara tidak langsung melalui WebRTC.

Karenanya untuk mendapatkan aliran RTP di Chrome, Firefox atau browser HTML5 lainnya, Anda memerlukan server WebRTC yang akan mengirimkan aliran SRTP ke browser.

2. Websocket

Ini berbasis TCP, tetapi dengan latensi lebih rendah dari HLS. Sekali lagi Anda memerlukan server Websocket.

3. HLS

Protokol streaming latensi tinggi yang paling populer untuk VOD (video yang direkam sebelumnya).

ankitr
sumber
3
Bagaimana Anda memutar streaming audio + video langsung menggunakan soket web? Satu-satunya cara untuk video menggunakan Broadway.js dan itu cukup berantakan menggunakan stream n264.
tandai gamache
1
HLS adalah singkatan dari HTTP Live Streaming, saya heran mengapa HLS banyak digunakan untuk VOD tetapi tidak untuk LOD?
shintaroid
1
Anda tidak dapat memutar video di browser web dari WebSocket. Setidaknya tidak di luar kotak.
Michael IV
-1, untuk soket web ... tetapi tidak untuk semua alasan lain yang dikatakan orang. Anda benar-benar dapat memutar video dengan menerima data melalui websocket. Ini sepele, dengan Ekstensi MediaSource. Anda seharusnya tidak melakukannya, karena Anda bisa langsung menggunakan HTTP Progressive!
Brad
8

Dengan VLC saya dapat mentranskode aliran RTSP langsung (mpeg4) ke aliran HTTP dalam format OGG (Vorbis / Theora). Kualitasnya buruk tetapi videonya berfungsi di Chrome 9. Saya juga telah menguji dengan trancoding di WEBM (VP8) tetapi sepertinya tidak berfungsi (VLC punya pilihan tetapi saya tidak tahu apakah itu benar-benar diterapkan untuk saat ini. .)

Yang pertama memiliki dokumen tentang ini harus memberi tahu kami;)

molokoloco
sumber
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- ini adalah perintah VLC yang mengalirkan input Anda (mis. perangkat screen capture) ke aliran output yang diberikan (mis. 127.0.0.1:8080/desktop.ogg )
Zsolt
1
dan kemudian Anda dapat menanamkan ini pada tag video: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt
2
Namun kinerjanya sayangnya sangat buruk dan akan lebih bagus jika bisa juga dilakukan dengan wadah MP4. AFAIK lebih banyak browser yang memiliki dukungan untuk MP4 daripada OGG.
Zsolt
1
Ini juga berhasil untuk saya. Aku telah menetapkan VLC untuk streaming audio dan video melalui HTTP protokol pada my_ip:portalamat dan daripada saya menggunakan HTML5 <video>tag seperti ini: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza
1

Pengamatan saya mengenai tag video HTML 5 dan stream rtsp (rtp) adalah, bahwa itu hanya bekerja dengan konqueror (KDE 4.4.1, Phonon-backend diatur ke GStreamer). Saya hanya mendapatkan video (tanpa audio) dengan aliran H.264 / AAC RTSP (RTP).

Streaming dari http://media.esof2010.org/ tidak berfungsi dengan konqueror (KDE 4.4.1, Phonon-backend diatur ke GStreamer).

Renegah
sumber
1

Chrome tidak menerapkan dukungan streaming RTSP. Proyek penting untuk memeriksanya WebRTC.

"WebRTC adalah proyek terbuka dan gratis yang menyediakan kapabilitas browser dan aplikasi seluler dengan Komunikasi Real-Time (RTC) melalui API sederhana"

Browser yang didukung:

Chrome, Firefox, dan Opera.

Platform Seluler yang didukung:

Android dan iOS

http://www.webrtc.org/

vrbsm
sumber