- 追加された行はこの色です。
- 削除された行はこの色です。
a
HTML5では
getUserMediaというAPIを使うことで
ブラウザでカメラキャプチャーすることも可能です。
今回使うコードはこちらです
&ref(camera.html);
今回はローカルだとChromeで開くにはパーミッションが必要になるので
Chromeでもできるのですが
回避する方法はめんどくさいのでFirefoxで開きます
カメラとマイクを聞かれますので指定します
&ref(camera.png);
キャプチャーが開始されます
&ref(capture.png);
全ソースコードは次のようになります。
<!doctype html>
<html>
<head>
<title>カメラ</title>
<script type="text/javascript">
window.onload = function(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
var video = document.getElementById('myVideo');
var localStream = null;
navigator.getUserMedia(
{video: true, audio: true},
function(stream) { // for success case
console.log(stream);
video.src = window.URL.createObjectURL(stream);
},
function(err) { // for error case
console.log(err);
}
);
};
</script>
</head>
<body>
<video id="myVideo" width="400" height="300" autoplay="1" ></video>
</body>
</html>
やってることは単純で
getUserMediaから得たストリームをvideoタグのsrcに流し込みます
#vote(○[0],△[0],×[0])