静的画像をシームレスなMJPEGシーケンスに変えます

私は最近、WebサイトまたはアプリにライブDSLR映像をストリーミングするプロジェクトに着手しました。 私の目標はシンプルでした：私のDSLRからのリアルタイムの画像ストリーミング。ただし、シームレスなストリーミングを達成することは、予想よりも挑戦的であることがわかりました

これが私がそれを解決した方法で、DigicamControlとExpress.jsを活用しています。

チャレンジ

DigicamControlは、DSLRコントロールとLiveViewのための素晴らしいツールです。 警告？ LiveViewは静的画像を提供し、リロード時に毎秒約20回更新します。機能的ですが、それは真のリアルタイムフィードではありません

私の目的は、この画像ストリームをWebおよびデスクトップアプリケーションと互換性のある標準のMJPEGフィードに変換することでした。

ソリューション

実験を通じて、これらの静的画像を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フィードがSmooth 20 FPSでWebアプリにストリーミングされました。 RTSPほど洗練されていませんが、このMJPEGアプローチはほとんどのアプリケーションで効率的です。

ライブDSLRフィードをプロジェクトに統合することを目指している場合、この方法は簡単で効果的なソリューションを提供します。 DigicamControlはカメラ側の処理を処理し、Express.jsは画像ストリーミングを簡素化します。 結果は満足です！

Error fetching liveview image: connect ECONNREFUSED ::1:5513 localhosthttp://localhost:5513/liveview.jpg

以上が静的画像をシームレスなMJPEGシーケンスに変えますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。