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.

Cabaran

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.

Penyelesaian

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.

Hasil

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!