Verwandeln Sie statische Bilder in nahtlose MJPEG -Sequenzen

Ich habe kürzlich ein Projekt begonnen, um Live -DSLR -Filmmaterial auf eine Website oder App zu streamen. Mein Ziel war einfach: Echtzeit-Image-Streaming von meinem DSLR. Das Erreichen nahtloser Streaming erwies sich jedoch als schwieriger als erwartet.

So habe ich es gelöst und digicamcontrol und express.js.

nutzt

Die Herausforderung

digicamcontrol ist ein fantastisches Werkzeug für DSLR -Steuerung und LiveView. Die Einschränkung? LiveView bietet ein statisches Bild, das beim Nachladen etwa 20 Mal pro Sekunde aktualisiert wird. Während des Funktionsgeschäfts ist es kein echter Echtzeit-Feed.

Mein Ziel war es, diesen Bildstrom in einen Standard -MJPEG -Feed zu verwandeln, der mit Web- und Desktop -Anwendungen kompatibel ist.

Die Lösung

Durch Experimentieren habe ich eine Methode entdeckt, um diese statischen Bilder mit Express.js in einen glatten MJPEG -Stream umzuwandeln. Der Prozess ist überraschend einfach.

Hier ist der Backend -Code:

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

adressieren einen gemeinsamen Fehler

Anfangs habe ich diesen Fehler begegnet: Error fetching liveview image: connect ECONNREFUSED ::1:5513. Dies ergab sich darauf, wie sich localhost auf bestimmte Systeme auflöst. Die Lösung war einfach: http://localhost:5513/liveview.jpg durch http://127.0.0.1:5513/liveview.jpg.

ersetzen

Das Ergebnis

Wenn der Server ausgeführt wurde, habe ich den LiveView -Feed von DSLR erfolgreich mit reibungslosen 20 fps in meine Web -App gestreamt. Dieser MJPEG -Ansatz ist zwar nicht so raffiniert wie RTSP, ist für die meisten Anwendungen effizient.

Wenn Sie ein Live -DSLR -Feed in Ihr Projekt integrieren möchten, bietet diese Methode eine einfache und effektive Lösung. DigicamControl behandelt die Kamera-Seite und express.js vereinfacht das Bildstroming. Die Ergebnisse sind befriedigend!

Das obige ist der detaillierte Inhalt vonVerwandeln Sie statische Bilder in nahtlose MJPEG -Sequenzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!