[B! HTML5] yuripapagenoのブックマーク

HTML5でWebカメラをキャプチャしてみた - アル中プログラマの備忘録

videoタグで動画を埋め込めるのと、そのソースをJavaScriptを使ってWebカメラから取得できるらしいのでやってみた。 ※すでに検索するといっぱい引っかかるのでいまさら感はあるけど。対応してないブラウザも多いみたいで、とりあえずChromeの最新版で動くことは確認できた。実際に動くのを一番下に貼り付けておく。動かすためには以下が必要。・最新のChromeで「chrome://flags/」にアクセスして　「<video> 要素で Media Source API を有効にする」を有効にする・カメラの使用許可を聞かれたら「許可」を選択 [やっていること] ソースのコメント通り。・jQueryでHTMLから必要な要素を選択しておく・Webカメラからのストリームを取得　→成功すればvideoタグのソースに設定　→失敗すればエラー表示・定周期でvideoの中身をc

yuripapageno 2013/01/18

カメラキャプチャ、分かりやすいサンプル。

リンク

[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ

本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <

yuripapageno 2013/01/18

カメラAPI

リンク

今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog

はじめまして。新入りのnagataです。入社式で自転車乗ってた野郎です。先輩方から「ブログ、書いてね！」とのお達しがあったので、日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、手軽にグラフィック描画が行えます。ブラウザだけでローカルアプリケーションのようなグラフィカル（かつ動的な）表現が行えるわけです。とりあえずつかってみる早速何か描いてみましょう。こういうことは実践あるのみです。処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、

yuripapageno 2013/01/15

FPSクラスは使える。

リンク

背景をCanvasにする - Qiita

背景をCanvasにしてグリグリ動かすとインパクトがあって良い。(これとかこういう感じ) 少し工夫しないとCanvasが前面に来てボタンの操作とかができなくなるので、下記のようなHTML/CSSを書いてやる。 <body> <canvas id="canvas"></canvas> <section id="body> /* 実際のbodyはここに書く */ </section> </body> #canvas { position:fixed; top:0; left:0; width:100%; height:100%; } #body { position:absolute; top:0; left:0; }

yuripapageno 2013/01/15

リンク

http://mohayonao.herokuapp.com/perfume3

yuripapageno 2013/01/11

なにこれすごい！

リンク

HTML5のcanvasで作る画像フィルター (1/6)

現在の主要なWebブラウザーには、グラフィックを自由に描画できる「canvas」機能が用意されています（Internet Explorerを除く）。canvasは、W3C（World Wide Web Consortium）で策定が進んでいる「HTML5」に含まれる新しい要素です。HTML5の仕様はまだ正式に決まっていませんが、canvasは仕様策定の早い段階から盛り込まれていたため、すでに多くのブラウザーに実装されています。また、canvasへの対応が遅れているInternet Explorer（IE）でも、「ExplorerCanvas」などのJavaScriptライブラリーを使えば、ある程度の機能をエミュレートできます。 canvasのサンプルでは、円や四角形のような図形を描画するものをよく見かけますが、今回のJavaScriptラボでは、ビットマップ画像をピクセル単位で加工する「画