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