HTML5按键打开摄像头和拍照

最新推荐文章于 2024-05-14 10:41:24 发布

weixin_30736301

最新推荐文章于 2024-05-14 10:41:24 发布

阅读量296

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MyUniverse/p/10014231.html

版权

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>