opera labs camera and pagesを使ってみました
TRANSCRIPT
Opera Labs Camera and PagesMac/WinでもHTML5でWebカメラ
を使ってみました。
2011年10月24日月曜日
前回の勉強会でお話した時はAndroid版Operaだけでしたが…
2011年10月24日月曜日
http://labs.opera.com/news/2011/10/19/
2011年10月24日月曜日
自己紹介秋葉秀樹グラフィック&ビジュアル&UIデザイナー
広告業界で20年、主にグラフィックデザインの仕事に携わる。電車内広告や屋外広告を始めとするあらゆる「人の目に留まるもの」に対しいかに訴求力とコミュニケーション能力を打ち出せるか?という問題を日々考える。
DTP / 3DCGによるビジュアルグラフィック制作Flash ActionScriptを使ったリッチインターネットアプリケーションの開発Webデザイン講師 / 執筆のお仕事
主な業務
2011年10月24日月曜日
執筆書籍
Facebookページプロフェッショナルガイド
CSS3デザインプロフェッショナルガイド
寄稿など
2011年10月24日月曜日
前回のデモを寄稿させていただきました今回はこれのPC版です
2011年10月24日月曜日
HTML video要素
カメラにアクセス
映像(Stream)データ
JavaScript取得に成功したら…
エラー処理
取得に失敗したら…
navigator.getUserMedia('video', 成功時, 失敗)
2011年10月24日月曜日
var video = document.getElementsByTagName()[0];navigator.getUserMedia('video', successCallback);function successCallback( stream ) { video.src = stream;}
JavaScript
<video autoplay></video>
HTML
2011年10月24日月曜日
簡単なデモ ! クリックで連写
2011年10月24日月曜日
簡単なデモ !クリックで連写ボタンをクリックするたびにcanvasを生成してDOMに配置。
クリック
canvasを生成
canvasにvideoを描画
DOMにappendする
2011年10月24日月曜日
jQuery(function ($){var video = $("video")[0];navigator.getUserMedia("video", function (s){
video.src = s;$("#shutter").bind("click", function (){
var canvas = $("<canvas />")[0];canvas.getContext("2d").drawImage(video, 0, 0);$("#shotted").append(canvas);
}); });});
<p id="shutter">撮影</p>
<video autoplay width="200"></video><div id="shotted"></div>
JavaScript
HTML
2011年10月24日月曜日
canvasとvideoの大きさを合わせるために変形をかけて、大きさを同じにすると…
index2.html
2011年10月24日月曜日
複雑なデモ !ポリゴンメッシュで撮影した画像を変形canvas画像を三角分割してグニャグニャに曲げる。
2011年10月24日月曜日
W3CワーキングドラフトのPeer to Peerなどで
スカイプのようなビデオネット会議をするには
まだまだこれから時間がかかると思われる
2011年10月24日月曜日
グラフィックを扱うアプリケーションの開発案件は徐々に相談ベースでも増えてきている
カメラはともかく、今出来る事を知っておこう
2011年10月24日月曜日
Thank you :3 :)
2011年10月24日月曜日