Transformez les images statiques en séquences MJPEG sans couture

Je me suis récemment lancé dans un projet pour diffuser des images DSLR en direct sur un site Web ou une application. Mon objectif était simple: le streaming d'images en temps réel à partir de mon reflex numérique. Cependant, la réalisation de streaming sans couture s'est avérée plus difficile que prévu.

C'est ainsi que je l'ai résolu, en tirant parti de DigicAmControl et Express.js.

le défi

DigicamControl est un outil fantastique pour le contrôle DSLR et LiveView. La mise en garde? LiveView fournit une image statique, mettant à jour environ 20 fois par seconde lors du rechargement. Bien que fonctionnel, ce n'est pas un véritable flux en temps réel.

Mon objectif était de transformer ce flux d'image en un flux MJPEG standard, compatible avec les applications Web et de bureau.

La solution

Grâce à l'expérimentation, j'ai découvert une méthode pour convertir ces images statiques en un flux MJPEG lisse en utilisant Express.js. Le processus est étonnamment simple.

Voici le code 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>

aborder une erreur commune

Au départ, j'ai rencontré cette erreur: Error fetching liveview image: connect ECONNREFUSED ::1:5513. Cela découle de la façon dont localhost se résout sur certains systèmes. La solution était simple: remplacer http://localhost:5513/liveview.jpg par http://127.0.0.1:5513/liveview.jpg.

le résultat

Avec le serveur en cours d'exécution, j'ai réussi à diffuser le flux LiveView de DSLR à mon application Web à 20 ips en douceur. Bien qu'il ne soit pas aussi sophistiqué que RTSP, cette approche MJPEG est efficace pour la plupart des applications.

Si vous visez à intégrer un flux DSLR en direct dans votre projet, cette méthode offre une solution simple et efficace. DigicAmControl gère le traitement côté caméra et express.js simplifie le streaming d'image. Les résultats sont satisfaisants!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!