videoタグとXMLHttpRequestを組み合わせたBlobデータの送受信方法

HTML5のBlob.slice()メソッドとは

HTML5で導入された Blob.slice() メソッドは、元のBlobオブジェクトから指定したバイト範囲のデータだけを抜き出し、新しいBlobオブジェクトを生成するための便利な機能です。大きなファイルを分割して処理したい場合や、部分的なアップロードを行いたい場合に特に役立ちます。

このメソッドは、XMLHttpRequest と組み合わせることで、バイナリデータの送受信を実現できます。

slice()を使ったバイナリデータの送受信例

以下の例では、slice() を使用してテキストデータを送信し、POSTメソッドによって「file」をサーバーへ送っています。

var val = new XMLHttpRequest();

val.open("POST", url, true);
val.onload = function (event) {
  // レスポンス受信後の処理
};
var blob = new Blob(['demo'], {type: 'text/plain'});
val.send(blob);

このコードでは、まず XMLHttpRequest のインスタンスを作成し、open() でPOSTリクエストを初期化しています。その後、Blob コンストラクタでテキスト形式のBlobオブジェクトを生成し、send() メソッドでサーバーに送信します。

videoタグへの応用

動画データを扱う場合は、レスポンスタイプを「blob」に設定し、取得したBlobからオブジェクトURLを生成することで、video要素に直接動画を流し込むことができます。

req.onload = function () {
    var blob_uri = URL.createObjectURL(this.response);
    myElement.appendChild(document.createElement("source")).src = blob_uri;
};
req.responseType = "blob";

このコードのポイントは以下の通りです。

• responseType = "blob": レスポンスをBlobオブジェクトとして受け取るよう指定します。
• URL.createObjectURL(): 受け取ったBlobから一時的なURLを生成し、メモリ上のデータをブラウザが参照できるようにします。
• source要素の追加: 動画を埋め込みたい親要素（myElement）に対して <source> 要素を動的に追加し、生成したURLをsrc属性に設定します。

この手法を使えば、サーバーから取得した動画データをページの再読み込みなしで動的に再生できるようになり、ストリーミング風のユーザー体験を実装する基盤にもなります。