Contoh kode HTML5 untuk memutar video RTSP

Saat ini, sebagian besar kamera web mengirimkan aliran video melalui protokol RTSP, tetapi HTML tidak mendukung aliran RTSP secara standar. Kecuali browser Firefox yang bisa langsung memutar stream RTSP, hampir tidak ada browser lain yang bisa langsung memutar stream RTSP. Aplikasi elektron didasarkan pada kernel Chromium, sehingga tidak dapat memutar aliran RTSP secara langsung.

Dengan bantuan alat tertentu, aliran RTSP dapat diputar di halaman Web. Metode yang diperkenalkan dalam artikel ini dapat diterapkan pada aplikasi Web tradisional dan aplikasi Electron. Satu-satunya perbedaan adalah proses utama aplikasi Electron digunakan sebagai server aplikasi Web tradisional.

Karena ini adalah siaran langsung, penundaannya harus rendah. Saat kamera offline, seharusnya juga ada pesan acara tertentu. Pada dua poin ini, kami akan membandingkan solusi pemutaran RTSP yang ada yang telah diterapkan tanpa membeli lisensi (kami tidak akan menganalisisnya untuk saat ini pada tahap prinsip).

Saya telah menerapkan keempat metode tersebut, dan metode keempat memiliki efek keseluruhan terbaik. Metode ini menggunakan lebih sedikit port, memiliki latensi rendah, memiliki kecepatan rendering yang cepat, dan mudah menangani kejadian offline.

flv.js adalah browser HTML5 sumber terbuka dari Bilibili. Mengandalkan Ekstensi Sumber Media untuk pemutaran video, video ditransmisikan melalui protokol HTTP-FLV atau WebSocket-FLV, dan format video harus dalam format FLV.

Sisi server ditulis menggunakan kerangka express + express-ws Ketika permintaan HTTP dikirim ke alamat yang ditentukan, program streaming ffmpeg dimulai, aliran RTSP langsung dienkapsulasi menjadi aliran video dalam format FLV, dan didorong ke aliran video. aliran respons WebSocket yang ditentukan.

 impor * sebagai ekspres dari ekspres;impor * sebagai expressWebSocket dari express-ws;impor ffmpeg dari fasih-ffmpeg;impor webSocketStream dari websocket-stream/stream;impor WebSocket dari websocket-stream;impor * sebagai http dari http;fungsi localServer() { biarkan aplikasi = express(); app.use(express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log(express mendengarkan)}fungsi rtspRequestHandle(ws, req) { console.log(pegangan permintaan rtsp) ; const stream = webSocketStream(ws, { biner: benar, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); biarkan url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); , tcp, -buffer_size, 102400) // Anda dapat menambahkan beberapa RTSP di sini Parameter yang dioptimalkan.on(start, function () { console.log(url, Stream dimulai.); }) .on(codecData, function () { console.log(url, Stream codecData.) // Pemrosesan online kamera} ) .on(error, function (err) { console.log(url, Terjadi kesalahan: , err.message); }) .on(end, function () { console.log(url, Stream end!); // Penanganan pemutusan sambungan kamera}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream);

Untuk mencapai waktu pemuatan yang lebih rendah, Anda dapat menambahkan parameter berikut ke ffmpeg:

• analisa durasi dapat mengurangi waktu yang dibutuhkan untuk mengurai aliran kode
• Saya tidak begitu ingat fungsi spesifik max_delay yang tertulis di data. Efeknya tidak sejelas analisis.

Tentu saja penerapan ini masih tergolong kasar. Ketika ada beberapa permintaan untuk alamat yang sama, keluaran ffmpeg harus ditingkatkan daripada memulai aliran proses ffmpeg baru.

Contohnya menggunakan kerangka Vue untuk desain halaman.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>impor flvjs dari flv.js;ekspor default { props: { rtsp: String, id : String }, /** * @returns {{pemain: flvjs.Player}} */ data () { return { pemain: null } }, dipasang () { jika (flvjs.isSupported()) { biarkan video = this.$refs.player; jika (video) { this.player = flvjs.createPlayer({ ketik: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); this.player.load(); this.player.play(); } tangkapan (kesalahan) { console.log(error); /skrip><gaya> .demo-video { lebar maksimal: 480 piksel; tinggi maksimal: 360 piksel;

Halaman Electron digunakan untuk menampilkan 7 kamera Hikvison NVR, yang dapat mencapai latensi rendah, penggunaan CPU rendah, dan tanpa distorsi layar. Karena kerahasiaan, saya tidak akan memposting tangkapan layar di sini.

Dengan cara yang sama, saya memutar 9 video lokal 1080p "White Deer Plain" untuk melihat efeknya.

Efek pemutarannya sangat bagus, tidak ada lag atau blur sama sekali, dan penggunaan CPU tidak tinggi.

Contoh repositori kode: WhuRS-FGis/html5-rtsp Contoh repositori kode:

Di atas adalah contoh kode untuk memutar video RTSP dalam HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!