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


98

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

rtsp://cameraipaddress

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

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

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


1
Я тоже изучаю эту возможность с моими несколькими камерами RTSP и не хочу никаких элементов управления ActiveX. Я хотел бы создать собственный веб-сервер, который веб-страница постоянно извлекает изображение в формате JPEG для отображения на веб-странице. Таким образом, его можно поддерживать в браузерах, таких как Safari, и просматривать на iPhone.
Джерри Додж


@JerryDodge Я попробовал идею с Java WebSocket Server, который каждую секунду отправляет имя файла изображения в виде строки, например «photo1.jpeg». JavaScript в веб-браузере использует имя файла для установки srcатрибута <img>тега HTML. Он работает, но очень медленно, поэтому не похож на потоковое видео. Вы уже пробовали свою идею? Быстро работает?
О Коннор,

@OConnor Для отображения на очень простом уровне с низкой частотой кадров лучше, чтобы клиент потянул, чем сервер отправил. Также рассмотрите TCP против UDP. У них обоих есть свои плюсы и минусы. Клиенту проще всего запросить новое изображение, когда это необходимо.
Джерри Додж

Ответы:


28

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>

2
Для справки, на данный момент VLC Media Player был создан 774 разработчиками.
Джерри Додж

15
Chrome заблокировал плагины npapi после 1 сентября 2015 года. он больше не работает.
user2988855

1
ссылка axvlc.cab мертва
hailinzeng

что делать, если плагин заблокирован, есть другое альтернативное решение?
naveenkumar.s 09

18

Нелегко отобразить поток видео в реальном времени с 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-файл без каких-либо изменений.


1
Это круто. Очень необходимое решение.
Zakir HC

Обновление: по-видимому, сейчас не работает. Показывает следующее: «Эта камера не может быть встроена. Для встраивания переключитесь на стандартный или профессиональный пакет».
muglikar

1
Все, что вам нужно сделать, это обновить камеру до пакета Standard / Professional, и вы сможете встроить камеру в свою веб-страницу.
Adorjan Princz

17

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

  1. Реальный игрок
  2. Quicktime плеер
  3. VLC плеер

Вы можете найти код для встраивания 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 доступен.

2
Последние версии Quicktime Player отказались от поддержки RTSP, начиная с Mavericks.
Майк

totem на linux / ubuntu также поддерживает поток rtsp
Оки Эри Ринальди

8

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

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

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


Это определенно правильный путь. Лучшее управление полосой пропускания, а также перекодирование в формат, подходящий для Интернета, например RTMP для флеш-плеера. Есть ли у кого-нибудь опыт использования любого из вышеперечисленных медиа-серверов и может ли он подробно рассказать о простоте настройки, производительности, задержке и т. Д.? Я пробовал с Red 5, но обнаружил, что некоторые вещи немного сложно заставить работать.
elMarquis

8

Нашел простое и рабочее решение из официальной документации 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>

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


3
имейте в виду, что вы нашли некоторую хрень с windows только activeX, а не "решение", как вы это называете, и оно не будет работать ни на чем другом (настоящие ОС, мобильные телефоны, консоли и т. д.).
nonchip

@nonchip ах, я думаю, у вас есть лучшее решение проблемы. Более того, я тестировал плагин на телефонах Android, так что это не только Windows . В любом случае, мне очень хотелось бы знать, какую кроссплатформенную альтернативу вы имеете в виду для отображения каналов с камер видеонаблюдения.
Swastik Padhi

извините, но это ложь. вставленный вами activex - по определению - только выигрыш. Chrome на Android распознает x-vlc-plugin, игнорирует проприетарный материал и просто нажимает на приложение vlc. также о кросс-платформенных альтернативах, о которых вы упомянули: единственное текущее решение - использовать ffmpeg / avconv / etc на веб-сервере, чтобы перепаковать поток rtsp в http / websocket / webrtc. затем просто добавьте <video>тег, и все готово.
nonchip

1
поток не воспроизводится, возможно, эта проблема (кодовая база) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 не найдена
Вара Прасад

7

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

Который может воспроизводить видеопоток RTSP и отправлять его в WebRTC, перекодировать в RTMP или сохранять на сервере.

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

 - WebRTC в Webrtc (многие ко многим)
 - WebRTC в RTMP
 - RTSP в WebRTC

1
ссылка больше не работает, в любом случае спасибо за информацию.
medskill

ссылка верна @medskill
activedecay 07

5

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)

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


Это действительно отличная статья. Flashphoner выглядит многообещающим решением.
elMarquis

3

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

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


3

Попробуйте 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="'+address+'">';
    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;

Спасибо. Я исследовал вариант quicktime, но у него была очень большая задержка.
elMarquis 04

Это из-за 3-секундного буфера QuickTime ... это меня тоже раздражает ... Эй, если вы найдете что-то еще, что работает, пожалуйста, напишите здесь! До свидания!
Cipi 04

2
Привет, у вас есть ошибка, позже "адрес" будет написан как "asdress". Cheers
Клинтон Грин

3
Почему это написано на JavaScript?
Thomas Bennett

@ Клинтон: Исправлено.
AlastairG

2

Проверьте библиотеку медиапотоков от Axis, которая ретранслирует расширение Media Source.

Они реализуют конвейер, аналогичный Gstreamer в JS, с депаем h264 в нем. Примечание: потоковая передача, потребляемая в js, не является напрямую rtsp, а инкапсулируется в ws: // самой библиотекой на прокси-сервере node.js rtsp-websocket.


2

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

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

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


2

Один из вариантов - использовать какой-то потоковый сервер / шлюз. Я пробовал различные решения (vlc, ffmpeg и некоторые другие), и лучше всего мне подошел сервер Janus WebRTC. Его довольно сложно настроить, и вам придется скомпилировать его из исходников (когда я попробовал, версия в репозиториях Ubuntu не имела поддержки RTSP), но у них есть подробные инструкции по компиляции и документация о том, как все настроить.

Мне удалось получить видео и аудио с 3 камер FullHD в локальной сети с очень небольшой задержкой. Я могу подтвердить, что он работает с камерами Dahua и Hikvision (не уверен, что все модели).

Я использовал Ubuntu Server 18.04 с веб-сервером Apache и Chrome в качестве браузера (по умолчанию он не работал в Firefox, но, возможно, для этого есть обходные пути).


1

Microsoft Mediaplayer может делать все, что вам нужно. Я использую MS Mediaservices сервера 2003/2008 для доставки видео в виде широковещательного и одноадресного потоков. Эта служба может получить поток с камеры и транслировать его. Тогда у вас есть "только" проблема с "отображением" этого изображения во ВСЕХ браузерах на всех операционных системах.

Мой совет: сначала проверьте ОС, а затем загрузите плагин. на винде легко - взять WMP, на другом взять MS Silverligt ...


1

Для подобных целей я использую VLC в качестве сервера распространения. Вы сказали, что сможете поймать видео с помощью VLC? Щелкните правой кнопкой мыши мультимедиа в VLC, выберите «поток» и выберите свои параметры. Вы также можете сделать это с помощью командной строки, что дает вам потенциальные преимущества различных параметров (перекодирование, масштабирование, сжатие, устранение чересстрочной развертки). Вот пакет, который запускает распространение VLC из источника на собственный порт 555 (поэтому вам нужно будет ввести rstp: // myvlcserveripaddress: 555 в параметре src на веб-странице, чтобы получить поток)

cd \
cd C:\Program Files (x86)\VideoLAN\VLC\

vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep

Здесь у вас есть образец веб-страницы, в которую встроен проигрыватель (на основе плагина VLC).


-7

Все вышеперечисленные решения больше не работают или требуют слишком много времени для выяснения.

Это окончательный ответ. Вы можете встроить ссылку rtsp на свой сайт.

Скопируйте приведенный ниже код в свой html-редактор:

<!--- BEGIN PLAYER --->

<!-- webbot bot="HTMLMarkup" startspan ---->

<object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

<param name="autoStart" value="True">

<param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">

<param NAME="ShowControls" VALUE="False">

<param NAME="ShowStatusBar" VALUE="False">

<embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>

<!-- webbot bot="HTMLMarkup" endspan ---->

<!--- end PLAYER --->

Если все это слишком сложно и все еще не решает проблему, позвольте мне помочь вам.

Я сделал это для своих клиентов.

Щелкните здесь http://www.mhcreative.com.my/ipcameratowebsite/


Странно, но все заканчивается внедрением VLC Media Player, потому что VLC считается «медиаплеером по умолчанию» для веб-страниц?
Джерри Додж,

Подождите, это WMP, я предполагаю, что это будет работать только в Windows.
Джерри Додж

2
реализация вашего сайта отличается от того, что вы описали в своем ответе. Вы пользуетесь сервисом click2stream, пожалуйста, измените свой ответ, потому что мы зря теряем время. Вы говорите о других, что не работают, но вашего решения не существует.
stefan2410

3
Странно, что вы пишете: «Это окончательный ответ». А как насчет того, чтобы быть скромным, особенно если вы отказываетесь от ответа с таким недостатком качества?
Pille

1
Этот подход использует активный элемент управления x (для IE 10 и ниже), а затем возвращается к другому плагину для других браузеров. Как уже упоминалось, в большинстве случаев в него встроен медиаплеер VLC. Это не ужасный подход, но заставить пользователей установить плагин всегда будет немного удачно. С другой стороны, если у вас ограниченная аудитория и вы можете диктовать свои настройки, этот подход может подойти.
elMarquis
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.