上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

html5+javascript そしてvideoとcanvasAPI使って何か

先日html5-devのハッカソンに参加して、html5とapi使った何かを作ってきたので紹介。

「魚眼ビデオ映像をcanvas背景上に表示する」

目的
・html5でAPI使ってグラフィカルな動きをやってみる

目標
・canvas,videoAPIを利用して、
 魚眼の丸型ビデオをcanvas上に流す

過程
・初めはcanvasの上にvideoを載せるというものと思っていた
・実際はcanvasにvideoから取り出したものをcanvasで書き込むだった
 ⇒canvas上に絵を描き、さらにvideoからの映像をcanvasに描くは可能。

困ったところ
・ピクセルの扱い⇒一次元配列だった
・魚眼の式⇒どれが正しいのかわからなかった
・cCtx.getImageDataが曲者⇒ローカルだとエラーになってしまうのでブラウザで回避

感想
・タグひとつで簡単出力に感動


簡単に書くとこんな感じです。
詳細は続きから。
・初めはcanvasの上にvideoを載せるというものと思っていた
⇒実際は、videoから取得してcanvasで描くスタイルとなった。

とりあえず以下サイトを参考に、videoの任意フレームを取得しcanvasで描画まで。
http://d.hatena.ne.jp/favril/20100225/1267099197

・.getImageDataが曲者だった
⇒ローカルだとエラーになってしまうのでブラウザで回避
getImageDataを利用の場合http経由であれば問題無いがローカルだとブラウザのセキュリティに引っかかってしまい
正しい実行ができない。こちらのサイトで回避方法を学ぶ。Chromeでやっていたので起動オプションで回避。
http://d.hatena.ne.jp/chiheisen/20100815/1281885412
IEだとどうなるんだろう、むしろhtml5の対応がされてるのか?9だとされてるのかもだけど検証が必要ですね。

・魚眼の式
⇒どれが正しいのかわからなかったのでこれでいいんだよ!て書いてあるのを参考に。
ちゃんと調べていたんですけど、http://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1こんなのわからないww
というわけでhttp://d.hatena.ne.jp/tokuhirom/20081104/1225814545こちらのサイトさんの式を採用。

つまりjavascriptの式に起こすとこんなかんじ。
Math.floor(r*(x - w / 2)/Math.sqrt(d * d+(x - w / 2)*(x - w / 2)+(y - h / 2)*(y - h / 2)) + w/2);
Math.floor(r*(y - h / 2)/Math.sqrt(d * d+(x - w / 2)*(x - w / 2)+(y - h / 2)*(y - h / 2)) + h/2);
Math.floorを行っているのは、ピクセル指定の数値が小数点になってしまうことがあってエラーになったため。


・ピクセルの扱い
⇒一次元配列だった
自分Javaメインでしかも、Javaでピクセル操作したときは2次元配列使ってたのでハマってました。
実際の配列の並びがRGBARGBARGBAとなっているため、4つ飛ばしの計算で出してあげなくてはなりませんでした。
(といっても聞いて大体教えてもらったんだけど…!)

というわけでソースは以下な感じです。
// ピクセル位置確定
var point = (y*w+x)*4;
var point2 = (yy*w+xx)*4;
if (xx >= 0 && xx < w && yy >= 0 && yy < h) {
// RGBARGBARGBARGBA…
imgdata2.data[point] = imgdata.data[point2];
imgdata2.data[point+1] = imgdata.data[point2+1];
imgdata2.data[point+2] = imgdata.data[point2+2];
} else {
imgdata2.data[point] = 0;
imgdata2.data[point+1] = 0;
imgdata2.data[point+2] = 0;
}
}

ポイントはこのくらい?
以下に作ったhtml+javascriptをUpしたので参考にしてください。
HTML+JSデス
※画像書き出し箇所で元画像を左上に表示したりグレースケールしようとした跡がありますが
 そのまま乗っけてるので自由にしてください><

あんまりこれっていう加工とかできてないんですけど、
結構な高評価もらえたのでまんぞくw

コメントの投稿

非公開コメント

プロフィール

nkd_a

Author:nkd_a
ぽつぽつと気になった事をメモしてます。
最近はandroidとphp、あとは勉強会とかそのへんです。
ツイッターどうでもいいことしか呟いてません。

最新記事
カテゴリ
Twitter
 
リンク
検索フォーム
最新コメント
最新トラックバック
かうんたぁ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。