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>

 

 

 

 

 

 

posted @ 2018-11-24 23:57  Myuniverse  阅读(707)  评论(0编辑  收藏