使用 UserMedia API 訪問攝像頭的功能
最新版本的 chrome、firefox、 opera 已經支持
跟新：加入關閉攝像頭方法
<!DOCTYPE html>
<html>
<head>
<title>Camera and Video Control with HTML5 Example</title>
<style>
video,img { display: block; margin: 0 0 20px 0; }
</style>
</head>
<body>
<div id="page">
<div id="contentHolder">
<!--
<div>
<!-- camera--照相機；camcorder--攝像機；microphone--錄音 -->
<input id="uploadimg" type="file" accept="image/*" capture="camera" />
</div>
-->
<section class="left">
<h1>Camera and Video Control with HTML5</h1>
<video id="video" autoplay ></video>
<button id="btnStop" data-status='1'>stop</button>
<button id="btn">Take Photo</button><br />
<img id="photo" />
<script>
document.getElementsByTagName('input')[0].addEventListener('change',function(){
var file=this.files[0];
var formatDate = function(date){
return date.getFullYear()
+'-'+(date.getMonth()+1)
+'-'+date.getDate()
+' '+date.getHours()
+':'+date.getMinutes()
+':'+date.getSeconds();
};
var s = 'now: '+formatDate(new Date())+'<hr />';
for(var k in file){
if(file.hasOwnProperty(k)&&typeof(k)=='string'){
if(k=='lastModifiedDate'){
s+= k+': '+formatDate(file[k])+'<br/>';
}else{
s+= k+': '+file[k]+'<br/>';
}
}
}
var el = document.createElement('div');
el.innerHTML = s;
this.parentNode.appendChild(el);
/*
var reader = new FileReader();
reader.onloadend = function() {
console.log('reader>>>',this);
};
reader.readAsDataURL(file);
*/
},false);
window.addEventListener("DOMContentLoaded", function(){
var width = 480;
var photo = document.getElementById("photo");
var video = document.getElementById("video");
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var mediaErr = function(error) {
console.log("media error: ",error);
};
var mediaConf = {
video: true , //開始攝像頭
audio: false //開啟麥克風
};
window.videoStream;
//stop camera
document.getElementById('btnStop').addEventListener('click',function(){
if(this.dataset.status==1){
videoStream.stop();
this.dataset.status=0;
this.innerHTML='play';
}else{
openMedia();
this.dataset.status=1;
this.innerHTML='stop';
}
});
//event:take photo
document.getElementById("btn").addEventListener("click", function(){
context.drawImage(video, 0, 0, video.width, video.height);
photo.setAttribute('src', canvas.toDataURL('image/png'));
});
//event: resize video
video.addEventListener('play', function(ev){
setTimeout(function(){
if(video.videoWidth){
height = video.videoHeight/(video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
photo.setAttribute('width', width);
photo.setAttribute('height', height);
}else{
setTimeout(arguments.callee,100);
}
},100);
}, false);
// open media
function openMedia(){
if(navigator.getUserMedia) { // Standard, opera
navigator.getUserMedia(mediaConf, function(stream) {
videoStream = stream;
video.src = stream;
video.play();
}, mediaErr);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed, chrome
navigator.webkitGetUserMedia(mediaConf, function(stream){
videoStream = stream;
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, mediaErr);
}else if(navigator.mozGetUserMedia){ // firefox
navigator.mozGetUserMedia(mediaConf,function(stream){
videoStream = stream;
video.mozSrcObject = stream;
video.play();
},mediaErr);
}else{
console.log('your browser do not support UserMedia API');
}
}
openMedia();
}, false);
</script>
</section>
</div>
</body>
</html>