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

150

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

Поддерживает ли тег HTML5 видео / аудио поддержку rtsp или rtp? Если нет, то каким было бы самое простое решение? Возможно, перейдите на плагин VLC или что-то в этом роде.

video html streaming rtsp rtp Эльбен Шира
источник
видео тег не "просто работает" с RTSP. И RTSP изначально не реализован ни одним браузером, о котором я знаю. Вам либо понадобится плагин, как вы уже поняли. Или используйте webRTC, который изначально поддерживается Chrome и Firefox, и вы сможете использовать тег видео с некоторой логикой webRTC. Если вы пытаетесь осуществлять потоковую передачу из источника, такого как IP-камера, используйте потоковую службу, такую ​​как Wowza (или напишите свою собственную), для перекодирования из RTSP в webRTC. Это мой совет для вас.
Майкл П
Я предлагаю задать этот вопрос в StackOverflow для мультимедийных систем
Hamed
Я думаю, что вы можете получить поток с html5, но вы не можете транслировать куда-то.
Салих Карагоз
Отличный вопрос, спасибо. «Я считаю, что мы не поддерживаем RTSP, только RTMP через videojs-flash». - таков ответ главного сопровождающего медиаплеера Video.js. Я изучаю тему и не могу найти для нее хорошего решения.
Жибирц
Можно использовать WebRTC RTCPeerConnection для воспроизведения RTSP (или, точнее, потока RTP, который устанавливает RTSP) в элементе видео HTML. Ранее была демонстрация на webrtc.live555.com . Хитрость заключается в том, чтобы найти сервер RTSP, который добавил необходимые механизмы WebRTC DTLS и SRTP.
Сипвиз

Ответы:

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 Aid. В корпоративных сетях, где важна эффективность, специально разработанные протоколы RTP являются нормой, особенно когда они могут предоставлять такие функции, как многоадресная передача.
Стю Томпсон
55

Я думаю, что на этот вопрос ответа не было. Нет, вы не можете использовать видео тег для воспроизведения потоков RTSP на данный момент. Другой ответ, касающийся ссылки на «никогда» Chromium, немного вводит в заблуждение, поскольку связанная ветка / ответ не имеет прямого отношения к Chrome, воспроизводящему rtsp через тег видео. Прочитайте всю связанную ветку, особенно комментарии в самом низу и ссылки на другие темы.

Реальный ответ таков: нет, вы не можете просто поместить видео тег на html 5 страницу и играть в rtsp. Вам нужно использовать какую-то библиотеку Javascript (если только вы не хотите играть с флэш-плеерами и проигрывателями Silverlight) для воспроизведения потокового видео. {IMHO} При скорости обсуждения и реализации видео html 5 различные поставщики проприетарных стандартов видео не заинтересованы в том, чтобы помочь этому продвинуться вперед, поэтому не считайте обещанную простоту использования тега видео, если только браузеры не сделали возьмите это на себя, чтобы как-то решить проблему ... опять же вряд ли. {/ IMHO}

GolfARama
источник
1
Хороший комментарий Гольф. Я также хотел сделать то, что делает Эльбен, без успеха.
will824
31

Это старая проблема, но недавно мне пришлось сделать это самому, и я добился чего-то работающего так (кроме того, что мой ответ сэкономил бы мне немного времени): в основном используйте ffmpeg, чтобы изменить контейнер на HLS, большую часть потока IPCams h264 и некоторые основной тип PCM, поэтому используйте что-то вроде этого:

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
Рад, что это помогло, хотя есть немного больше задержки, но это, как кажется, не может помочь много.
Павел К
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 или что-то удаленное. У вас должен быть доступ к папке / var / www / html / (в этом примере) с точки зрения текущего пользователя. Вы также можете попробовать сделать это в Windows с помощью стека LAMP или Uniform Server (гораздо более простое решение)
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 здесь :

мы никогда не собираемся добавлять поддержку для этого

janesconference
источник
4
Ну, почти. Chrome уже поддерживает потоковую передачу RTSP, поэтому он никогда не собирается добавлять поддержку для этого;)
Stefan Steiger
2
Нет, вы не можете заставить его работать в Chrome, это не работает, когда вы пытаетесь с ссылками 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. ЗОЖ

Самый популярный потоковый протокол с высокой задержкой для VOD (предварительно записанное видео).

ankitr
источник
3
Как вы воспроизводите живой аудио + видео поток с помощью веб-сокета? Единственный способ для видео использовать Broadway.js, и это довольно хакерское использование потоков h264 nal.
Марк Гамаче
1
HLS означает HTTP Live Streaming, мне интересно, почему HLS широко используется для VOD, а не LOD?
shintaroid
1
Вы не можете воспроизводить видео в веб-браузере из WebSocket. По крайней мере, не из коробки.
Михаил IV
-1, для веб-сокета ... но не по всем другим причинам, о которых говорят люди. Вы абсолютно можете воспроизводить видео, получая данные через веб-сокет. Это тривиально, с расширениями MediaSource. Вы не должны, хотя, потому что вы можете просто использовать HTTP Progressive!
Брэд
8

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

Первый, у кого есть документ об этом, должен уведомить нас;)

molokoloco
источник
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">.
Жолт
2
Но производительность, к сожалению, довольно низкая, и было бы неплохо, если бы это можно было сделать и с контейнером MP4. AFAIK больше браузеров поддерживают MP4, чем OGG.
Жолт
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, для фононного бэкенда установлено значение GStreamer). Я получил только видео (без звука) с потоком H.264 / AAC RTSP (RTP).

Потоки с http://media.esof2010.org/ не работали с konqueror (KDE 4.4.1, для фононного бэкенда установлено значение GStreamer).

Renegah
источник
1

В Chrome не реализована поддержка потоковой передачи RTSP. Важный проект, чтобы проверить это WebRTC.

«WebRTC - это бесплатный открытый проект, который предоставляет браузерам и мобильным приложениям функции связи в реальном времени (RTC) через простые API»

Поддерживаемые браузеры:

Chrome, Firefox и Opera.

Поддерживаемые мобильные платформы:

Android и IOS

http://www.webrtc.org/

vrbsm
источник