ad:tech tokyo 2014にて「TICK TOCK」公開しました！ 詳細編

ad:tech tokyo 2014にて「TICK TOCK」公開しました！　詳細編

2014.10.24 (金)

ticktock_up

このブログでは、『ad:tech tokyo 2014にて「TICK TOCK」公開しました！　概要編』とは趣向を変えて「TICK TOCK」の内側の仕組みを、実際のプログラムを交えて解説していこうと思います。
目次は以下です。

――――――――――――――――――――――

1. スマホから動画をリアルタイムに投稿する方法
2. 動画の書込み
3. FFMPEGを利用した動画の編集方法

――――――――――――――――――――――

1. スマホから動画をリアルタイムに投稿する方法

「TICK TOCK」では、動画を投稿すると、リアルタイムに加工された動画がWebに反映されます。

そのリアルタイム性を実現しているものが、「Node.js+SocketIO」です。
2014年5月28日、SocketIOがver1.0となり、バイナリーファイルの送受信に対応しました。
それにより、HTMLから取得したファイルデータを簡単にNode.jsで送信できるようになり、今回のリアルタイム動画投稿が可能となりました！

ざっくりソースを用意してみました。↓

<!--HTML-->
<input id="hackist" type="file" />

1 2	<!--HTML--> <input id="hackist" type="file" />

/*フロント側JavaScript*/
// idが'hackist'のものに変化があればfile_sendを起動する。
$('#hackist').on('change', file_send);

// 起動するとファイルをサーバーへ送る。
function file_send (file)
{
　  socket.emit( 'hackist', file )
}

/*フロント側JavaScript*/

// idが'hackist'のものに変化があればfile_sendを起動する。

$('#hackist').on('change', file_send);

// 起動するとファイルをサーバーへ送る。

function file_send (file)

{

　 socket.emit( 'hackist', file )

}

HTMLのinputからファイルを取って送るだけの内容です。

今までも同じような事はできたのですが、自分でファイルのバイナリデータを、base64エンコードしてテキストデータに変換して・・・等大変でしたが今ではたった数行のコードで書けるようになって、とても簡単になりました！

2. 動画の書込み

サーバー側でファイルを受け取ったら、次にファイルをサーバーに保存する必要があります。

ここでは「1. スマホから動画をリアルタイムに投稿する方」で送信したファイルを受け取り、書込み用のメソッドを使用します。

ざっくりソースだとこんな感じです。↓

/*サーバー側*/

// 'hackist'というkeyで送られてきたファイルを受信
socket.on('hackist', function(file) {

  // ファイル名や保存先パスの生成
  var paths = _fileNameMake.start(file.name);

  // 動画の保存。保存先のファイルパスと実際に保存したいファイルを入れる。
  fs.writeFile(paths.movie_file_path, file.data, function(err){

      // エラーが起きたらエラーを教える。 
      if (err){throw err;}

      // エラーが起きずに保存出来たら、次のステップ、動画の加工へ。
      movie_processing();

  });

});

/*サーバー側*/

// 'hackist'というkeyで送られてきたファイルを受信

socket.on('hackist', function(file) {

// ファイル名や保存先パスの生成

var paths = _fileNameMake.start(file.name);

// 動画の保存。保存先のファイルパスと実際に保存したいファイルを入れる。

fs.writeFile(paths.movie_file_path, file.data, function(err){

// エラーが起きたらエラーを教える。

if (err){throw err;}

// エラーが起きずに保存出来たら、次のステップ、動画の加工へ。

movie_processing();

});

任意のファイル名にし、任意のディレクトリへ保存したら今度は次のステップ、動画の加工に入ります。

3. FFMPEGを利用した動画の編集方法

FFMPEGとは、コマンドから動画や音声が詳細に編集できるというライブラリです。

対応しているファイル形式は100を超えており、
動画のビットレートやフレームレートの変更から
字幕を付けたり、画像として出力しちゃうなんて事もできます。

そんなFFMPEGを使って今回は下記の８つのフローで、
動画の変換から表示までをしています。
―――――――――――――――――――――――――――――――――――――

1. スマホの動画を、Node.jsで受け取り。
2. 動画を保存。
3. 保存した動画を0.5秒に1枚のJPG画像群に変換。
4. 画像の存在や枚数の確認
5. 画像群を縦に連結して1枚のJPG画像にする。
6. 連結したJPGのファイルパスをデータベースに保存７、表示用のPCに、データベースに保存しているファイルパスを全て送信。
7. 縦長のJPGの位置を上手く調整してアニメーションに見せる。

―――――――――――――――――――――――――――――――――――――

また、FFMPEGはこんな感じで使います！↓

// 叩くコマンドを 変数「command」　の中に代入します。　
//保存先、画像に変換する間隔、明るさ、保存名　などを記述しています。

var command = 'ffmpeg -i ' + movie_file_path + ' -f image2 -vf fps=fps=4 -vf mp=eq=20:20 -s ' + resize_size + ' ' + image_file_path + '%01d.jpg';

// ここでプログラムからコマンドを叩きに行きます。
var child = _exec(command , function(err, stdout, stderr)
{
     // エラーが起きたらエラーを教える。 
     if (err){throw err;}

     // エラーが無ければ完了！
});

// 叩くコマンドを変数「command」　の中に代入します。　

//保存先、画像に変換する間隔、明るさ、保存名　などを記述しています。

var command = 'ffmpeg -i ' + movie_file_path + ' -f image2 -vf fps=fps=4 -vf mp=eq=20:20 -s ' + resize_size + ' ' + image_file_path + '%01d.jpg';

// ここでプログラムからコマンドを叩きに行きます。

var child = _exec(command , function(err, stdout, stderr)

{

// エラーが起きたらエラーを教える。

if (err){throw err;}

// エラーが無ければ完了！

});

ここまで読んでくださった方は何となくわかると思うのですが、
「TICK TOCK」は動画のように見えて、実はJPGの画像を動画っぽく見せるという技術でした。

最後にこの記事をまとめると、
【Node.js + Socket.io + FFMPEG】を使うと、
動画のリアルタイム投稿だけでなく、リアルタイム編集までも可能にしてしまうよ！
という事です！

ここまで読んで下さって誠にありがとうございます！
次回の記事もよろしくお願いします！