Потокове передавання через RTSP або RTP в HTML5


150

Я будую веб-додаток, який повинен відтворювати RTSP / RTP-потік із сервера http://lscube.org/projects/feng .

Чи підтримує тег відео / аудіо HTML5 підтримку rtsp чи rtp? Якщо ні, що було б найпростішим рішенням? Можливо, перейти на плагін VLC або щось подібне.


відеотег не працює просто з RTSP. І RTSP не реалізовується власне жодним браузером, про який я знаю. Вам або знадобиться плагін, як ви вже зрозуміли. Або скористайтеся webRTC, який підтримується Chrome і Firefox, який використовується на самому світі, і ви зможете використовувати відеотег з певною логікою webRTC. Якщо ви намагаєтесь передавати потокове джерело, наприклад IP-камеру, скористайтесь послугою потокового потоку, як Wowza (або напишіть свою власну), щоб перекодувати з RTSP в webRTC. Це моя порада для вас.
Майкл П

Пропоную задати це питання в StackOverflow для мультимедійних систем
Hamed

Я думаю, ви можете отримати потік з html5, але ви не можете передати кудись.
Салих Карагоз

Чудове запитання, дякую. "Я вважаю, що ми не підтримуємо RTSP, а лише RTMP через videojs-flash." - це відповідь головного технічного медіаплеєра Video.js. Я досліджую тему і не можу знайти гарного рішення для неї.
zhibirc

Можливе використання WebRTC RTCPeerConnection для відтворення RTSP (або правильніше RTP-потоку, який встановлює RTSP) у відеоелементі HTML. Раніше демонстрація була розміщена на веб- сайті webrtc.live555.com . Хитрість полягає в пошуку сервера RTSP, який додав необхідні емханізми WebRTC DTLS та SRTP.
sipwiz

Відповіді:


89

Технічно "так"

(але не дуже ...)

<video>Тег HTML 5 є агностичним протоколом - це не важливо. Ви розміщуєте протокол в srcатрибуті як частину URL-адреси. Наприклад:

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

або можливо

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

Однак, реалізація <video>тегу залежить від браузера. Оскільки для HTML 5 дуже ранні дні, я очікую, що часто змінюється підтримка (або відсутність підтримки).

З специфікації HTML5 W3C ( Відео елемент ):

Користувацькі агенти можуть підтримувати будь-які відео- та аудіокодеки та формати контейнерів


3
ОНОВЛЕННЯ : спробував перший метод у хромі та отримав GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. Здається, що на videoелементах дозволені лише схеми HTTP [S] .
Ян Фото

Невже ви ніколи не передаватимете відео через HTTP і використовуватимете лише такий протокол, як RTP? Це було б страшно повільно через TCP ..
markmnl

7
@markmnl Це сарказм? (Я не можу сказати ... Я таким є довірливим.) Транспорт HTTP є домінуючим методом передачі відео через Інтернет вже кілька років. Youtube, Netflix та ін. Справа не в ефективності, а в простоті, перехресті брандмауера, зручності кеш-сервера тощо
Стю Томпсон,

Netflix передає відео за допомогою HTTP ?! Жоден сарказм просто не здається неефективним способом передавання відео.
markmnl

6
@markmnl Заради нащадків варто згадати, що Netflix використовував потокове передачу з MS Silverlight, але надовго повернувся до нього. Як хтось, хто працює в потоковому режимі з 2001 року, я спочатку був шокований, коли HTTP перейняв. Зараз я п'ю допомогу Kool. У корпоративних мережах, де важлива ефективність, цілеспрямовані протоколи RTP є нормою, особливо коли можуть надавати такі функції, як багатоадресна передача.
Стю Томпсон

55

Дума на це питання, я думаю, справді не відповіла. Ні, ви не можете використовувати відеотег для відтворення потоків rtsp відтепер. Інша відповідь, що стосується посилання на "ніколи" Chromium guy, є дещо оманливою, оскільки пов'язана нитка / відповідь безпосередньо не стосується Chrome, який відтворює rtsp через відеотег. Прочитайте всю пов'язану нитку, особливо коментарі внизу та посилання на інші теми.

Справжня відповідь така: Ні, ви не можете просто поставити відеотег на сторінку html 5 та відтворити rtsp. Для відтворення потокового відео вам потрібно використовувати якусь бібліотеку Javascript (якщо ви не хочете грати в речі з програвачами Flash та Silverlight). {IMHO} За швидкістю обговорення та впровадження відео 5 html 5, різні постачальники фірмових стандартів відео не зацікавлені допомагати в цьому напрямку, тому не враховуйте обіцяну простоту використання відеотеги, якщо браузери не виробники візьміть на себе, щоб якось вирішити проблему ... знову ж таки, мабуть. {/ IMHO}


1
Хороший коментар Гольф. Я хотів також робити те, що Ельбен робить без успіху.
will824

31

Це старе q qourning, але мені довелося це зробити нещодавно, і я домігся чогось працюючого (окрім відповіді, як, наприклад, моя заощадила б мені деякий час): В основному використовуйте ffmpeg для зміни контейнера на HLS, більшість потоків IPCams h264 та деякі основний тип ПКМ, тому використовуйте щось подібне:

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

Потім використовуйте video.js з плагіном HLS. Це добре відтворить пряму трансляцію. Також є другий приклад jsfiddle під другим посиланням).

Примітка. Хоча це не рідна підтримка, вона не вимагає нічого додаткового на фронталі користувача.


Він працював для мене, Videojs я вже використовував, і цей плагін HLS робить живий канал з файлом m3u8 для більшості URL-адрес, якщо не всіх.
Dheeraj Thedijje

Рада, що це допомогло, хоча затримки є трохи більше, але, як здається, не можна багато чого допомогти.
Pawel K

1
Спробуйте це @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 В основному вам потрібно запустити це на своєму сервері (з командного рядка), як Linux box або щось віддалене. Потрібно мати доступ до папки / var / www / html / (у цьому прикладі) з поточної точки зору користувача. Ви також можете спробувати це зробити у Windows за допомогою стека LAMP або Єдиного сервера (набагато лішніше рішення)
Pawel K

1
Це працювало для мене. 'hls_wrap' застаріло в останній ffmpeg. Цей командний рядок я використовував для всіх, хто цікавиться:ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
DanTheMan

19

Chrome ніколи не буде реалізовувати поточну підтримку RTSP.

Принаймні, зі слів розробника Chromium тут :

ми ніколи не будемо додавати для цього підтримку


4
Ну майже. Chrome вже підтримує передачу RTSP, тому він ніколи не збирається додавати підтримку для цього;)
Стефан Штайгер

2
Ні, ви не можете змусити його працювати в хромі, це не працює при спробі використання посилань на youtube rtsp.
IdidntKnewIt

18

У HTML5 є три протоколи потокової передачі / технології:

Пряма трансляція, низька затримка - WebRTC - Websocket

VOD та пряма трансляція, висока затримка - HLS

1. WebRTC

Насправді WebRTC є SRTP (захищений протокол RTP). Таким чином, ми можемо сказати, що відеотег опосередковано підтримує RTP (SRTP) через WebRTC.

Тому для отримання потоку RTP на вашому браузері Chrome, Firefox або іншому HTML5 вам потрібен сервер WebRTC, який доставить потік SRTP до браузера.

2. Вебсокет

Це на основі TCP, але з меншою затримкою, ніж HLS. Знову вам потрібен сервер Websocket.

3. HLS

Найпопулярніший протокол потокового потоку з високою затримкою для VOD (попередньо записане відео).


3
Як ви відтворюєте аудіо + відеопотік за допомогою веб-розетки? Єдиний спосіб для відео - це використання Broadway.js, і це досить гакітно, використовуючи h264 nal потоки.
відзначити гамаш

1
HLS розшифровується як пряма трансляція HTTP, мені цікаво, чому HLS широко використовується для VOD, але не LOD?
shintaroid

1
Ви не можете відтворювати відео у веб-браузері від WebSocket. Принаймні, не з коробки.
Михайло IV

-1, для веб-сокета ... але не з усіх інших причин, про які говорять люди. Ви абсолютно можете відтворити відео, отримуючи дані через веб-сокет. Це тривіально, з розширеннями MediaSource. Вам не варто, тому що ви можете просто використовувати HTTP Progressive!
Бред

8

За допомогою VLC я можу перекодувати прямий RTSP-потік (mpeg4) до потоку HTTP у форматі OGG (Vorbis / Theora). Якість погана, але відеоробота в Chrome 9. Я також протестував транскодування в WEBM (VP8), але це, здається, не працює (VLC має можливість, але я не знаю, чи реально реалізовано зараз. .)

Перший, хто має документ про це, повинен сповістити нас;)


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- це команда VLC, яка спрямовує ваш вхід (наприклад, пристрій захоплення екрана) до заданого вихідного потоку (наприклад, 127.0.0.1:8080/desktop.ogg )
Zsolt

1
а потім ви можете вбудувати це на відео тегом: <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
Zsolt

2
Але продуктивність, на жаль, досить погана і була б чудовою, якби це можна було зробити з контейнером MP4. Більше браузерів AFAIK мають підтримку MP4, ніж для OGG.
Zsolt

1
Це працювало і для мене. Я встановив VLC для потокового аудіо та відео через HTTP протокол по my_ip:portадресою і чим я використовував HTML5 <video>тег , як це: <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
patryk.beza

1

Мої спостереження щодо відео тегів HTML 5 та потоків rtsp (rtp) полягають у тому, що він працює лише з konqueror (KDE 4.4.1, Phonon-backkend встановлений на GStreamer). Я отримав лише відео (без звуку) з потоком H.264 / AAC RTSP (RTP).

Потоки з http://media.esof2010.org/ не працювали з konqueror (KDE 4.4.1, Phonon-бекенд встановлений на GStreamer).


1

Chrome не реалізує підтримку потокового RTSP. Важливий проект, щоб перевірити це WebRTC.

"WebRTC - це безкоштовний, відкритий проект, який надає браузерам та мобільним програмам можливості комунікацій у режимі реального часу (RTC) за допомогою простих API"

Підтримувані веб-переглядачі:

Chrome, Firefox та Opera.

Підтримувані мобільні платформи:

Android та IOS

http://www.webrtc.org/

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.