第23回 HTML5とか勉強会に参加してきました。

先日、「第23回 HTML5とか勉強会」に参加してきました。(初参戦!)
それの第23回目で、なんと0回目をやっているので記念すべき二周年記念の回ということでした。

で、今回はカンファレンスとアンカンファレンスの二部構成になっていて、
カンファレンスでは普通の講演をし、アンカンファレンスでは参加者ごとになんか話し合う的な?
(アンカンファレンスは参加してないのでよくわかりません、、)

カンファレンスの方のテーマは、

  • 「Device系APIの全体図」 小松さん(20分)
  • 「チーズ!(ウェブでカメラの取得)」 ダニエルさん(30分)
  • 「GEOHEX & GeoLocationAPI 」 sa2daさん(30分)

という感じで講演なさって下さいました。
みなさんの資料とか載せておきますね。

ダニエルさんのスライドが見つからない(汗)一番欲しかったのに、、。

HTML5とか勉強会こんどからは積極的に参加してみよう。
こんかいで知らないことたくさん気づいたし、こういうのに参加したら手が動く!(コード書く的な)

実際コード描いてみた

で、実際にコード書いてみました。
ダニエルさんの講演の「streamAPI」をいじってみたくて!

今回作ったのは、ダニエルさんが作ったものに、
撮った静止画に落書き出来る機能をプラス!
ダニエルさんは outputタグ に静止画を流し込みましたが、
ぼくは再びcanvasに流しこみ、そのcanvasに落書き機能をプラスしただけです。

デモ:streamAPIいじってみた

上のページにChromeやらFireFoxやらOperaやらでみてきたと思いますが、
残念ながらgetUserMediaがサポートされていないと思います。
つまり、現時点でstreamAPIが普通に使えるブラウザがないってこと。(?)

デモを見るためには、OperaからgetUserMediaがサポートされたお遊び用のブラウザをダウンロードするしかありません。
http://labs.opera.com/からhttp://labs.opera.com/news/2011/10/19/のページにアクセスし、自分の環境のブラウザをクリックしてダウンロードしてください。
ぼくはMacなので「Opera desktop for Mac」をクリックしてダウンロードしました。

もう一つ設定しなくてはいけないところがあります。
Opera Labsのブラウザを開いたら、アドレスバーのところに「opera:config」を入力します。
入力したら「設定ファイルエディタ」というページが開いたと思いますので、
これの中の「Security Prefs」をクリックし、「Allow Camera TO Canvas Copy」にチェックし保存します。

これでデモページがご覧になれると思います。

デモ:streamAPIいじってみた

これを拡張したら簡単にインスタグラムみたいなWebアプリが簡単に作れちゃいますね!
他のAPIと組み合わせたらスカイプみたいなものも作れるみたいですよ!

あ、需要があったらソースをGithub上にあげます。ソースあげます。

あと、Ustのダニエルさんのライブコーディングがあるので、それをじっくり観てみるとイイと思いますよ!