Jak mogę wyświetlić strumień wideo RTSP na stronie internetowej?

Mam kamerę IP, która zapewnia strumień wideo na żywo RTSP. Mogę użyć odtwarzacza multimedialnego VLC, aby wyświetlić kanał, podając mu adres URL:

rtsp://cameraipaddress

Ale muszę wyświetlić kanał na stronie internetowej. Dostawca kamery dostarczył kontrolkę ActiveX, która działa, ale jest naprawdę wadliwa i powoduje częste zawieszanie się przeglądarki.

Czy ktoś zna jakieś alternatywne wtyczki wideo, których mógłbym użyć, które obsługują RTSP?

Kamerę można skonfigurować do przesyłania strumieniowego w formacie H264 lub MPEG4.

VLC jest również wyposażony w wtyczkę ActiveX, która może wyświetlać kanał na stronie internetowej:

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>

Wyświetlanie strumienia wideo na żywo z kamery IP na stronie internetowej nie jest łatwe, ponieważ potrzebujesz szerokiego łącza internetowego i świetnego odtwarzacza wideo, który jest zgodny z większością przeglądarek.

Ale na szczęście istnieją usługi w chmurze, które mogą wykonać to za nas. Jednym z najlepszych jest IPCamLive . Ta usługa może odbierać strumień wideo RTSP / H264 z kamery IP i transmitować go do widzów. IPCamLive ma komponent odtwarzacza wideo Flash / HTML5, który wyświetla wideo na PC, MAC, tablecie lub telefonie komórkowym. Najlepsze jest to, że ta witryna generuje potrzebny fragment kodu HTML do osadzenia wideo na żywo w następujący sposób:

<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>

Musimy więc po prostu skopiować i wkleić go do naszego pliku HTML bez żadnych modyfikacji.

Możesz mieć 3 opcje wyświetlania strumienia wideo RTSP na stronie internetowej:

1. Prawdziwy gracz
2. Odtwarzacz Quicktime
3. Odtwarzacz VLC

Możesz znaleźć kod do osadzenia activeX za pomocą wyszukiwarki Google.

O ile wiem, każdy gracz ma pewne ograniczenia.

1. Realplayer nie obsługuje natywnie wideo H.264, musisz zainstalować wtyczkę quicktime dla Realplayer, aby uzyskać dekodowanie H.264.
2. Odtwarzacz Quicktime nie obsługuje transportu RTP / AVP / TCP, a jego transport RTP / AVP (UDP) nie obejmuje dziurkowania NAT. Dlatego jedynym możliwym transportem jest tunelowanie HTTP przy wdrażaniu sieci WAN.
3. VLC nie obsługuje dziurkowania NAT dla transportu RTP / AVP, ale jest dostępny transport RTP / AVP / TCP.

Jeśli chcesz przesyłać strumieniowo RTSP bezpośrednio na stronę internetową, obawiam się, że jedyną opcją jest użycie przeglądarki kontrolek ActiveX, która jest dostarczana z kamerą. Jest to połączenie bezpośrednie Kamera IP -> Przeglądarka i powinno być naprawdę najszybsze. Nie wiem, dlaczego masz problemy; Axis ActiveX działa dla mnie całkiem nieźle.

Jednak ta opcja nie jest tak naprawdę wydajna pod względem przepustowości i nie można obsługiwać wielu jednoczesnych przeglądarek (większość kamer IP ma ograniczenie do 10 przeglądarek). Lepszą opcją jest przesłanie pojedynczego strumienia RTSP do centralnie hostowanego serwera strumieniowego, który skonwertuje strumień do formatu RTMP / MPEG-TS i opublikuje go w odtwarzaczach Flash / dekoderach.

Wowza, Erlyvideo, Unreal Media Server, Red5 to Twoje opcje.

Znalazłem proste i działające rozwiązanie z oficjalnej dokumentacji VLC dla wtyczki internetowej

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

Zmodyfikowałem trochę kod i uruchomiłem. Oto mój kod

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

Uwaga: powyższy fragment kodu wykorzystuje rtspformat adresu URL obsługiwany przez moją kamerę IP. Musisz więc uzyskać to samo dla swojego aparatu. Możesz uzyskać te informacje, kontaktując się z pomocą techniczną producenta aparatu. Pamiętaj też, że przetestowałem go w Chrome (używając wtyczki activeX dla Chrome), a inne przeglądarki (w tym przeglądarki telefonów komórkowych) mogą nie być obsługiwane.

Możesz także wypróbować opensource WebRTC Media Server Kurento

Który może odtwarzać strumień wideo RTSP i wysyłać go do WebRTC lub transkodować do RTMP lub zapisywać na serwerze.

Używamy go na produkcji w następujących przypadkach:

 - WebRTC na Webrtc (wiele do wielu)
 - WebRTC do RTMP
 - RTSP do WebRTC

Wowza

1. Ponowne przesyłanie strumieniowe RTSP do RTMP (Flash Player) Nie będzie działać z Androidem Chrome lub FF (Flash nie jest obsługiwany)
2. Ponowne przesyłanie strumieniowe RTSP do HLS

Serwer połączeń internetowych (Flashphoner)

1. Ponowne przesyłanie strumieniowe RTSP do WebRTC (natywna funkcja przeglądarki dla Chrome i FF na Androida lub komputer stacjonarny)

2. Ponowne przesyłanie strumieniowe RTSP do Websockets (iOS Safari i Chrome / FF Desktop)

Spójrz na ten artykuł .

Wiem, że ten post jest stary, ale pewnego dnia szukałem czegoś bardzo podobnego (zobacz kanał wideo RTSP mojej kamery IP na prostej stronie html bez żadnych wyszukanych wtyczek ActiveX). Szczęściarz, znalazłem rozwiązanie! Opiera się na ffmpeg, NodeJS, NGINX (nieobowiązkowe, ale przydatne) i Node Media Server .

Opis w linku jest szczegółowy i łatwy do naśladowania, ale nadal musiałem się zająć kilkoma poprawkami, zanim zacząłem działać (dotyczące punktów końcowych na serwerze NodeJS). Zrobiłem własne pytanie i otrzymałem dobrą i działającą odpowiedź .

Wypróbuj odtwarzacz QuickTime! Oto mój JavaScript, który generuje osadzony obiekt na stronie internetowej i odtwarza strumień:

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

Sprawdź bibliotekę strumieni multimediów Axis, która przekazuje rozszerzenie Media Source

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

Implementują potok podobny do Gstreamer w JS z depay h264 w nim. Uwaga: przesyłanie strumieniowe używane w js nie jest bezpośrednio rtsp, ale jest hermetyzowane do ws: // przez samą bibliotekę na serwerze proxy node.js rtsp-websocket.

Opublikowałem projekt na Githubie, który pomaga ci przesyłać strumieniowo IP / kamerę sieciową do przeglądarki internetowej w czasie rzeczywistym bez konieczności używania wtyczki, co przyczyniłem się do projektu open source na licencji MIT, który może być dopasowany do twoich potrzeb.

Przesyłanie strumieniowe z kamery IP / sieciowej w przeglądarce internetowej za pomocą NodeJS

Nie ma jeszcze pełnego pakietu frameworka, ale jest to dobry początek, który może dać ci możliwość pójścia dalej.
Jako student mam nadzieję, że te informacje będą pomocne i proszę o wkład w ten projekt.

Jedną z opcji byłoby użycie jakiegoś serwera / bramy przesyłania strumieniowego. Wypróbowałem różne rozwiązania (vlc, ffmpeg i kilka innych), a tym, który działał najlepiej, był serwer Janus WebRTC. Jest trochę trudny do skonfigurowania i będziesz musiał skompilować go ze źródła (kiedy próbowałem to wersja w repozytoriach Ubuntu nie miała obsługi RTSP), ale mają szczegółowe instrukcje kompilacji i dokumentację jak wszystko skonfigurować.

Udało mi się uzyskać sygnał wideo i audio z 3 kamer FullHD w sieci lokalnej z bardzo niewielkim opóźnieniem. Mogę potwierdzić, że działa z kamerami Dahua i Hikvision (nie jestem pewien, czy wszystkie modele).

Użyłem Ubuntu Server 18.04 z serwerem WWW Apache i Chrome jako przeglądarki (domyślnie nie działał w Firefoksie, ale być może są dla niego obejścia).

Microsoft Mediaplayer może zrobić wszystko, czego potrzebujesz. Używam MS Mediaservices serwera 2003/2008 do dostarczania wideo jako Broadcast i Unicast Stream. Ta usługa może pobrać strumień z kamery i nadać go. Wtedy masz „tylko” problem z „wyświetleniem” tego obrazu we WSZYSTKICH przeglądarkach we wszystkich systemach operacyjnych

Moja rada: najpierw sprawdź system operacyjny, a potem załaduj wtyczkę. na Windowsie jest to łatwe - pobierz WMP, na innych weź MS Silverligt ...

Do celów takich jak ten używam VLC jako serwera redystrybucyjnego. Powiedziałeś, że możesz złapać wideo za pomocą VLC? Kliknij prawym przyciskiem myszy na nośniku w VLC, wybierz „strumień” i wybierz opcje. Możesz to również zrobić za pomocą wiersza poleceń, co daje potencjalne korzyści wynikające z różnych opcji (transkodowanie, skalowanie, kompresja, usuwanie przeplotu). Oto partia, która uruchamia dystrybucję VLC ze źródła do własnego portu 555 (więc będziesz musiał wpisać rstp: // myvlcserveripaddress: 555 w opcji src na stronie internetowej, aby uzyskać strumień)

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

Tutaj masz próbkę strony internetowej, która zawiera odtwarzacz (oparty na wtyczce VLC).

Wszystkie powyższe rozwiązania nie działają już ani zbyt czasochłonne, aby je rozgryźć.

To jest ostateczna odpowiedź. Możesz osadzić łącze rtsp w swojej witrynie.

Skopiuj poniższy kod do swojego edytora 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 --->

Jeśli to wszystko jest zbyt skomplikowane i nadal go nie rozwiązuje, pomogę.

Zrobiłem to dla moich klientów.

Kliknij tutaj http://www.mhcreative.com.my/ipcameratowebsite/