投稿者 tel | 2012年4月30日

Webカメラの画像をWebGLのテクスチャに貼る

Google ChormeとOpera NextではWebRTCというのでWebカメラの画像を表示できるみたい。

<video id="video" width="256" height="256" autoplay style=""></video>

videoタグを用意しておく。

if(navigator.webkitGetUserMedia) {
	navigator.webkitGetUserMedia("audio, video", success, error);
} else if(navigator.getUserMedia) {
	navigator.getUserMedia("audio, video", success, error);
}

function success(stream) {
	console.log(stream);
	var video = document.getElementById('video');
	video.src = window.webkitURL ? window.webkitURL.createObjectURL(stream) : stream;
}

function error(err) {
	console.log(err);
}

Google Chromeの場合はwebkitGetUserMediaをOperaの場合はgetUserMediaを使う。

Google Chromeでカメラを使うには起動オプションに–enable-media-streamをつける必要がある。(chrome://flagsからもできる?)
あと実行したときに上のほうに出る「許可」ボタンを押す。
WebGLのテクスチャで使うにはtexImage2Dの引数にvideo要素を渡す。

var video = document.getElementById('video');
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, video);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

テクスチャを生成する際にvideoの大きさが2^nになっていない場合(NPOT)、上記のようにクランプとフィルタの設定をする必要がある。
http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences
videoタグで幅と高さを指定してもWebカメラが対応していない場合は意味ないようなので注意。

キューブにカメラの画像を張ってみたテスト
http://jsdo.it/sapphire_al2o3/fAVY

Operaのサイトのデモ
http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/


Responses

  1. カメラ画像貼付けようと思っていなかったので、参考にしようと思います。

    • お役に立てたなら何よりです。

  2. 早速、参考に作ってみました。結構簡単に出来てしまいますね。

    http://3dassociates.wordpress.com/2012/10/01/ウェブカメラと3dのモデルを連携-外壁シミュレー/


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。