Opera Labs Camera and Pagesを使ってみました

Opera Labs Camera and PagesMac/WinでもHTML5でWebカメラ

を使ってみました。

2011年10月24日月曜日

前回の勉強会でお話した時はAndroid版Operaだけでしたが…


http://labs.opera.com/news/2011/10/19/




自己紹介秋葉秀樹グラフィック&ビジュアル&UIデザイナー

広告業界で20年、主にグラフィックデザインの仕事に携わる。電車内広告や屋外広告を始めとするあらゆる「人の目に留まるもの」に対しいかに訴求力とコミュニケーション能力を打ち出せるか？という問題を日々考える。

DTP / 3DCGによるビジュアルグラフィック制作Flash ActionScriptを使ったリッチインターネットアプリケーションの開発Webデザイン講師 / 執筆のお仕事

主な業務


執筆書籍

Facebookページプロフェッショナルガイド

CSS3デザインプロフェッショナルガイド

寄稿など


前回のデモを寄稿させていただきました今回はこれのPC版です


HTML video要素

カメラにアクセス

映像（Stream）データ

JavaScript取得に成功したら…

エラー処理

取得に失敗したら…

navigator.getUserMedia('video', 成功時, 失敗)


var video = document.getElementsByTagName()[0];navigator.getUserMedia('video', successCallback);function successCallback( stream ) { video.src = stream;}

JavaScript

<video autoplay></video>

HTML


簡単なデモ ! クリックで連写


簡単なデモ !クリックで連写ボタンをクリックするたびにcanvasを生成してDOMに配置。

クリック

canvasを生成

canvasにvideoを描画

DOMにappendする


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


canvasとvideoの大きさを合わせるために変形をかけて、大きさを同じにすると…

index2.html


複雑なデモ !ポリゴンメッシュで撮影した画像を変形canvas画像を三角分割してグニャグニャに曲げる。


W3CワーキングドラフトのPeer to Peerなどで

スカイプのようなビデオネット会議をするには

まだまだこれから時間がかかると思われる


グラフィックを扱うアプリケーションの開発案件は徐々に相談ベースでも増えてきている

カメラはともかく、今出来る事を知っておこう


Thank you :3 :)


Technology

Opera Labs Camera and Pagesを使ってみました