2012年12月4日火曜日

Node.jsでめっちゃ簡単に動画をストリーミング配信しよう

前回の続きです。
作業ディレクトリに移動しましょう。
高木はtestディレクトリの中にserver.jsがある状態です。

今回はhtml5で登場したvideoタグを使って動画をストリーミング配信します。
そのためvideoタグを使ったhtmlファイルを用意します。


  • htmlファイルの用意

中身はこんな感じです。


10行目〜13行目がvideoタグです。10行目のcontrolsをつけると再生ボタンやシークバーなどが現れます。
11行目のsourceタグに動画の場所を書きます。今回のコードだとserver.jsがある場所と同じところですね。
typeにはmimeタイプを書きます。


  • 前回のserver.jsの書き換え
サーバのコードを変更しましょう。


前回は

res.write('好きな文字列');

でクライアントに文字を送りましたが、今回はhtmlファイルを送ります。
  • クライアントからのリクエストが動画の送信かどうかチェックする
  • 動画の送信でない場合、送りたいhtmlを読み込む
  • 読み込んだファイルの中身をクライアントに送る
という流れで行きたいと思います。

そのために7行目のように「fs」モジュールを読み込みます。
11行目でリクエストが動画ではないことをチェックして、13行目のようにfs.readFileにhtmlファイルへのパス(./video.html)を渡します。
ファイルを読み込めるとコールバックのdataに渡されるので、それをres.writeで書きこめば終わりです。

20〜26行目は動画のストリーミングです。
20行目のfs.createReadStrem(path)はpathで指定したファイルの読み込みストリームを作ります。今回はこのpathに配信したい動画のパス(./test.mp4)を書きます。

21〜24行目はエラーイベントが起こった時の処理です。

26行目のreadStream.pipe(destination)は作成した読み込みストリームをdestinationで指定した書き込み先に接続します。
このdestinationに「res」を指定することでリクエストがあったクライアントに読み込んだ動画をそのまま流せます。

じゃあ実行しましょう!

こんな感じで3つのファイルがあるはずです。

node server.js

で実行してブラウザから http://localhost:30000 にアクセスします。

このように再生できるはずです。


これからNode.jsをはじめる人の入門として軽く見てくれればいいなーと思ってこの記事を書きました。
特に3年生の後輩でサーバー側やウェブアプリに興味のある人はやってみてはどうですか

0 件のコメント:

コメントを投稿