Seriously.jsはnode.js/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

MozillaではWebの最新の技術を使ってどんなことができるのか、その最先端の体験をソフトウェアでさせてくれます。今回は動画を使ったSeriously.jsを紹介します。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.08_thumb.1370952789.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.08.1370952789.png)
一件何の変哲もない動画ですが…

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.12_thumb.1370952796.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.12.1370952796.png)
ボタンを押すと場面が変わります。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.16_thumb.1370952802.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.16.1370952802.png)
さらに変わります。人物は同じですね。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.26_thumb.1370952806.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.26.1370952806.png)
実際の撮影動画。いわゆるクロマキーです。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.36_thumb.1370952812.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.25.36.1370952812.png)
つまりこれはHTML5/node.jsを使って動画をリアルタイム合成しているという訳です。背景は動画でなく写真ですが、若干動くようになっています。

Seriously.jsではボタンを押すと背景がその場で変更できます。GPUを使う事で60FPSを維持します。入力は画像、動画、Canvasが選択でき、出力はCanvasになります。2Dイフェクトやテキスト追加、エンボスなどのイフェクトもサポートされています。

MOONGIFTはこう見る

クロマキー合成は合成した動画をそのまま放送する形なので、見ている側では合成かそうでないかはあまり関係がありません。しかしSeriously.jsではユーザサイドで自由にイフェクトが選択でき、それがリアルタイムに反映されます。

HTML5/JavaScriptの技術を活用する事で受信側がコンテンツを自由に操作できるパワーを得たと言えます。さらにその結果をシェアするようにすれば、ボトムアップで知れ渡っていく可能性も出てくるでしょう。

Seriously.js

brianchirls/Seriously.js · GitHub