<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KRS8CM');</script>

ブラウザ内でカメラ

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

デモ

<script> var video = document.querySelector('.vd'); 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 ); } </script>

HTML

</pre>

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
<script type="text/javascript" id="zsiqchat">var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || {widgetcode: "siq61aecceb7ad0c24af4e4670187f03564ddd615eb71422e1b7169309fa9b25e89", values:{},ready:function(){}};var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;s.src="https://salesiq.zohopublic.com/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);</script>