Как я могу отобразить видеопоток RTSP на веб-странице?
У меня есть IP-камера, которая обеспечивает потоковое видео RTSP. Я могу использовать медиаплеер VLC для просмотра канала, предоставив ему URL:
rtsp://cameraipaddress
Но мне нужно отобразить канал на веб-странице. Поставщик камеры предоставил элемент управления ActiveX, с которым я начал работать, но он действительно глючит и заставляет браузер часто зависать.
Кто-нибудь знает какие-либо альтернативные видео плагины, которые я мог бы использовать, которые поддерживают RTSP?
Камера может быть настроена для потоковой передачи в H264 или MPEG4.
19 ответов
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>
Примерно у вас может быть 3 варианта отображения видеопотока RTSP на веб-странице:
- Реальный игрок
- Quicktime Player
- VLC плеер
Вы можете найти код для встраивания activeX через поиск Google.
Насколько я знаю, существуют некоторые ограничения для каждого игрока.
- Realplayer изначально не поддерживает видео H.264, вы должны установить плагин quicktime для Realplayer, чтобы добиться декодирования H.264.
- Quicktime Player не поддерживает транспорт RTP/AVP/TCP, а его транспорт RTP/AVP (UDP) не включает дырокол NAT. Таким образом, единственный возможный транспорт - это туннелирование HTTP при развертывании WAN.
- VLC также не поддерживает перфорацию NAT для транспорта RTP / AVP, но транспорт RTP/AVP/TCP доступен.
Нелегко отображать потоковое видео с 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 без каких-либо изменений.
Также вы можете попробовать с открытым исходным кодом WebRTC Media Server Kurento
Который может воспроизводить видеопоток RTSP и отправлять его в WebRTC или транскодировать в RTMP или сохранять на сервере.
Мы используем его на производстве для следующих случаев:
- WebRTC в Webrtc (многие ко многим) - WebRTC для RTMP - RTSP to WebRTC
Я знаю, что этот пост старый, но я искал что-то очень похожее на днях (просмотрите видеопоток RTSP моей IP-камеры на простой HTML-странице без каких-либо модных плагинов ActiveX). К счастью, я нашел решение! Он основан на ffmpeg, NodeJS, NGINX (не обязательно, но полезно) и Node Media Server.
Описание в ссылке является подробным и простым для понимания, но у меня все еще были некоторые хитрости, с которыми нужно было разобраться, прежде чем я начал работать (в отношении конечных точек на сервере NodeJS). Я сделал для него собственный вопрос и получил хороший и рабочий ответ.
Если вы хотите транслировать 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%3AWebPlugin/
Немного изменил код и заставил его работать. Вот мой код
<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), и другие браузеры (включая браузеры мобильных телефонов) могут не поддерживаться.
Попробуйте 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;
- Повторная передача RTSP в RTMP(Flash Player) не будет работать с Android Chrome или FF (Flash не поддерживается)
- Повторная передача RTSP в HLS
Сервер веб-вызовов (Flashphoner)
Повторная передача RTSP в WebRTC (встроенная функция браузера для Chrome и FF на Android или на рабочем столе)
Повторная передача RTSP в веб-сокеты (iOS Safari и Chrome/FF Desktop)
Посмотрите на эту статью.
Один из вариантов - использовать какой-то потоковый сервер / шлюз. Я пробовал различные решения (vlc, ffmpeg и некоторые другие), и лучше всего мне подошел сервер Janus WebRTC. Его довольно сложно настроить, и вам придется скомпилировать его из исходников (когда я попробовал, версия в репозиториях Ubuntu не имела поддержки RTSP), но у них есть подробные инструкции по компиляции и документация о том, как все настроить.
Мне удалось получить видео и аудио с 3 камер FullHD в локальной сети с очень небольшой задержкой. Я могу подтвердить, что он работает с камерами Dahua и Hikvision (не уверен, что все модели).
Я использовал Ubuntu Server 18.04 с веб-сервером Apache и Chrome в качестве браузера (по умолчанию он не работал в Firefox, но, возможно, для этого есть обходные пути).
Я опубликовал проект на Github, который поможет вам транслировать ip / сетевую камеру в веб-браузер в режиме реального времени без использования плагина, который я внес в проект с открытым исходным кодом в рамках лицензии MIT, который может соответствовать вашим потребностям, вот и вы:
Потоковая IP/ сетевая камера в веб-браузере с использованием NodeJS
Пока нет полного пакета фреймворков, но это кикстарт, который может дать вам возможность продолжить.
Будучи студентом, я надеюсь, что это поможет, и, пожалуйста, внесите свой вклад в этот проект.
Я бы предложил использовать пакет npm rtsp-relay. Для меня это сработало очень хорошо, с задержкой всего 0,5 секунды, когда источник rtsp находился в той же сети.
Лично я справился с задержкой всего от 800 до 600 мс при потоковой передаче по тому же локальному соединению. Вы можете найти документацию на странице GitHub
Проверьте библиотеку медиапотоков по 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:// самой библиотекой на прокси-узле rtsp-websocket node.js.
Вы можете использовать RTSPtoWeb , добавить свой поток и просмотреть его на веб-странице.
Microsoft Mediaplayer может сделать все, что вам нужно. Я использую MS Mediaservices 2003 / 2008 Server для доставки видео в качестве широковещательной и одноадресной передачи. Эта служба может получить поток с камеры и транслировать его. Чем "только" проблема "отобразить" эту картинку во ВСЕХ браузерах на всех ОС-системах
Мой совет: сначала проверьте ОС, затем загрузите плагин. на винде легко - возьми 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).
Самый популярный и надежный способ поделиться живым видео на веб-сайте - это RTMP (с использованием Flash-проигрывателя) или HLS (HTTP Live Streaming), который также работает на мобильных устройствах через HTML5, но требует больших задержек.
Для преобразования потока RTSP в RTMP/HLS требуется сервер ретрансляции (для подключения к потоку RTSP и затем предоставления RTMP/HLS веб-клиентам). Wowza Streaming Engine 4.2+ предоставляет такую функциональность и доступна бесплатно с ограниченной лицензией разработчика. http://www.wowza.com/streaming/ip-camera-streaming
Сценарий для управления этим и публикации через Интернет доступен по адресу http://www.videowhisper.com/?p=PHP-IP-Camera-Stream, также с бесплатной ограниченной лицензией. Кроме того, онлайн-демонстрация этого сценария позволяет публиковать ваши собственные потоки RTSP в сети в течение некоторого времени (24 часа).
Для того, который я использую, работает следующий URL:
rtmp://<IP_address>/flash/11:<username>:<password>
например:
rtmp://192.168.1.10:1935/flash/11:admin:admin
Вам нужно найти IP вашего IP CAM, имя пользователя и пароль.
Приведенный выше URL при вводе в браузер обнаружит его поток и откроет медиаплеер. Правильный URL-адрес для вашей марки можно найти, войдя в найденный вами IP-адрес. (Используйте сканер, такой как Nmap, IP-сканер и т. Д.)
Все вышеперечисленные решения не работают больше или слишком много времени, чтобы выяснить.
Это окончательный ответ. Вы можете встроить ссылку 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/