Bagaimana cara menampilkan aliran video RTSP di halaman web?

98

Saya memiliki kamera ip yang menyediakan streaming video RTSP langsung. Saya dapat menggunakan pemutar media VLC untuk melihat umpan dengan menyediakannya dengan URL:

rtsp://cameraipaddress

Tapi saya perlu menampilkan feed di halaman web. Penyedia kamera menyediakan kontrol ActiveX yang berfungsi, tetapi ini benar-benar bermasalah dan menyebabkan browser sering hang.

Adakah yang tahu tentang plugin video alternatif yang dapat saya gunakan yang mendukung RTSP?

Kamera dapat dikonfigurasi untuk melakukan streaming dalam H264 atau MPEG4.

video-streaming  rtsp 
— elMarquis
sumber
1
Saya telah menjajaki kemungkinan ini juga dengan beberapa kamera RTSP saya, dan tidak menginginkan kontrol ActiveX apa pun. Saya ingin membangun server web khusus yang halaman webnya terus-menerus mengambil gambar JPEG untuk ditampilkan di halaman web. Dengan cara ini, ini dapat didukung di browser seperti Safari dan dilihat di iPhone.
— Jerry Dodge
subset: dengan <video:>elemen: stackoverflow.com/questions/1735933/…
— Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
@JerryDodge Saya telah mencoba ide dengan Java WebSocket Server yang mengirimkan nama file gambar sebagai string misalnya "photo1.jpeg" ke browser web setiap detik. JavaScript di browser web menggunakan nama file untuk mengatur srcatribut <img>tag HTML. Ini berfungsi tetapi sangat lambat sehingga tidak terlihat seperti video streaming langsung. Apakah Anda sudah mencoba ide Anda? Apakah ini bekerja dengan cepat?
— O Connor
@OConnor Untuk tampilan tingkat bingkai rendah yang paling dasar, yang terbaik adalah menarik klien daripada mendorong server. Juga pertimbangkan TCP vs. UDP. Keduanya memiliki pro dan kontra. Paling mudah bagi klien untuk meminta gambar baru kapan pun diperlukan.
— Jerry Dodge

Jawaban:

28

VLC juga dilengkapi dengan plugin ActiveX yang dapat menampilkan feed di halaman web:

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
sumber
2
Sebagai catatan, sampai saat ini VLC Media Player dibangun oleh 774 developer.
— Jerry Dodge
15
chrome memblokir plugin npapi setelah 1 september 2015. itu tidak berfungsi lagi.
— pengguna2988855
1
link axvlc.cab sudah mati
— hailinzeng
apa yang harus dilakukan jika plugin diblokir solusi alternatif lain yang tersedia?
— naveenkumar.s
18

Tidak mudah untuk menampilkan streaming video langsung dari kamera IP pada halaman web karena Anda membutuhkan bandwidth internet yang lebar dan pemutar video yang bagus yang kompatibel dengan browser utama.

Namun untungnya ada beberapa layanan berbasis cloud yang dapat melakukan pekerjaan ini untuk kita. Salah satu yang terbaik adalah IPCamLive . Layanan ini dapat menerima aliran video RTSP / H264 dari Kamera IP dan dapat menyiarkannya ke pemirsa. IPCamLive memiliki komponen pemutar video Flash / HTML5 yang akan menampilkan video di PC, MAC, tablet, atau ponsel. Hal terbaiknya adalah situs ini menghasilkan cuplikan HTML yang diperlukan untuk menyematkan video langsung seperti ini:

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

Jadi kita hanya perlu melakukan copy paste ke file HTML kita tanpa modifikasi apapun.

— Adorjan Princz
sumber
1
Ini luar biasa. Solusi yang sangat dibutuhkan.
— Zakir HC
Pembaruan: Rupanya tidak berfungsi sekarang. Menunjukkan ini: "Kamera ini tidak dapat disematkan. Alihkan ke paket Standar atau Profesional untuk penyematan."
— muglikar
1
Yang perlu Anda lakukan adalah meningkatkan kamera Anda ke paket Standar / Profesional dan Anda akan dapat menyematkan kamera Anda ke halaman web Anda.
— Adorjan Princz
17

Secara kasar Anda dapat memiliki 3 pilihan untuk menampilkan aliran video RTSP di halaman web:

  1. Pemain asli
  2. Pemain Quicktime
  3. Pemutar VLC

Anda dapat menemukan kode untuk menanamkan activeX melalui pencarian google.

Sejauh yang saya tahu, ada beberapa batasan untuk setiap pemain.

  1. Realplayer tidak mendukung video H.264 secara native, Anda harus menginstal plugin quicktime untuk Realplayer untuk mencapai decoding H.264.
  2. Pemutar Quicktime tidak mendukung pengangkutan RTP / AVP / TCP, dan pengangkutan RTP / AVP (UDP) tidak termasuk pelubangan NAT. Jadi satu-satunya transportasi yang layak adalah tunneling HTTP dalam penerapan WAN.
  3. VLC tidak mendukung pelubangan NAT untuk pengangkutan RTP / AVP, tetapi pengangkutan RTP / AVP / TCP tersedia.
— ciphor
sumber
2
Versi terbaru dari Quicktime Player telah menjatuhkan dukungan RTSP yang dimulai dengan Mavericks.
— Mike
totem di linux / ubuntu juga mendukung aliran rtsp
— Oki Erie Rinaldi
8

Jika Anda ingin streaming RTSP langsung ke halaman web, maka saya khawatir satu-satunya pilihan Anda adalah menggunakan penampil kontrol ActiveX yang disertakan dengan kamera. Ini adalah koneksi langsung IP Cam -> Viewer, dan seharusnya menjadi yang tercepat. Tidak yakin mengapa Anda mengalami masalah; Axis ActiveX bekerja cukup baik untuk saya.

Namun, opsi ini tidak benar-benar hemat bandwidth dan Anda tidak dapat melayani beberapa pemirsa secara bersamaan (sebagian besar Kamera IP memiliki batas 10 pemirsa). Opsi yang lebih baik adalah mengunggah satu aliran RTSP ke server streaming yang dihosting secara terpusat, yang akan mengonversi aliran Anda ke RTMP / MPEG-TS dan menerbitkannya ke pemutar Flash / kotak Set-Top.

Wowza, Erlyvideo, Unreal Media Server, Red5 adalah pilihan Anda.

— pengguna1390208
sumber
Ini pasti cara untuk pergi. Manajemen bandwidth yang lebih baik dan juga mentranskode ke dalam format yang sesuai untuk web, misalnya RTMP untuk flash player. Apakah ada yang punya pengalaman menggunakan salah satu server media di atas dan dapat menjelaskan tentang kemudahan penyiapan, kinerja, latensi, dll? Saya telah mencoba dengan Red 5 tetapi menemukan beberapa hal agak sulit untuk bekerja.
— elMarquis
8

Temukan solusi sederhana dan berfungsi dari dokumentasi resmi VLC untuk plugin web

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

Memodifikasi kode sedikit dan membuatnya berfungsi. Ini kode saya-

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

Catatan: Potongan di atas menggunakan rtspformat url yang didukung oleh kamera IP saya. Jadi, Anda perlu mendapatkan yang sama untuk kamera Anda. Anda bisa mendapatkan informasi ini dengan berkonsultasi dengan dukungan vendor kamera Anda. Juga perlu diingat bahwa saya mengujinya di Chrome (menggunakan plugin activeX untuk Chrome) dan browser lain (termasuk browser ponsel) mungkin tidak didukung.

— Swastik Padhi
sumber
3
perlu diingat Anda menemukan beberapa windows hanya omong kosong activeX, bukan "solusi" seperti yang Anda menyebutnya, dan itu tidak akan bekerja pada hal lain (OS nyata, ponsel, konsol, dll).
— nonchip
@nonchip ah, saya rasa Anda memiliki solusi yang lebih baik untuk masalah ini. Selain itu, saya juga menguji plugin ini di ponsel Android sehingga tidak hanya untuk windows . Dan bagaimanapun, saya benar-benar ingin tahu alternatif lintas platform apa yang Anda pikirkan untuk menampilkan umpan dari kamera CCTV.
— Swastik Padhi
maaf, tapi itu bohong. activex yang Anda sematkan adalah - per definisi - hanya menang. Apa yang dilakukan chrome di android adalah mengenali x-vlc-plugin, mengabaikan hal-hal berpemilik dan hanya mendorong aplikasi vlc. juga, tentang alternatif lintas platform yang Anda sebutkan: satu-satunya solusi saat ini adalah menggunakan ffmpeg / avconv / etc di server web untuk mengemas ulang aliran rtsp ke http / websocket / webrtc. lalu tambahkan saja <video>tanda dan selesai.
— nonchip
1
streaming tidak diputar, mungkin masalah ini (basis kode) http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab404 tidak ditemukan
— Vara Prasad
7

Anda juga dapat mencoba open source WebRTC Media Server Kurento

Yang dapat memutar aliran video RTSP dan mengirimkannya ke WebRTC atau transcode ke RTMP atau menyimpannya di server.

Kami menggunakannya di Produksi untuk kasus berikut:

 - WebRTC ke Webrtc (banyak ke banyak)
 - WebRTC ke RTMP
 - RTSP ke WebRTC
— Denis Lisitskiy
sumber
1
tautannya tidak lagi berfungsi, terima kasih atas infonya.
— medskill
tautannya kembali ke @medskill
— Activedecay
5

Wowza

  1. Streaming ulang RTSP ke RTMP (Flash Player) Tidak akan berfungsi dengan Android Chrome atau FF (Flash tidak didukung)
  2. Streaming ulang RTSP ke HLS

Server Panggilan Web (Flashphoner)

  1. Streaming Ulang RTSP ke WebRTC (Fitur browser asli untuk Chrome dan FF baik di Android atau desktop)

  2. Streaming Ulang RTSP ke Websockets (iOS Safari dan Chrome / FF Desktop)

Simak artikel ini .

— ankitr
sumber
Itu artikel yang sangat bagus. Flashphoner terlihat sebagai solusi yang menjanjikan.
— elMarquis
3

Saya tahu bahwa posting ini sudah lama tetapi saya mencari sesuatu yang sangat mirip beberapa hari yang lalu (lihat umpan video RTSP kamera IP saya pada halaman html sederhana tanpa plugin ActiveX yang mewah). Beruntung saya, saya menemukan solusi! Ini didasarkan pada ffmpeg, NodeJS, NGINX (tidak wajib tapi berguna) dan Node Media Server .

Deskripsi dalam tautan tersebut terperinci dan mudah diikuti, tetapi saya masih memiliki beberapa penyesuaian untuk ditangani sebelum saya membuatnya berfungsi (mengenai titik akhir di server NodeJS). Saya membuat pertanyaan sendiri untuk itu dan mendapatkan jawaban yang bagus dan berhasil .

— Hauns TM
sumber
3

Coba QuickTime Player! Inilah JavaScript saya yang menghasilkan objek yang disematkan pada halaman web dan memutar aliran:

//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
sumber
Terima kasih. Saya telah menjelajahi opsi quicktime, tetapi ada beberapa latensi yang sangat buruk dengannya.
— elMarquis
Itu karena buffer 3 detik QuickTime ... itu juga mengganggu saya ... Hei jika Anda menemukan sesuatu yang lain yang berfungsi, silakan posting di sini! Selamat tinggal!
— Cipi
2
Hai, Anda punya bug, "alamat" dieja "asdress" nanti. Cheers
— Clinton Green
3
Mengapa ini ditulis dalam JavaScript?
— Thomas Bennett
@Clinton: Tetap.
— AlastairG
2

Periksa perpustakaan aliran media oleh Axis yang menyampaikan pada ekstensi Sumber Media

Mereka menerapkan pipeline yang mirip dengan Gstreamer di JS dengan depay h264 di dalamnya. Catatan: streaming yang digunakan di js tidak secara langsung rtsp tetapi dienkapsulasi menjadi ws: // oleh library itu sendiri pada proxy node.js rtsp-websocket.

— loreii
sumber
2

Saya telah menerbitkan proyek di Github yang membantu Anda melakukan streaming kamera ip / jaringan ke browser web secara real time tanpa perlu plugin, yang saya kontribusikan untuk proyek open source di bawah Lisensi MIT yang mungkin sesuai dengan kebutuhan Anda, ini dia:

Streaming IP / Kamera Jaringan di browser web menggunakan NodeJS

Belum ada paket framework lengkap, tetapi ini adalah permulaan yang mungkin memberi Anda cara untuk melangkah lebih jauh.
Sebagai seorang siswa, saya harap ini bermanfaat dan berkontribusi untuk proyek ini.

— Phok Chanrithisak
sumber
2

Salah satu opsinya adalah menggunakan semacam server / gateway streaming. Saya mencoba berbagai solusi (vlc, ffmpeg, dan beberapa lagi) dan yang paling berhasil untuk saya adalah server Janus WebRTC. Agak sulit untuk mengatur, dan Anda harus mengkompilasinya dari sumber (ketika saya mencobanya, versi di repo Ubuntu tidak memiliki dukungan RTSP), tetapi mereka memiliki instruksi dan dokumentasi kompilasi terperinci tentang cara mengatur semuanya.

Saya berhasil mendapatkan umpan video dan audio dari 3 kamera FullHD di jaringan lokal dengan sedikit penundaan. Saya dapat mengonfirmasi bahwa ini berfungsi dengan kamera Dahua dan Hikvision (tidak yakin apakah semua model).

Yang saya gunakan adalah Ubuntu Server 18.04 yang menjalankan server web Apache, dan Chrome sebagai browser (tidak berfungsi di Firefox secara default tetapi mungkin ada solusi untuk itu).

— ilmix
sumber
1

Microsoft Mediaplayer dapat melakukan semua yang Anda butuhkan. Saya menggunakan MS Mediaservices 2003/2008 Server untuk mengirimkan Video sebagai Broadcast dan Unicast Stream. Layanan ini dapat MENDAPATKAN Aliran dari kamera dan Menyiarkannya. Daripada Anda memiliki "hanya" Masalah untuk "Menampilkan" Gambar itu di SEMUA Browser di semua Sistem OS

Tip Saya: periksa dulu OSnya, lalu muat plugin Anda. pada Windows itu mudah -mengambil WMP, di lain mengambil MS Silverligt ...

— uwe
sumber
1

Untuk keperluan seperti ini saya menggunakan VLC sebagai server redistribusi. Anda mengatakan Anda bisa menangkap video dengan VLC? Klik kanan pada media di VLC, pilih "stream" dan pilih opsi Anda. Anda juga dapat melakukannya dengan baris perintah, yang memberi Anda manfaat potensial dari berbagai opsi (transcoding, penskalaan, kompresi, desinterlacing). Berikut adalah kumpulan yang memulai distribusi VLC dari sumber ke port 555 miliknya sendiri (jadi Anda harus mengetik rstp: // myvlcserveripaddress: 555 di opsi src Anda pada halaman web untuk mendapatkan streaming)

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

Di sini , Anda memiliki contoh halaman web yang menyematkan pemutar (berdasarkan plugin VLC).

— Grigory Kornilov
sumber
-7

Semua solusi di atas tidak berfungsi lagi atau terlalu memakan waktu untuk dipikirkan.

Inilah jawaban terakhirnya. Anda dapat menanamkan tautan rtsp di situs web Anda.

Salin kode di bawah ini di editor html Anda:

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

Jika semua ini terlalu rumit dan masih belum menyelesaikannya, izinkan saya membantu Anda.

Saya telah melakukan ini untuk klien saya.

Klik di sini http://www.mhcreative.com.my/ipcameratowebsite/

— Mazlan Halim
sumber
Aneh, ternyata VLC Media Player menyematkan, apakah karena VLC dianggap sebagai "pemutar media default" untuk halaman web?
— Jerry Dodge
Tunggu, itu WMP, saya berasumsi ini hanya akan berfungsi di Windows.
— Jerry Dodge
2
implementasi situs Anda tidak seperti yang Anda jelaskan dalam jawaban Anda. Anda menggunakan layanan click2stream, harap ubah jawaban Anda, karena kami membuang waktu. Anda mengatakan tentang orang lain yang tidak berfungsi, tetapi solusi Anda tidak ada.
— stefan2410
3
Aneh jika Anda menulis: "Ini adalah jawaban terakhir." Bagaimana dengan menjadi rendah hati, terutama ketika memberikan jawaban dengan kualitas yang kurang?
— Pille
1
Pendekatan ini menggunakan kontrol x aktif (untuk IE 10 dan di bawahnya) kemudian kembali ke plugin lain untuk browser lain. Seperti yang disebutkan dalam banyak kasus tampaknya menyematkan pemutar media VLC. Ini bukan pendekatan yang buruk, tetapi meminta pengguna untuk menginstal plugin selalu akan menjadi sedikit untung-untungan. Di sisi lain, jika Anda memiliki audiens terbatas dan dapat menentukan pengaturan mereka, pendekatan ini mungkin tidak masalah.
— elMarquis
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.