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

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

rtsp://cameraipaddress

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

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

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

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>

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

Примерно у вас может быть 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 доступен.

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

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

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

Нашел простое и рабочее решение из официальной документации 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), и другие браузеры (включая браузеры мобильных телефонов) могут не поддерживаться.

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

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

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

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

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)

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

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

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

Попробуйте 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;

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

• https://github.com/AxisCommunications/media-stream-library-js
• https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

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

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

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

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

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

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

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

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

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

Для подобных целей я использую 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).

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

Это окончательный ответ. Вы можете встроить ссылку 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/