古籏一浩のJavaScriptラボ ― 第33回
HTML5＋JavaScriptでビデオエフェクターに挑戦！
2010年05月12日 11時00分更新
※この記事は「古籏一浩のJavaScriptラボ」の第33回です。過去の記事も合わせてご覧ください。
|
|---|
| HTML5ビデオエフェクターのサンプル。左側の動画にリアルタイムでエフェクトを加えて再生する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） |
HTML5で追加される新機能の中でも、特に華やかなものといえば「Video」と「Canvas」でしょう。本連載でも、HTML5 Videoを使った3D動画プレーヤーやCanvasを使ったペイントツールなどを作成してきましたが、今回はこの2つの機能を組み合わせて「ビデオエフェクター」作りに挑戦します。
ひとくちにビデオエフェクターといっても、アドビ システムズの「After Effects」のように事前にレンダリングしてムービーを作成するアプリケーションから、アップルの「Motion」のようにムービーを再生しながらエフェクトを処理するタイプ、さらにはVJ (Video Jockey/Visual Jockey）の世界で使われる「motion dive」のようなリアルタイムでエフェクトを加えられるアプリケーションまで、さまざまです。
今回は、リアルタイムでエフェクトをかけながら動画を再生するWebページをHTML5とJavaScriptだけで作ります。さすがにVJ用アプリケーションのような処理は現在のブラウザーの性能では無理がありますから、多少妥協してMotionのような“ほぼリアルタイム”の処理を目指します（それでもかなりのマシンパワーを消費しますが）。
PhotoshopやAfter Effectsのように「プラグイン」でエフェクトの種類を増やせるようにもします。エフェクトを定義するスクリプトはメイン処理とは別に作成し、他のサーバーにホスティングされているプラグインでも、URLさえ指定すれば利用できる仕組みです。
なお、HTML5 VideoとCanvasに関してはすでに本連載でも説明していますので、今回は詳しく触れません。素材となる動画については、H264とTheora/Oggに変換されたファイルが用意されている前提で解説します。今回の記事を読む前に、以下の記事を読んで復習してください。
HTML5のcanvasで作る画像フィルター
http://ascii.jp/elem/000/000/465/465675/
HTML5のCanvasで作る、Flash不要のお絵かきツール
http://ascii.jp/elem/000/000/513/513377/
HTML5 videoで作る“動くストリートビュー”
http://ascii.jp/elem/000/000/507/507722/
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
