ブラウザ内でカメラ
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