HTML5でWebカメラをキャプチャしてみた - アル中プログラマの備忘録
videoタグで動画を埋め込めるのと、 そのソースをJavaScriptを使ってWebカメラから取得できるらしいのでやってみた。 ※すでに検索するといっぱい引っかかるのでいまさら感はあるけど。 対応してないブラウザも多いみたいで、 とりあえずChromeの最新版で動くことは確認できた。 実際に動くのを一番下に貼り付けておく。 動かすためには以下が必要。 ・最新のChromeで「chrome://flags/」にアクセスして 「<video> 要素で Media Source API を有効にする」を有効にする ・カメラの使用許可を聞かれたら「許可」を選択 [やっていること] ソースのコメント通り。 ・jQueryでHTMLから必要な要素を選択しておく ・Webカメラからのストリームを取得 →成功すればvideoタグのソースに設定 →失敗すればエラー表示 ・定周期でvideoの中身をc
[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> <
![[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
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ラボでは、ビットマップ画像をピクセル単位で加工する「画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景をCanvasにする - Qiita
http://mohayonao.herokuapp.com/perfume3