ブラウザ内でカメラ

https://developer.mozilla.org/en/docs/WebRTC/navigator.getUserMedia
内容としては、ほぼ上記サイトのままなんですが、一度試してみました。
現状では、Chrome、Firefox、Operaで動作を確認できますが、Safariなど非対応のブラウザでは、デモのところに「使えません!」と表示されるようにしてあります。対応するブラウザであれば、ポップアップまたは画面上部に確認のダイアログが出ますので、許可してください。動画はローカルで完結しており、どこかに流したりはしておりません。
デモを見た限りでは、足がかりは簡単なので、CSS Filterやcanvasで後処理をしたらいろんなことができそうですね。

デモ

HTML

JavaScript

var video = document.querySelector('video');
if(hasGetUserMedia()) {
	navigator.getUserMedia = (
		navigator.getUserMedia ||
		navigator.webkitGetUserMedia ||
		navigator.mozGetUserMedia ||
		navigator.msGetUserMedia
	);
	window.URL = (
		window.URL ||
		window.webkitURL
	);
	
	navigator.getUserMedia (
	   {
	      video: true,
	      audio: false
	   },
	   function(localMediaStream) {
	      video.src = window.URL.createObjectURL(localMediaStream);
	      video.onloadedmetadata = function(e) {
//取り込み後作業
	      };
	   },
		function(e) {
			console.log('failure', e);
		}
	);
} else {
	var cam = document.querySelector('.camera');
	cam.removeChild(video);
	var err = document.createElement('p');
	err.innerHTML = '使えません!';
	cam.appendChild(err);
}

function hasGetUserMedia() {
	return !!(
		navigator.getUserMedia ||
		navigator.webkitGetUserMedia ||
		navigator.mozGetUserMedia ||
		navigator.msGetUserMedia
	);
}

NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

上記のデモをローカルで実行すると、Chromeでは次のようなエラーが出て動きません。
NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
サーバにアップすれば、問題なく動くはずです。
参考:http://updates.html5rocks.com/2012/12/WebRTC-hits-Firefox-Android-and-iOS

その他参考

Webcam Toy : Macに入っているPhoto Booseのように、いろんなエフェクトを掛けて楽しめます。

Magic Xylophone : 動きを検出して、画面上のシロフォンを鳴らせます。Kinectみたいですね。


タグ:html5 JavaScript