【徹底比較】HTML、Node.js、FFmpeg vs WebRTC vs WebSocket：リアルタイムHTTPストリーミングの最適な選択

2024-05-17

HTML、Node.js、FFmpeg を用いたリアルタイム HTTP ストリーミングへの最適なアプローチ

HTML は、動画プレーヤーを埋め込むために使用されます。プレーヤーは、ビデオストリームを受信し、ブラウザ上でデコードして表示します。HTML5 の <video> タグを用いることで、シンプルなプレーヤーを簡単に作成できます。

Node.js は、ストリーミングサーバーを作成するために使用されます。Node.js は非同期処理に適しており、リアルタイムストリーミングのような高負荷な処理に最適です。

FFmpeg は、動画ファイルをストリーミングに適したフォーマットに変換するために使用されます。FFmpeg はオープンソースのマルチメディアフレームワークであり、様々な動画フォーマットに対応しています。

最適なアプローチ

リアルタイム HTTP ストリーミングを実現するには、以下の手順が必要です。

動画ファイルをストリーミングに適したフォーマットに変換する

FFmpeg を使用して、動画ファイルをストリーミングに適したフォーマットに変換します。一般的に、H.264 や VP8 などの圧縮コーデックと、MP4 や WebM などのコンテナフォーマットが使用されます。

Node.js でストリーミングサーバーを作成する

Node.js のライブラリを使用して、ストリーミングサーバーを作成します。いくつかのライブラリが用意されており、それぞれ異なる機能を提供しています。

HTML で動画プレーヤーを埋め込む

HTML で動画プレーヤーを埋め込み、ストリーミングサーバーの URL を指定します。プレーヤーは、ビデオストリームを受信し、ブラウザ上でデコードして表示します。

例

以下は、Node.js と FFmpeg を用いてリアルタイム HTTP ストリーミングを実現する簡単な例です。

const express = require('express');
const ffmpeg = require('fluent-ffmpeg');

const app = express();

app.get('/stream', (req, res) => {
  const input = 'video.mp4';
  const output = res;

  const stream = ffmpeg(input)
    .setCodec('copy')
    .output(output)
    .run();

  req.on('close', () => {
    stream.kill();
  });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

この例では、Node.js の express ライブラリを使用して、ストリーミングサーバーを作成しています。/stream エンドポイントにアクセスすると、FFmpeg を使用して video.mp4 ファイルをストリーミングします。

注意事項

リアルタイム HTTP ストリーミングを実現するには、ネットワーク環境やハードウェアの性能を考慮する必要があります。ネットワーク帯域幅が不足している場合、動画がカクカクしたり、途切れたりする可能性があります。また、ハードウェア性能が低い場合、動画のデコード処理が間に合わず、スムーズな再生ができない可能性があります。

サンプルコード：HTML、Node.js、FFmpeg を用いたリアルタイム HTTP ストリーミング

必要なもの

Node.js
FFmpeg
テスト用の MP4 ファイル (video.mp4)

手順

以下のコマンドを実行して、必要なパッケージをインストールします。

npm install express ffmpeg-static

以下のコードを server.js という名前のファイルに保存します。

const express = require('express');
const ffmpeg = require('fluent-ffmpeg');
const ffmpegStatic = require('ffmpeg-static');

const app = express();

app.use(express.static(__dirname + '/public'));

app.get('/stream', (req, res) => {
  const input = 'video.mp4';

  const stream = ffmpeg(input)
    .setCodec('copy')
    .outputFormat('hls')
    .outputOptions([
      '-hls_flags', 'delete_segments',
      '-hls_segment_duration', '10',
      '-hls_playlist_root', '/hls',
    ])
    .on('progress', (progress) => {
      console.log(`Progress: ${progress.percent}%`);
    })
    .on('error', (error) => {
      console.error(`Error: ${error.message}`);
      res.status(500).send('An error occurred while streaming the video.');
    })
    .pipe(res);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リアルタイム HTTP ストリーミング</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.13.1/hls.min.js"></script>
</head>
<body>
  <video id="player" autoplay></video>

  <script>
    const player = new Hls.Hls({
      autoStart: true,
      debug: true,
    });

    player.attachMediaElement('#player');
    player.loadSource('/hls/master.m3u8');
  </script>
</body>
</html>