Rumah >hujung hadapan web >tutorial js >Hidupkan gambar statik ke dalam urutan MJPEG yang lancar
Saya baru -baru ini memulakan projek untuk menstrim rakaman DSLR secara langsung ke laman web atau aplikasi. Matlamat saya adalah mudah: imej masa nyata streaming dari DSLR saya. Walau bagaimanapun, mencapai streaming lancar terbukti lebih mencabar daripada yang dijangkakan.
ini adalah bagaimana saya menyelesaikannya, memanfaatkan digicamcontrol dan express.js.
DigicamControl adalah alat yang hebat untuk kawalan DSLR dan LiveView. Kaveat? LiveView menyediakan imej statik, mengemas kini kira -kira 20 kali sesaat apabila dimuat semula. Walaupun berfungsi, ia bukan makanan masa nyata yang benar.
Objektif saya adalah untuk mengubah aliran imej ini menjadi suapan MJPEG standard, serasi dengan aplikasi web dan desktop.
Melalui percubaan, saya dapati kaedah untuk menukar imej statik ini ke dalam aliran MJPEG yang lancar menggunakan Express.js. Proses ini mengejutkan dengan mudah.
inilah kod backend:
<code class="language-javascript">const express = require('express'); const axios = require('axios'); const app = express(); const PORT = 3000; // MJPEG proxy port const DIGICAM_URL = 'http://127.0.0.1:5513/liveview.jpg'; const FPS = 20; // Frames per second app.get('/liveview.mjpeg', (req, res) => { res.writeHead(200, { 'Content-Type': 'multipart/x-mixed-replace; boundary=frame', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', }); const interval = setInterval(async () => { try { const response = await axios.get(DIGICAM_URL, { responseType: 'arraybuffer' }); const imageData = response.data; res.write(`--frame\r\n`); res.write(`Content-Type: image/jpeg\r\n\r\n`); res.write(imageData); res.write(`\r\n`); } catch (error) { console.error('Error fetching image:', error.message); clearInterval(interval); res.end(); } }, 1000 / FPS); req.on('close', () => { clearInterval(interval); }); }); app.listen(PORT, () => { console.log(`MJPEG server running on http://localhost:${PORT}/liveview.mjpeg`); });</code>
menangani ralat biasa
Pada mulanya, saya menghadapi kesilapan ini: Error fetching liveview image: connect ECONNREFUSED ::1:5513
. Ini berpunca daripada bagaimana localhost
menyelesaikan sistem tertentu. Penyelesaiannya mudah: menggantikan http://localhost:5513/liveview.jpg
dengan http://127.0.0.1:5513/liveview.jpg
.
Dengan pelayan berjalan, saya berjaya mengalir suapan LiveView DSLR ke aplikasi web saya pada 20 fps yang lancar. Walaupun tidak canggih sebagai RTSP, pendekatan MJPEG ini cekap untuk kebanyakan aplikasi.
Jika anda berhasrat untuk mengintegrasikan suapan DSLR secara langsung ke dalam projek anda, kaedah ini menawarkan penyelesaian yang mudah dan berkesan. DigicamControl mengendalikan pemprosesan kamera, dan Express.js memudahkan streaming imej. Hasilnya memuaskan!
Atas ialah kandungan terperinci Hidupkan gambar statik ke dalam urutan MJPEG yang lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!