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

Ответ 1

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

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

• Realplayer
• 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.

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

 - WebRTC to Webrtc (many to many)
 - WebRTC to RTMP
 - RTSP to WebRTC

Ответ 7

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)

Посмотрите на эту статью.

Ответ 8

Попробуйте QuickTime Player! Heres my 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 ID HERE
    document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

Для таких целей, как этот, я использую 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).

Ответ 13

Проверьте библиотеку медиапотока по 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.

Ответ 14

Для того, который я использую, работает следующий 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-сканер и т.д.)

Ответ 15

Наиболее популярным и надежным способом обмена живым видео на веб-сайте является RTMP (с использованием Flash-плеера) или HLS (потоковая передача HTTP-потоком), которая также работает на мобильных телефонах по HTML5, но связана с большой задержкой.

Чтобы преобразовать поток RTSP в RTMP/HLS, необходим сервер ретрансляции (для подключения к потоку RTSP, а затем для RTMP/HLS для веб-клиентов). Wowza Streaming Engine 4.2+ обеспечивает такую ​​функциональность и доступен бесплатно с лицензией разработчика с ограниченным использованием. http://www.wowza.com/streaming/ip-camera-streaming

A script, чтобы управлять этим и публиковать через Интернет, можно найти в http://www.videowhisper.com/?p=PHP-IP-Camera-Stream, а также с бесплатной ограниченной лицензией. Кроме того, онлайн-демонстрация для этого script позволяет публиковать собственные потоки RTSP в Интернете в течение некоторого времени (24 часа).

Ответ 16

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

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