Bagaimana cara menampilkan aliran video RTSP di halaman web?

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.

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>

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.

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.

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.

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.

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

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 .

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 .

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;

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

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

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.

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.

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

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

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

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/