Как я могу отобразить видеопоток RTSP на веб-странице? - PullRequest
Новая
       67

Как я могу отобразить видеопоток RTSP на веб-странице?

79 голосов
/ 11 февраля 2010

У меня есть IP-камера, которая обеспечивает потоковое видео RTSP в реальном времени. Я могу использовать медиаплеер VLC для просмотра канала, указав в нем URL-адрес: 

rtsp://cameraipaddress

Но мне нужно отобразить канал на веб-странице. Поставщик камеры предоставил элемент управления ActiveX, который я получил, но он действительно глючит и заставляет браузер часто зависать.

Кто-нибудь знает какие-нибудь альтернативные видео плагины, которые я мог бы использовать, которые поддерживают RTSP?

Камера может быть настроена для потоковой передачи в формате H264 или MPEG4.

Ответы [ 15 ]

27 голосов
/ 07 июля 2011

VLC также поставляется с плагином ActiveX, который может отображать канал на веб-странице:

http://wiki.videolan.org/ActiveX/HTML

<OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
     codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
     width="640" height="480" id="vlc" events="True">
   <param name="Src" value="rtsp://cameraipaddress" />
   <param name="ShowDisplay" value="True" />
   <param name="AutoLoop" value="False" />
   <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://cameraipaddress" ></embed>
</OBJECT>
17 голосов
/ 19 января 2012

Примерно у вас может быть 3 варианта отображения видеопотока RTSP на веб-странице:

  1. Realplayer
  2. Quicktime Player
  3. VLC player

Вы можете найти код для встраивания activeX через поиск в Google.

Насколько я знаю, существуют ограничения для каждого игрока.

  1. Realplayer изначально не поддерживает видео H.264, необходимо установить плагин QuickTime для Realplayer для декодирования H.264.
  2. Quicktime-плеер не поддерживает транспорт RTP / AVP / TCP, а его транспорт RTP / AVP (UDP) не включает пробивание NAT. Таким образом, единственный возможный транспорт - это туннелирование HTTP при развертывании WAN.
  3. VLC также не поддерживает перфорацию NAT для транспорта RTP / AVP, но доступна транспортировка RTP / AVP / TCP.
16 голосов
/ 30 апреля 2014

Нелегко отобразить потоковое видео с IP-камеры на веб-странице, потому что вам нужна широкая пропускная способность интернета и отличный видеоплеер, совместимый с основными браузерами.

Но, к счастью, есть некоторые облачные сервисы, которые могут сделать эту работу за нас. Одним из лучших является IPCamLive . Эта служба может принимать видеопоток RTSP / H264 с IP-камеры и транслировать его зрителям. IPCamLive имеет компонент проигрывателя Flash / HTML5, который отображает видео на ПК, MAC, планшете или мобильном телефоне. Самое замечательное, что этот сайт генерирует необходимый фрагмент HTML-кода для встраивания живого видео, например: 

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

Так что нам просто нужно скопировать и вставить его в наш HTML-файл без каких-либо изменений.

8 голосов
/ 15 мая 2012

Если вы хотите транслировать RTSP непосредственно на веб-страницу, то, боюсь, ваш единственный вариант - использовать средство управления ActiveX, которое поставляется с камерой. Это прямое подключение IP Cam -> Viewer, и оно действительно должно быть самым быстрым. Не уверен, почему у вас возникли проблемы; Axis ActiveX работает довольно хорошо для меня.

Тем не менее, эта опция не очень эффективно использует пропускную способность, и вы не можете обслуживать несколько одновременных зрителей (большинство IP-камер имеют ограничение на 10 зрителей). Лучше всего загрузить один поток RTSP на потоковый сервер с централизованным размещением, который преобразует ваш поток в RTMP / MPEG-TS и публикует его во Flash-проигрыватели / телевизионные приставки.

Wowza, Erlyvideo, Unreal Media Server, Red5 - ваши варианты.

6 голосов
/ 26 октября 2016

Также вы можете попробовать с открытым исходным кодом WebRTC Media Server Kurento

Может воспроизводить видеопоток RTSP и отправлять его в WebRTC или транскодировать в RTMP или сохранять на сервере.

Мы используем его на производстве для следующих случаев: 

 - WebRTC to Webrtc (many to many)
 - WebRTC to RTMP
 - RTSP to WebRTC
6 голосов
/ 05 июня 2014

Нашел простое и рабочее решение из официальной документации VLC для веб-плагина

https://wiki.videolan.org/Documentation:WebPlugin/

Немного изменил код и заставил его работать. Вот мой код - 

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>

Примечание: В приведенном выше фрагменте используется формат URL rtsp, который поддерживается моей IP-камерой. Таким образом, вы должны получить то же самое для вашей камеры. Вы можете получить эту информацию, обратившись в службу поддержки вашего поставщика. Также имейте в виду, что я тестировал его на Chrome (используя плагин activeX для Chrome) и другие браузеры (включая браузеры мобильных телефонов) может не поддерживаться.

5 голосов
/ 20 сентября 2015

Wowza

  1. Повторная передача RTSP в RTMP (Flash Player) не будет работать с Android Chrome или FF (Flash не поддерживается)
  2. Повторная передача RTSP в HLS

Сервер веб-вызовов (Flashphoner)

  1. Повторная передача RTSP в WebRTC (встроенная функция браузера для Chrome и FF на Android или на рабочем столе)

  2. Повторная передача RTSP в веб-сокеты (iOS Safari и Chrome / FF Desktop)

Взгляните на эту статью .

4 голосов
/ 01 марта 2010

Попробуйте QuickTime Player! Вот мой JavaScript, который генерирует внедренный объект на веб-странице и воспроизводит поток: 

//SET THE RTSP STREAM ADDRESS HERE
var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";

var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
    output += '<param name="src" value="'+adsress+'">';
    output += '<param name="autoplay" value="true">';
    output += '<param name="controller" value="false">';
    output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
    output += '</embed></object>';

    //SET THE DIV'S ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;
3 голосов
/ 27 декабря 2018

Я знаю, что этот пост старый, но я искал что-то очень похожее на днях (просмотрите видеопоток RTSP моей IP-камеры на простой html-странице без каких-либо модных плагинов ActiveX). К счастью, я нашел решение! Он основан на ffmpeg, NodeJS, NGINX (не обязательно, но полезно) и Node Media Server .

Описание в ссылке является подробным и легким для понимания, но у меня все еще были некоторые хитрости, с которыми нужно было разобраться, прежде чем я начал работать (в отношении конечных точек на сервере NodeJS). Я сделал собственный вопрос для него и получил хороший и рабочий ответ .

2 голосов
/ 07 января 2019

Я опубликовал проект на Github, который поможет вам транслировать ip / сетевую камеру на веб-браузер в режиме реального времени без использования плагина, который я внес в проект с открытым исходным кодом в рамках лицензии MIT, который может соответствовать вашим потребностям, вот вам:

Потоковая IP / сетевая камера в веб-браузере с использованием NodeJS

Пока еще нет полного пакета фреймворков, но это кикстарт, который может дать вам возможность продолжить.
Будучи студентом, я надеюсь, что это будет полезно, и, пожалуйста, внесите свой вклад в этот проект.

Страница:
...