将静态图像变成无缝的MJPEG序列

>我最近开始了一个项目，将实时数码单反相关的录像流传输到网站或应用程序。 我的目标很简单：从我的数码单反相机的实时图像流。但是，实现无缝的流媒体被证明比预期的更具挑战性。

>

这就是我解决的方式，利用digicamcontrol和express.js。

挑战

DigicamControl是DSLR控制和LiveView的绝佳工具。 警告？ LiveView提供了静态图像，重新加载时每秒更新约20次。虽然功能性，但这不是真正的实时供稿。

我的目标是将此图像流转换为标准的MJPEG feed，与网络和桌面应用程序兼容。

解决方案

通过实验，我发现了一种使用Express.js将这些静态图像转换为光滑的MJPEG流的方法。 这个过程令人惊讶地简单。

这是后端代码：

解决常见错误

最初，我遇到了这个错误：。 这源于如何在某些系统上解决。 解决方案很简单：用

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

>。

结果

>服务器运行后，我成功地将DSLR的LiveView Feed流到了我的Web应用程序中，以平滑的20 fps。尽管这种MJPEG方法对于大多数应用程序都是有效的，但不像RTSP那样复杂。 Error fetching liveview image: connect ECONNREFUSED ::1:5513如果您的目标是将实时数码单反相机集成到项目中，则此方法提供了一种直接有效的解决方案。 DigicamControl处理摄像头处理，并表达简化图像流。 结果令人满意！localhost http://localhost:5513/liveview.jpghttp://127.0.0.1:5513/liveview.jpg

以上是将静态图像变成无缝的MJPEG序列的详细内容。更多信息请关注PHP中文网其他相关文章！