HTML5调用手机摄像头

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <video id="video" autoplay=""style='width:640px;height:480px'></video>  
  9. <div><button id='picture' style="width: 100%;">PICTURE</button></div>  
  10. <canvas id="canvas" width="640" height="480"></canvas>  
  11. <script type="text/javascript">  
  12. var video = document.getElementById("video");  
  13. var context = canvas.getContext("2d");  
  14. var errocb = function () {  
  15.     console.log('sth wrong!');  
  16. }  
  17.   
  18. if (navigator.getUserMedia) { // 标准的API  
  19.     navigator.getUserMedia({ "video": true }, function (stream) {  
  20.         video.src = stream;  
  21.         video.play();  
  22.     }, errocb);  
  23. } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API  
  24.     navigator.webkitGetUserMedia({ "video": true }, function (stream) {  
  25.         video.src = window.webkitURL.createObjectURL(stream);  
  26.         video.play();  
  27.     }, errocb);  
  28. }  
  29.   
  30. document.getElementById("picture").addEventListener("click", function () {  
  31.     context.drawImage(video, 0, 0, 640, 480);  
  32. });  
  33. </script>  
  34.   
  35. </body>  
  36. </html>  

你可能感兴趣的:(HTML5调用手机摄像头)