getUserMedia APIでhtmlにWebカメラの映像を表示してみる

2016.11.28 l＠ha

macに内臓されているカメラを使用してHTMLに映像を出力してみる。

<!DOCTYPE html>
<html>
<head>
	<title>Webカメラ</title>
</head>

<body>
<video id="video"></video>
<script>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({
	video:true,
	audio:true
},function(stream){
	video.src = URL.createObjectURL(stream);
	video.play();
},function(error){
	console.log(error);
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Webカメラ</title>

</head>

<body>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({

video:true,

audio:true

},function(stream){

video.src = URL.createObjectURL(stream);

video.play();

},function(error){

console.log(error);

});

</script>

</body>

</html>

ただ、firefoxではローカルでも動作するが、Chromeだとローカルでは動作しま…

2016年11月

[Node.js] Socket.ioのsendとemitの違い

getUserMedia APIでhtmlにWebカメラの映像を表示してみる

ABOUT

新着エントリー

アーカイブ

カテゴリー

2016年11月

[Node.js] Socket.ioのsendとemitの違い

getUserMedia APIでhtmlにWebカメラの映像を表示してみる

ABOUT

新着エントリー

よく読まれている投稿

アーカイブ

カテゴリー