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

98

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.

elMarquis
źródło
1
Badałem również tę możliwość z moimi wieloma kamerami RTSP i nie chcę żadnych formantów ActiveX. Chciałbym zbudować niestandardowy serwer sieciowy, z którego strona internetowa stale pobiera obraz JPEG do wyświetlenia na stronie internetowej. W ten sposób może być obsługiwany w przeglądarkach, takich jak Safari i przeglądany na iPhonie.
Jerry Dodge
podzbiór: z <video:>elementem: stackoverflow.com/questions/1735933/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
@JerryDodge Wypróbowałem pomysł z serwerem Java WebSocket Server, który co sekundę wysyła nazwę pliku obrazu jako ciąg znaków, np. „Zdjęcie1.jpeg” do przeglądarki internetowej. JavaScript w przeglądarce internetowej używa nazwy pliku do ustawienia srcatrybutu <img>tagu HTML. Działa, ale bardzo wolno, przez co nie wygląda jak wideo przesyłane strumieniowo na żywo. Czy wypróbowałeś już swój pomysł? Czy to działa szybko?
O Connor
@OConnor W przypadku wyświetlania na bardzo podstawowym poziomie z niską liczbą klatek na sekundę najlepiej jest ściągać przez klienta niż serwer. Weź również pod uwagę TCP i UDP. Obaj mają swoje wady i zalety. Najłatwiej jest po prostu poprosić klienta o nowy obraz, kiedy zajdzie taka potrzeba.
Jerry Dodge

Odpowiedzi:

28

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>
Russell
źródło
2
Dla przypomnienia, od tego momentu VLC Media Player został zbudowany przez 774 programistów.
Jerry Dodge
15
Chrome zablokował wtyczki npapi po 1 września 2015 r. już nie działa.
user2988855
1
Link do axvlc.cab nie działa
hailinzeng
co zrobić, jeśli wtyczka jest zablokowana jakieś inne dostępne rozwiązanie alternatywne?
naveenkumar.s
18

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.

Adorjan Princz
źródło
1
To jest niesamowite. Bardzo potrzebne rozwiązanie.
Zakir HC
Aktualizacja: Najwyraźniej teraz nie działa. Pokazuje to: „Nie można osadzić tej kamery. Przełącz się na pakiet Standard lub Professional w celu osadzenia”.
muglikar
1
Wszystko, co musisz zrobić, to zaktualizować kamerę do pakietu Standard / Professional, a będziesz mógł osadzić kamerę na swojej stronie internetowej.
Adorjan Princz
17

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.
ciphor
źródło
2
W ostatnich wersjach programu Quicktime Player porzucono obsługę RTSP, począwszy od Mavericks.
Mike
totem na linux / ubuntu obsługuje również strumień rtsp
Oki Erie Rinaldi
8

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.

user1390208
źródło
To jest zdecydowanie droga. Lepsze zarządzanie przepustowością, a także transkodowanie do formatu odpowiedniego dla sieci, np. RTMP dla odtwarzacza flash. Czy ktoś ma doświadczenie w korzystaniu z któregokolwiek z powyższych serwerów multimedialnych i może omówić łatwość konfiguracji, wydajność, opóźnienia itp.? Próbowałem z Red 5, ale okazało się, że niektóre rzeczy są nieco trudne do wykonania.
elMarquis
8

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.

Swastyk Padhi
źródło
3
pamiętaj, że w niektórych Windows znalazłeś tylko bzdury ActiveX, a nie "rozwiązanie", jak to nazywasz, i nie będzie działać na niczym innym (prawdziwe systemy operacyjne, telefony komórkowe, konsole itp.).
nonchip
@nonchip ah cóż, uważam, że masz lepsze rozwiązanie problemu. Co więcej, przetestowałem wtyczkę również na telefonach z Androidem, więc nie jest to tylko Windows . Zresztą, naprawdę chciałbym wiedzieć, jaką międzyplatformową alternatywę masz na myśli, aby wyświetlać kanały z kamer CCTV.
Swastik Padhi
przepraszam, ale to kłamstwo. osadzony aktywnyx jest - zgodnie z definicją - tylko wygrany. to, co robi Chrome na Androida, to rozpoznaje x-vlc-plugin, ignoruje zastrzeżone rzeczy i po prostu przesyła intencję aplikacji vlc. także o alternatywach międzyplatformowych, o których wspominasz: obecnie jedynym rozwiązaniem byłoby użycie ffmpeg / avconv / etc na serwerze sieciowym w celu przepakowania strumienia rtsp do http / websocket / webrtc. następnie po prostu dodaj <video>tag i gotowe.
nonchip,
1
strumień nie jest odtwarzany, może to problem (podstawa kodu) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 nie znaleziono
Vara Prasad
7

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
Denis Lisitskiy
źródło
1
link już nie działa, dzięki za informację.
medskill
link jest zarchiwizowany @medskill
activedecay
5

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

ankitr
źródło
To naprawdę świetny artykuł. Flashphoner wygląda obiecująco.
elMarquis
3

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

Hauns TM
źródło
3

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;
Cipi
źródło
Dzięki. Zbadałem opcję quicktime, ale było z nią naprawdę złe opóźnienie.
elMarquis
Dzieje się tak z powodu 3-sekundowego bufora QuickTime ... to też mnie denerwuje ... Hej, jeśli znajdziesz coś, co działa, napisz tutaj! PA!
Cipi
2
Cześć, masz błąd, „adres” jest później zapisywane jako „adres”. Pozdrawiam
Clinton Green
3
Dlaczego jest to napisane w JavaScript?
Thomas Bennett
@Clinton: Naprawiono.
AlastairG
2

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

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.

loreii
źródło
2

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.

Phok Chanrithisak
źródło
2

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

ilmix
źródło
1

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

uwe
źródło
1

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

Grigorij Korniłow
źródło
-7

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/

Mazlan Halim
źródło
Dziwne, kończy się osadzaniem VLC Media Player, czy to dlatego, że VLC jest uważany za „domyślny odtwarzacz multimediów” dla stron internetowych?
Jerry Dodge
Poczekaj, to WMP, zakładam, że działałoby to tylko w systemie Windows.
Jerry Dodge
2
implementacja Twojej witryny nie jest tym, co opisałeś w swojej odpowiedzi. Korzystasz z usługi click2stream, zmień odpowiedź, ponieważ tracimy czas. Mówisz o innych, które nie działają, ale Twoje rozwiązanie nie istnieje.
stefan2410
3
Dziwne, że piszesz: „To jest ostateczna odpowiedź”. A co z byciem pokornym, zwłaszcza gdy odrzuca odpowiedź z takim brakiem jakości?
Pille
1
To podejście wykorzystuje aktywną kontrolkę x (dla IE 10 i starszych), a następnie przywraca inną wtyczkę dla innych przeglądarek. Jak wspomniano, wydaje się, że w większości przypadków osadzony jest odtwarzacz multimedialny VLC. To nie jest straszne podejście, ale skłonienie użytkowników do zainstalowania wtyczki zawsze będzie trochę chybione. Z drugiej strony, jeśli masz ograniczoną publiczność i możesz dyktować jej konfigurację, takie podejście może być w porządku.
elMarquis