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