Saya memiliki sebuah ip kamera yang menyediakan live RTSP streaming video. Saya dapat menggunakan VLC media player untuk melihat feed dengan menyediakan URL:
rtsp://cameraipaddress
Tapi saya perlu untuk menampilkan feed pada halaman web. Kamera penyedia disediakan sebuah kontrol ActiveX yang aku punya kerja, tapi itu benar-benar buggy dan menyebabkan browser untuk sering hang.
Apakah ada yang tahu dari setiap alternatif video plugin yang saya bisa gunakan yang mendukung RTSP?
Kamera dapat dikonfigurasi untuk streaming di H264 atau MPEG4.
VLC juga dilengkapi dengan ActiveX plugin 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>
Kira-kira anda dapat memiliki 3 pilihan untuk menampilkan RTSP streaming video di halaman web:
Anda dapat menemukan kode untuk menanamkan activeX melalui pencarian google.
Sejauh yang saya tahu, ada beberapa keterbatasan untuk masing-masing pemain.
Itu tidak mudah untuk menampilkan aliran video langsung dari IP kamera pada halaman web karena yang anda butuhkan lebar bandwidth internet dan video player yang kompatibel dengan browser utama.
Tapi untungnya ada beberapa layanan berbasis cloud yang dapat melakukan pekerjaan ini untuk kita. Salah satu yang terbaik adalah IPCamLive. Layanan ini dapat menerima RTSP H264 video streaming dari IP Kamera dan dapat disiarkan ke pemirsa. IPCamLive memiliki Flash/HTML5 video player komponen yang akan menampilkan video pada PC, MAC, tablet, atau ponsel. Hal terbesar adalah bahwa situs ini menghasilkan diperlukan potongan HTML untuk embedding video langsung seperti ini:
<iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>
Jadi kita hanya perlu copy paste ke file HTML tanpa modifikasi apapun.
Jika anda ingin streaming RTSP langsung ke halaman web, maka saya takut satu-satunya pilihan anda adalah untuk menggunakan kontrol ActiveX viewer yang dilengkapi dengan kamera. Ini adalah koneksi langsung IP Cam -> Viewer, dan harus benar-benar menjadi yang tercepat. Tidak yakin mengapa anda mengalami masalah; Sumbu ActiveX bekerja cukup baik bagi saya.
Namun, pilihan ini tidak benar-benar hemat bandwidth dan anda tidak dapat melayani beberapa serentak penonton (sebagian besar IP Cams memiliki 10 pemirsa batas). Pilihan yang lebih baik adalah untuk meng-upload satu RTSP stream untuk pusat-di-host streaming server, yang akan mengkonversi stream RTMP/MPEG-TS dan mempublikasikannya ke Flash pemain/Set-Top box.
Wowza, Erlyvideo, Unreal Media Server Red5 adalah pilihan anda.
Anda juga dapat mencoba opensource WebRTC Server Media [Kurento][1]
Yang dapat bermain RTSP streaming video dan mengirimkannya ke WebRTC atau transcode ke RTMP atau menyimpan pada server.
Kami menggunakan itu di Produksi untuk kasus-kasus berikut:
- WebRTC untuk Webrtc (banyak ke banyak) - WebRTC untuk RTMP - RTSP untuk WebRTC[1]: http://www.kurento.org/
Sederhana dan solusi kerja dari VLC dokumentasi resmi untuk web plugin
https://wiki.videolan.org/Documentation:WebPlugin/
Modifikasi kode yang sedikit dan membuatnya bekerja. Berikut adalah kode-
<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 rtsp
url format yang didukung oleh kamera IP saya. Jadi, anda perlu untuk mendapatkan yang sama untuk kamera anda. Anda bisa mendapatkan informasi ini dengan konsultasi anda kamera dukungan vendor. Juga perlu diingat bahwa saya diuji pada Chrome (menggunakan activeX plugin untuk Chrome) dan browser lain (termasuk mobile phone browser) mungkin tidak didukung.
Web Server Panggilan (Flashphoner)
Re-Streaming RTSP untuk WebRTC (Asli fitur browser untuk Chrome dan FF baik di Android atau desktop)
Re-Streaming RTSP untuk Websockets (iOS Safari dan Chrome/FF Desktop)
Lihatlah ini artikel.
Mencoba QuickTime Player! Heres my JavaScript yang menghasilkan objek tertanam di halaman web dan memainkan 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="'+adsress+'">';
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;
Aku tahu bahwa posting ini, tapi aku sedang mencari sesuatu yang sangat mirip hari yang lain (lihat my IP cam's RTSP video feed pada halaman html sederhana tanpa fancy ActiveX plugin). Saya beruntung, saya menemukan solusi! Hal ini didasarkan pada ffmpeg, NodeJS, NGINX (tidak wajib tapi berguna) dan Node Server Media.
Deskripsi di link yang rinci dan mudah untuk mengikuti, tapi aku masih punya beberapa tweak untuk berurusan dengan sebelum aku mendapatkannya untuk bekerja (mengenai endpoint pada server NodeJS). Saya membuat sendiri pertanyaan]2 untuk itu dan mendapat yang baik dan kerja jawaban.
Saya telah menerbitkan project di Github yang membantu anda untuk streaming kamera ip/jaringan pada web browser real time tanpa memerlukan plugin, yang saya berkontribusi untuk proyek open source di bawah Lisensi MIT yang mungkin cocok dengan kebutuhan anda, di sini anda pergi:
Streaming Kamera IP/Jaringan pada web browser menggunakan NodeJS
Tidak ada paket lengkap framework, tapi itu adalah kickstart yang mungkin memberikan anda sebuah cara untuk melanjutkan lebih jauh.
Sebagai mahasiswa, saya berharap ini bermanfaat dan mohon memberikan kontribusi untuk proyek ini.
Microsoft Mediaplayer dapat melakukan semua yang anda butuhkan. Saya menggunakan MS Mediaservices 2003 / 2008 Server untuk mengirimkan Video sebagai Broadcast dan Unicast Streaming. Layanan ini bisa MENDAPATKAN Aliran dari cam dan Siaran itu. Dari yang telah anda "hanya" Masalah "Display" bahwa Gambar di SEMUA Browers di semua OS-Sistem
Tip saya :cek dulu OS , dari beban plugin anda . pada Windows mudah -mengambil WMP , di lain mengambil MS Silverligt ...
Periksa aliran media perpustakaan dengan Sumbu yang menyampaikan di Media Sumber ekstensi
Mereka menerapkan sebuah pipa yang mirip dengan Gstreamer di JS dengan h264 depay di dalamnya. Catatan: streaming dikonsumsi di js tidak langsung rtsp tapi dikemas menjadi ws:// oleh perpustakaan itu sendiri pada node.js rtsp-websocket proxy.
Untuk tujuan seperti yang satu ini saya menggunakan VLC sebagai redistribusi server. Anda mengatakan anda mendapatkan untuk menangkap video dengan VLC? Klik kanan pada media di VLC, pilih "aliran" dan memilih pilihan anda. Anda juga dapat melakukannya dengan command line, yang memberikan anda potensi keuntungan dari berbagai pilihan (transcoding, scaling, mengompresi, desinterlacing). Berikut ini adalah batch yang dimulai VLC distribusi dari sumber sendiri 555 port (sehingga anda akan memiliki untuk jenis rstp://myvlcserveripaddress:555 anda src opsi pada halaman web untuk mendapatkan stream)
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 dari sebuah halaman web yang komprehensif pemain (yang didasarkan pada VLC plugin).
Untuk yang saya gunakan, berikut URL bekerja:
rtmp://<IP_address>/flash/11:<username>:<password>
misalnya:
rtmp://192.168.1.10:1935/flash/11:admin:admin
Anda perlu untuk menemukan IP KAMERA IP, username dan password.
URL di atas ketika dimasukkan ke dalam browser, akan mendeteksi bahwa aliran dan membuka media player. URL yang benar untuk membuat anda dapat ditemukan dengan masuk ke alamat IP yang anda temukan. (Menggunakan scanner seperti Nmap, angry IP scanner, dll)
Semua solusi di atas tidak bekerja lagi atau terlalu memakan waktu untuk mencari tahu.
Ini adalah jawaban akhir. Anda dapat menanamkan rtsp link di website anda.
Copy kode di bawah ini di html editor:
<!--- 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 tidak memecahkan itu, biarkan saya membantu anda.
Saya telah melakukan ini untuk klien-klien saya.
Klik di sini http://www.mhcreative.com.my/ipcameratowebsite/