HTML5按鍵打開攝像頭和拍照
HTML5實現按鍵打開攝像頭和拍照
步驟：
1、創建一個打開攝像頭按鈕的標簽、video標簽、拍照的按鈕標簽、畫布
2、實現打開攝像頭的功能
3、實現拍照功能
具體實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>takePhoto</title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded",function(){
var drawing = document.getElementById("drawing");
if(drawing.getContext)
{
context = drawing.getContext("2d");
}
var video = document.getElementById("video");
var med = {video:true};
var errBack = function(e)
{
alert("An error has occurred",e)
}
var onCamera = document.getElementById("onCamera");
var takePhoto = document.getElementById("takePhoto")
//實現通過按鈕打開攝像頭的功能
onCamera.addEventListener("click",function(){
f(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia(med).then(function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
})
console.log(navigator.mediaDevices.getUserMedia(med))
}
},false);
//實現將拍照功能
takePhoto.addEventListener("click",function(stream){
context.drawImage(video,0,0,640,480)
},false);
},false)
</script>
</head>
<body>
<button id="onCamera">打開攝像頭</button>
<video id="video" width="640" height="480"></video>
<button id="takePhoto">拍照</button>
<canvas id="drawing" width="640" height="480">A drawing of something</canvas>
</body>
</html>
HTML5按鍵打開攝像頭和拍照