videoタグでの再生画像を元にしたクロマキー処理

videoタグで再生している画像を定期的に取得しながら加工するサンプルを作ってみました。

元ネタはAjaxianに掲載されてこちら。Firefox 3.6が登場するはるか昔に掲載されたものですが今回やっと試すことができました。こちらの記事のサンプルは指定の色を透過させ、人物と背景を合成させるもの(クロマキー)です。

Ajaxian » Manipulating video in real time with Canvas
http://ajaxian.com/archives/manipulating-video-in-real-time-with-canvas

これを元に自分が作成した内容は上記のものと同じく再生中の動画の画像情報を定期的に取得し、黒い色の部分を透過(アルファを0)させる事と選択された「設定」で透過以外の部分の加工を行っています。

動画の加工
http://tsuyobi.heteml.jp/html/html5/video/chroma_keying/

Macの以下の環境で正常に動作をする事を確認しています。

Firefoxではローカルで実行すると動画のピクセル情報を取得する getImageData() 関数でセキュリティエラーが発生。

    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);

エラーメッセージは「Security error" code: "1000」。対処法は今のところ見つけられていません。エラーの発生したものをそのままサーバにアップし、実行した場合にはエラーは発生しません。また、他のブラウザでは発生していません。

こちらのエラーの対処法をご存知の方はコメント欄で教えて頂けると嬉しいです。

ちなみにその前の行で行っている以下の drawImage() 関数はエラーとならないようです。

    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);

サンプルでクロマキー処理している左側に表示している画像の表示までならローカルでも実行可能です。

この行以降のクロマキー処理の部分をコメントアウトした状態であればローカルでも実行可能です。

サーバの設定により、動画ファイルがブラウザで再生されずにDLされる場合が有る。

.htaccess に対応しているサーバであれば同じフォルダに .htaccess を置き、以下の内容を記述しておけばブラウザで再生される様になります。

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

■参考サイト

Firefox 3.5.1 ビデオ: Happy Fishbone Blog
http://sato-don.asablo.jp/blog/2009/08/03/4478116

今回のサンプルでOgg Theora形式でエンコードした動画ファイルの作成はffmpegで行いました。

変換させるときにはffmpeg以外にも色々と関連するライブラリのインストールが必要だと思われます。自分の環境ではMacPortsを使い以下の様なものをインストールしています。

ffmpeg @0.5_5+darwin_10
libogg @1.1.4_0
libtheora @1.1.1_0
libvorbis @1.2.3_0

実際に実行したコマンドはこちらです。試した範囲では音声がOgg Vorbis形式で無ければ音声が再生されない様です。

ffmpeg -i video.mov -acodec libvorbis video.ogv

その他にも簡単に変換をする方法として ffmpeg2theora を使って変換する事ができます。

ffmpeg2theora
http://www.v2v.cc/~j/ffmpeg2theora/index.html

こちらをインストールした後、以下のコマンドで test.ogv ファイルが作成されます。

ffmpeg2theora video.mov

強火で進め