Node.jsでHTML5動画プレーヤーへのビデオストリーミングを実装し、シーク操作も正しく動作させる方法

Node.jsで動画ファイルをHTML5のvideo要素にストリーミング配信する場合、ファイル全体を一括で送信するのではなく、クライアントから要求された範囲（レンジ）だけを部分的に送信することが重要です。これにより、HTML5動画プレーヤーのシークバー（再生位置の移動）などのコントロールが引き続き正しく機能するようになります。

Rangeリクエストと206レスポンス

ブラウザの動画プレーヤーは、再生位置を移動したり、先頭の一部だけを先読みしたりするために、HTTPの「Rangeリクエスト」を利用します。サーバー側は要求された範囲のデータのみを返し、ステータスコード「206 Partial Content」で応答する必要があります。

createReadStreamを使った実装方法

fsモジュールのcreateReadStream()を呼び出すと、読み取り可能なストリーム（Readable Stream）が取得できます。このストリームを利用して、要求された部分だけをクライアントへ効率的に送信します。

サンプルコード

stream = fs.createReadStream(path);
stream.on('open', function () {
    res.writeHead(206, {
        "Content-Range": "bytes " + begin + "-" + end + "/" + total,
        "Accept-Ranges": "bytes",
        "Content-Length": chunksize,
        "Content-Type": "video/mp4"
    });
    stream.pipe(res);
});

コードのポイント解説

• ステータスコード206： 部分コンテンツの応答であることを示します。Rangeリクエストへの対応には必須です。
• Content-Range： 送信するバイト範囲（begin〜end）とファイル全体のサイズ（total）をクライアントに伝えます。
• Accept-Ranges： サーバーがレンジリクエストに対応していることをブラウザに知らせます。
• Content-Length： 今回送信するチャンクのサイズ（chunksize）を指定します。
• Content-Type： 動画のMIMEタイプを指定します。MP4ファイルの場合は一般的に「video/mp4」を使用します。

begin・end・totalの求め方

上記コード内の変数begin、end、totalは、リクエストヘッダーの「Range」値を解析して事前に算出しておく必要があります。以下のように実装できます。

const stat = fs.statSync(path);
const total = stat.size;
const range = req.headers.range;

if (range) {
    const parts = range.replace(/bytes=/, "").split("-");
    const begin = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : total - 1;
    const chunksize = (end - begin) + 1;
    // ここで上記のストリーミング応答処理を呼び出す
}

この仕組みにより、ユーザーがシークバーをドラッグすると、その再生位置に必要なデータだけが要求・送信されます。そのため、サイズの大きな動画ファイルでもメモリを圧迫することなく、快適に再生できます。