Bir web sayfasında bir RTSP video akışını nasıl görüntüleyebilirim?

98

Canlı bir RTSP video akışı sağlayan bir ip kameram var. Feed'i URL ile sağlayarak görüntülemek için VLC media player'ı kullanabilirim:

rtsp://cameraipaddress

Ancak beslemeyi bir web sayfasında görüntülemem gerekiyor. Kamera sağlayıcısı, çalıştığım bir ActiveX kontrolü sağladı, ancak bu gerçekten hatalı ve tarayıcının sık sık takılmasına neden oluyor.

RTSP'yi destekleyen, kullanabileceğim alternatif video eklentileri bilen var mı?

Kamera, H264 veya MPEG4'te yayın yapacak şekilde yapılandırılabilir.

video-streaming  rtsp 
— elMarquis
kaynak
1
Bu olasılığı birden fazla RTSP kameramla da araştırıyorum ve herhangi bir ActiveX kontrolü istemiyorum. Web sayfasının web sayfasında görüntülenmek üzere sürekli olarak bir JPEG görüntüsü aldığı özel bir web sunucusu oluşturmak istiyorum. Bu şekilde, Safari gibi tarayıcılarda desteklenebilir ve bir iPhone'da görüntülenebilir.
— Jerry Dodge
alt küme: <video:>öğeyle: stackoverflow.com/questions/1735933/…
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
@JerryDodge Görüntü dosyası adını her saniye web tarayıcısına "photo1.jpeg" gibi bir dizge olarak gönderen Java WebSocket Sunucusu ile fikir denedim. Web tarayıcısındaki JavaScript , HTML etiketinin srcniteliğini ayarlamak için dosya adını kullanır <img>. Çalışıyor ama çok yavaş, canlı bir video akışı gibi görünmüyor. Fikrinizi zaten denediniz mi? Hızlı çalışıyor mu?
— O Connor
@OConnor Çok temel düzeyde düşük kare hızına sahip görüntü için, sunucunun itmesindense istemcinin çekmesi en iyisidir. Ayrıca TCP ve UDP'yi düşünün. İkisinin de artıları ve eksileri var. Sadece müşterinin ihtiyaç duyduğu anda yeni bir görüntü talep etmesi en kolayıdır.
— Jerry Dodge

Yanıtlar:

28

VLC ayrıca, beslemeyi bir web sayfasında görüntüleyebilen bir ActiveX eklentisiyle birlikte gelir:

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
kaynak
2
Kayıt için, bu noktadan itibaren, VLC Media Player 774 geliştirici tarafından oluşturuldu.
— Jerry Dodge
15
1 eylül 2015'ten sonra chrome npapi eklentilerini engelledi. artık çalışmıyor.
— user2988855
1
axvlc.cab bağlantısı öldü
— hailinzeng
Eklenti mevcut başka bir alternatif çözüm engellenmişse ne yapmalı?
— naveenkumar.s
18

Bir IP kameradan canlı video akışını bir web sayfasında görüntülemek kolay değildir çünkü geniş internet bant genişliğine ve büyük tarayıcılarla uyumlu harika bir video oynatıcıya ihtiyacınız vardır.

Ama neyse ki bu işi bizim için yapabilen bazı bulut tabanlı hizmetler var. En iyilerden biri IPCamLive'dır . Bu hizmet, bir IP Kameradan RTSP / H264 video akışını alabilir ve bunu izleyicilere yayınlayabilir. IPCamLive, videoyu PC, MAC, tablet veya mobil cihazlarda gösterecek Flash / HTML5 video oynatıcı bileşenine sahiptir. En iyisi, bu sitenin canlı videoyu bunun gibi gömülmesi için gerekli HTML pasajını oluşturmasıdır:

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

Bu yüzden herhangi bir değişiklik yapmadan kopyalayıp HTML dosyamıza yapıştırmamız gerekiyor.

— Adorjan Princz
kaynak
1
Bu harika. Çok ihtiyaç duyulan bir çözüm.
— Zakir HC
Güncelleme: Görünüşe göre şimdi çalışmıyor. Bunu gösterir: "Bu kamera katıştırılamaz. Gömme için Standart veya Profesyonel pakete geçin."
— muglikar
1
Tek yapmanız gereken, kameranızı Standart / Profesyonel pakete yükseltmek ve böylece kameranızı web sayfanıza yerleştirebileceksiniz.
— Adorjan Princz
17

Bir web sayfasında RTSP video akışını görüntülemek için kabaca 3 seçeneğiniz olabilir:

  1. Gerçek oyuncu
  2. Quicktime oynatıcı
  3. VLC oynatıcı

ActiveX'i yerleştirmek için kodu google arama yoluyla bulabilirsiniz.

Bildiğim kadarıyla her oyuncu için bazı sınırlamalar var.

  1. Realplayer, H.264 videoyu yerel olarak desteklemez, Realplayer'ın H.264 kod çözme işlemini gerçekleştirmesi için bir quicktime eklentisi yüklemeniz gerekir.
  2. Quicktime oynatıcı, RTP / AVP / TCP aktarımını desteklemez ve RTP / AVP (UDP) aktarımı, NAT delik delme içermez. Bu nedenle, tek uygun taşıma, WAN dağıtımında HTTP tünellemedir.
  3. VLC, RTP / AVP aktarımı için NAT delik açmayı da desteklemez, ancak RTP / AVP / TCP aktarımı mevcuttur.
— ciphor
kaynak
2
Quicktime Player'ın son sürümleri, Mavericks'ten başlayarak RTSP desteğini bıraktı.
— Mike
linux / ubuntu'daki totem ayrıca rtsp akışını da destekliyor
— Oki Erie Rinaldi
8

RTSP'yi doğrudan web sayfasına aktarmak istiyorsanız, korkarım tek seçeneğiniz kamera ile birlikte gelen bir ActiveX kontrol görüntüleyicisini kullanmaktır. Bu doğrudan bir IP Kamera -> Görüntüleyici bağlantısıdır ve gerçekten en hızlısı olmalıdır. Neden sorun yaşadığından emin değilim; Axis ActiveX benim için oldukça iyi çalışıyor.

Ancak, bu seçenek bant genişliği açısından gerçekten verimli değildir ve aynı anda birden fazla izleyiciye hizmet veremezsiniz (IP Kameraların çoğunda 10 izleyici sınırı vardır). Daha iyi seçenek, tek bir RTSP akışını merkezi olarak barındırılan akış sunucusuna yüklemektir; bu akış, akışınızı RTMP / MPEG-TS'ye dönüştürür ve Flash oynatıcılara / Set Üstü kutulara yayınlar.

Wowza, Erlyvideo, Unreal Media Server, Red5 seçeneklerinizdir.

— kullanıcı1390208
kaynak
Bu kesinlikle gitmenin yoludur. Daha iyi bant genişliği yönetimi ve ayrıca web için uygun bir formata dönüştürür, örneğin flash oynatıcı için RTMP. Yukarıdaki medya sunucularından herhangi birini kullanma konusunda herhangi bir tecrübesi olan ve kurulum kolaylığı, performans, gecikme vb. Konuları detaylandırabilen var mı? Red 5 ile denedim ama bazı şeyleri çalışmak için biraz zor buldum.
— elMarquis
8

Web eklentisi için VLC resmi belgelerinden basit ve çalışan bir çözüm bulundu

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

Kodu biraz değiştirdim ve çalıştırdı. İşte kodum-

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

Not: Yukarıdaki kod parçası, rtspIP kameram tarafından desteklenen url biçimini kullanır . Yani kameranız için aynısını almanız gerekiyor. Bu bilgileri kamera satıcınızın desteğine danışarak alabilirsiniz. Ayrıca, Chrome'da ( Chrome için bir activeX eklentisi kullanarak) test ettiğimi ve diğer tarayıcıların (cep telefonu tarayıcıları dahil) desteklenmeyebileceğini de unutmayın.

— Swastik Padhi
kaynak
3
bazı pencerelerde yalnızca activeX saçmalıklarını bulduğunuzu, sizin deyiminizle bir "çözüm" olmadığını ve başka hiçbir şeyde (gerçek işletim sistemleri, cep telefonları, konsollar vb.) çalışmayacağını unutmayın.
— nonchip
@nonchip ah peki, sorun için daha iyi bir çözümünüz olduğunu düşünüyorum. Dahası, eklentiyi Android telefonlarda da test ettim, bu yüzden sadece Windows değil . Her neyse, CCTV kameralardan gelen yayınları görüntülemek için hangi çapraz platform alternatifine sahip olduğunuzu gerçekten bilmek isterim.
— Swastik Padhi
üzgünüm ama bu bir yalan. gömdüğünüz activex sadece - tanım başına - kazanır. Android'de Chrome'un yaptığı şey x-vlc-plugin, tescilli şeyleri görmezden gelmek ve sadece bir vlc uygulamasını amaçlamaktır. ayrıca, bahsettiğiniz çapraz platform alternatifleri hakkında: mevcut tek çözüm, rtsp akışını http / websocket / webrtc'ye yeniden paketlemek için bir web sunucusunda ffmpeg / avconv / etc kullanmak olacaktır. sonra bir <video>etiket ekleyin ve bitirdiniz.
— nonchip
1
akış oynatılmıyor, bu sorun olabilir (kod tabanı) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 bulunamadı
— Vara Prasad
7

Ayrıca açık kaynaklı WebRTC Media Server Kurento'yu deneyebilirsiniz.

Hangi RTSP video akışını oynatabilir ve WebRTC'ye gönderebilir veya RTMP'ye kod dönüştürebilir veya sunucuya kaydedebilir.

Bunu aşağıdaki durumlarda Üretimde kullanıyoruz:

 - WebRTC'den Webrtc'ye (çoktan çoğa)
 - WebRTC'den RTMP'ye
 - RTSP'den WebRTC'ye
— Denis Lisitskiy
kaynak
1
bağlantı artık çalışmıyor, bilgi için yine de teşekkürler.
— medskill
bağlantı yedeklendi @medskill
— activedecay
5

Wowza

  1. RTSP'yi RTMP'ye (Flash Player) yeniden akış Android Chrome veya FF ile çalışmaz (Flash desteklenmez)
  2. RTSP'yi HLS'ye yeniden yayınlama

Web Çağrı Sunucusu (Flashphoner)

  1. RTSP'yi WebRTC'ye Yeniden Aktarma (Chrome ve FF için Android veya masaüstünde yerel tarayıcı özelliği)

  2. RTSP'yi Web Soketlerine Yeniden Aktarma (iOS Safari ve Chrome / FF Masaüstü)

Bu makaleye bir göz atın .

— Ankitr
kaynak
Bu gerçekten harika bir makale. Flashphoner umut verici bir çözüm gibi görünüyor.
— elMarquis
3

Bu gönderinin eski olduğunu biliyorum ama geçen gün çok benzer bir şey arıyordum (herhangi bir süslü ActiveX eklentisi olmadan basit bir html sayfasında IP kameramın RTSP video beslemesini görüntüleyin). Şanslıyım, bir çözüm buldum! Ffmpeg, NodeJS, NGINX (zorunlu değil ama kullanışlı) ve Node Media Server'a dayalıdır .

Bağlantıdaki açıklama ayrıntılı ve izlemesi kolaydır, ancak çalışmaya başlamadan önce halletmem gereken bazı ince ayarlar vardı (NodeJS sunucusundaki uç noktalar ile ilgili olarak). Bunun için kendi sorusunu yaptım ve iyi ve işe yarar bir yanıt aldım .

— Hauns TM
kaynak
3

QuickTime Player'ı deneyin! Bir web sayfasında gömülü nesneyi oluşturan ve akışı oynatan JavaScript'im burada:

//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
kaynak
Teşekkürler. Quicktime seçeneğini araştırdım, ancak gerçekten kötü bir gecikme oldu.
— elMarquis
Bunun nedeni QuickTime'ın 3 saniyelik arabelleği ... beni de rahatsız ediyor ... Hey, işe yarayan başka bir şey bulursanız lütfen buraya yazın! Hoşçakal!
— Cipi
2
Merhaba, bir hatanız var, "adres" daha sonra "asdress" olarak yazılacak. Şerefe
— Clinton Green
3
Bu neden JavaScript'te yazılmıştır?
— Thomas Bennett
@Clinton: Düzeltildi.
— AlastairG
2

Media Source uzantısına aktaran Axis tarafından medya akışı kitaplığını kontrol edin

İçinde h264 depay bulunan JS'deki Gstreamer'a benzer bir ardışık düzen uygularlar. Not: js'de tüketilen akış doğrudan rtsp değildir, kitaplığın kendisi tarafından bir node.js rtsp-websocket proxy'si üzerinde bir ws: // içine kapsüllenir.

— Loreii
kaynak
2

Eklenti gerektirmeden web tarayıcısına gerçek zamanlı olarak ip / ağ kamerasını yayınlamanıza yardımcı olacak proje yayınladım, ihtiyacınıza uygun olabilecek MIT Lisansı kapsamında açık kaynak projesine katkıda bulundum, işte burada:

NodeJS kullanarak web tarayıcısında IP / Ağ Kamerası akışı

Henüz tam bir çerçeve paketi yok, ancak bu size daha ileri gitmeniz için bir yol sunabilecek bir başlangıçtır.
Bir öğrenci olarak bunun faydalı olmasını umuyorum ve lütfen bu projeye katkıda bulunun.

— Phok Chanrithisak
kaynak
2

Bir seçenek, bir tür akış sunucusu / ağ geçidi kullanmak olabilir. Çeşitli çözümler denedim (vlc, ffmpeg ve birkaç tane daha) ve benim için en iyi sonuç veren Janus WebRTC sunucusuydu. Kurulumu biraz zor ve onu kaynaktan derlemeniz gerekecek (bunu denediğimde Ubuntu depolarındaki sürüm RTSP desteğine sahip değildi), ancak her şeyin nasıl kurulacağına dair ayrıntılı derleme talimatları ve belgeleri var.

Yerel ağdaki 3 FullHD kameradan çok az gecikmeyle video ve ses yayını almayı başardım. Dahua ve Hikvision kameralarla çalıştığını doğrulayabilirim (tüm modellerin olup olmadığından emin değilim).

Kullandığım şey, Apache web sunucusunu çalıştıran Ubuntu Sunucusu 18.04 ve tarayıcı olarak Chrome'du (varsayılan olarak Firefox'ta çalışmadı, ancak bunun için geçici çözümler olabilir).

— ilmix
kaynak
1

Microsoft Mediaplayer ihtiyacınız olan her şeyi yapabilir. Videoyu Yayın ve Tek Noktaya Yayın Akışı olarak sunmak için 2003/2008 Sunucusunun MS Medias Hizmetlerini kullanıyorum. Bu Hizmet, Akışı kameradan ALABİLİR ve Yayınlayabilir. O resmi tüm OS Sistemlerinde TÜM Tarayıcılarda "Yalnızca" Görüntülemek için Sorun Var

Tavsiyem: Eklentinizi yüklemek yerine önce işletim sistemini kontrol edin. Windows'ta kolay-alınabilen WMP, diğer yandan MS Silverligt ...

— uwe
kaynak
1

Bunun gibi amaçlar için VLC'yi yeniden dağıtım sunucusu olarak kullanıyorum. VLC ile videoyu yakalayacağını söylemiştin? VLC'de medyaya sağ tıklayın, "akış" ı seçin ve seçeneklerinizi belirleyin. Bunu, çeşitli seçeneklerin (kod dönüştürme, ölçeklendirme, sıkıştırma, taramasız hale getirme) olası faydalarını sağlayan komut satırı ile de yapabilirsiniz. İşte VLC dağıtımını kaynaktan kendi 555 bağlantı noktasına başlatan bir toplu işlem (bu nedenle akışı almak için web sayfasındaki src seçeneğinize rstp: // myvlcserveripaddress: 555 yazmanız gerekir)

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

Burada , oynatıcıyı yerleştiren bir web sayfası örneğiniz var (VLC eklentisine göre).

— Grigory Kornilov
kaynak
-7

Yukarıdaki çözümlerin tümü artık çalışmıyor veya anlamak için çok zaman alıyor.

Bu nihai cevaptır. Rtsp bağlantısını web sitenize yerleştirebilirsiniz.

Aşağıdaki kodu html düzenleyicinize kopyalayın:

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

Bütün bunlar çok karmaşıksa ve yine de çözmüyorsa, size yardım etmeme izin verin.

Bunu müşterilerim için yaptım.

Buraya tıklayın http://www.mhcreative.com.my/ipcameratowebsite/

— Mazlan Halim
kaynak
Garip, VLC Media Player'ı gömmekle sonuçlanıyor, çünkü VLC'nin web sayfaları için "varsayılan medya oynatıcı" olduğu düşünülüyor mu?
— Jerry Dodge
Bekle, bu WMP, bunun yalnızca Windows'ta çalışacağını varsayıyorum.
— Jerry Dodge
2
Site uygulamanız, cevabınızda açıkladığınız gibi değil. Click2stream hizmetini kullanıyorsunuz, lütfen cevabınızı değiştirin, çünkü zaman kaybediyoruz. Başkalarının işe yaramadığını söylüyorsunuz, ancak sizin çözümünüz yok.
— stefan2410
3
Yazmanız garip: "Nihai cevap bu." Alçakgönüllü olmaya ne dersiniz, özellikle de böyle bir kalite eksikliğiyle bir yanıt bırakırken?
— Pille
1
Bu yaklaşım aktif bir x kontrolü kullanır (IE 10 ve altı için) daha sonra diğer tarayıcılar için başka bir eklentiye geri döner. Belirtildiği gibi, çoğu durumda VLC media player'ı yerleştirmiş gibi görünüyor. Bu korkunç bir yaklaşım değil, ancak kullanıcıların bir eklenti yüklemesini sağlamak her zaman biraz vurulacak ve ıskalayacak. Öte yandan, sınırlı bir hedef kitleniz varsa ve kurulumlarını belirleyebiliyorsanız, bu yaklaşım uygun olabilir.
— elMarquis
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.