ログイン
記事の一覧
4.<[c3dl][WebGL]「Canva... | [JavaScript]Sketchpa...>6.

2010年03月06日

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

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される

サーバの設定により、動画ファイルがブラウザで再生されずに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

関連サイト

Mozilla公式のクロマキー処理のサンプル

https://developer.mozilla.org/samples/video/chroma-key/index.xhtml

【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (3) Video/Audio要素とそのAPI | エンタープライズ | マイコミジャーナル

http://journal.mycom.co.jp/special/2009/html5-1/002.html

HTML5 video、ブラウザ対応状況とコーデックまとめ | エンタープライズ | マイコミジャーナル

http://journal.mycom.co.jp/news/2010/01/27/033/index.html

Using audio and video in Firefox - MDC

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

Manipulating video using canvas - MDC

https://developer.mozilla.org/En/Manipulating_video_using_canvas

関連商品
4873114977 Firefox Hacks Rebooted ―Mozillaテクノロジ徹...
オライリージャパン,浅井智也,池田譲治,小山田昌史...
コメントを書くには、なぞなぞ認証に回答する必要があります。
4.<[c3dl][WebGL]「Canva... | [JavaScript]Sketchpa...>6.
●ウェブ検索●