Як можна відобразити відеопотік RTSP на веб-сторінці?

Question 1

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

rtsp://cameraipaddress

Але мені потрібно відображати стрічку на веб-сторінці. Постачальник камери поставив елемент керування ActiveX, який я працював, але він дійсно глючить і змушує браузер часто зависати.

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

Камеру можна налаштувати для потокової передачі у форматі H264 або MPEG4.

Question 2

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>

Question 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-файл без будь-яких змін.

Question 4

Приблизно у вас є 3 варіанти відображення потоку відео RTSP на веб-сторінці:

Справжній гравець
Швидкий програвач
Програвач VLC

Ви можете знайти код для вставки ActiveX за допомогою пошуку Google.

Наскільки мені відомо, для кожного гравця існують певні обмеження.

Realplayer спочатку не підтримує відео H.264, для встановлення декодування H.264 потрібно встановити плагін швидкого доступу для Realplayer.
Програвач Quicktime не підтримує транспорт RTP / AVP / TCP, а транспорт RTP / AVP (UDP) не включає пробивання отворів NAT. Таким чином, єдиним можливим транспортом є тунелювання HTTP при розгортанні глобальної мережі.
VLC не підтримує пробивання отворів NAT для транспортування RTP / AVP, але доступний транспорт RTP / AVP / TCP.

Question 5

Якщо ви хочете транслювати RTSP безпосередньо на веб-сторінку, я боюся, що єдиним вашим варіантом є використання засобу перегляду елементів керування ActiveX, який постачається з камерою. Це пряме з'єднання IP Cam -> Viewer, і насправді має бути найшвидшим. Не впевнені, чому у вас виникають проблеми; Axis ActiveX для мене працює досить добре.

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

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

Question 6

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

Question 7

Також ви можете спробувати OpenSource WebRTC Media Server Kurento

Який може відтворювати відеопотік RTSP і відправляти його в WebRTC або перекодувати в RTMP або зберігати на сервері.

Ми використовуємо його на виробництві для таких випадків:

 - WebRTC до Webrtc (багато до багатьох)
 - WebRTC до RTMP
 - RTSP на WebRTC

Question 8

Wowza

Повторне потокове передавання RTSP на RTMP (Flash Player) Не працює з Android Chrome або FF (Flash не підтримується)
Повторне потокове передавання RTSP до HLS

Сервер веб-дзвінків (Flashphoner)

Потокове передавання RTSP до WebRTC (функція власного браузера для Chrome та FF на Android або на робочому столі)
Потокове передавання RTSP на веб-сокети (iOS Safari та Chrome / FF Desktop)

Погляньте на цю статтю .

Question 9

Я знаю, що ця публікація застаріла, але днями я шукав щось дуже схоже (перегляньте відео-канал RTSP моєї IP-камери на простій HTML-сторінці без будь-яких вишуканих плагінів ActiveX). Пощастило мені, я знайшов рішення! Він базується на ffmpeg, NodeJS, NGINX (не обов'язково, але корисно) та Node Media Server .

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

Question 10

Спробуйте програвач QuickTime! Ось мій 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;

Question 11

Перевірте бібліотеку медіа-потоків від Axis, яка передає інформацію про розширення Медіа-джерело

Вони реалізують конвеєр, схожий на Gstreamer в JS, з оплатою h264. Примітка: потокове споживання в js не є безпосередньо rtsp, а інкапсульоване в ws: // самою бібліотекою на проксі-сервері node.js rtsp-websocket.

Question 12

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

Потокове передавання IP / мережевої камери у веб-браузері за допомогою NodeJS

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

Question 13

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

Мені вдалося отримати відео та аудіо стрічку з 3 камер FullHD у локальній мережі з дуже невеликими затримками. Я можу підтвердити, що це працює з камерами Dahua та Hikvision (не впевнений, чи всі моделі).

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

Question 14

Microsoft Mediaplayer може зробити все, що вам потрібно. Я використовую MS Mediaservices 2003/2008 Server для передачі відео у форматі Broadcast та Unicast Stream. Ця служба може ОТРИМАТИ потік з камери та транслювати його. Потім у вас є "лише" проблема "відобразити" цю картинку у ВСІХ браузерах на всіх ОС-системах

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

Question 15

Для таких цілей я використовую 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).

Question 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/