html5+javascript そしてvideoとcanvasAPI使って何か
先日html5-devのハッカソンに参加して、html5とapi使った何かを作ってきたので紹介。
目的
・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の対応がされてるのか？９だとされてるのかもだけど検証が必要ですね。
・魚眼の式
⇒どれが正しいのかわからなかったのでこれでいいんだよ！て書いてあるのを参考に。
ちゃんと調べていたんですけど、http://ja.wikipedia.org/wiki/%E5%B0%84%E5%BD%B1こんなのわからないｗｗ
というわけで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をＵｐしたので参考にしてください。
ＨＴＭＬ＋ＪＳﾃﾞｽ
※画像書き出し箇所で元画像を左上に表示したりグレースケールしようとした跡がありますが
そのまま乗っけてるので自由にしてください＞＜
あんまりこれっていう加工とかできてないんですけど、
結構な高評価もらえたのでまんぞくｗ
