HTML网页调用摄像头拍照的实现方法

时间:2021-11-25
类别:教程 - 网页设计

第一步:创建HTML元素

首先,我们要创建一个HTML5的文档。

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>无标题文档</title> 
  6. </head> 
  7.  
  8. <body> 
  9. </body> 
  10. </html> 

然后在<body></body>插入以下代码:

  1. <video id="video" width="640" height="480" autoplay></video> 
  2. <button id="snap">截图</button> 
  3. <canvas id="canvas" width="640" height="480"></canvas> 

第二步:创建JavaScript

首先,要在<head></head>里创建一个JavaScript:

  1. <script language="javascript"
  2.     // Grab elements, create settings, etc. 
  3. var video = document.getElementById('video'); 
  4.  
  5. // Get access to the camera! 
  6. if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
  7.     // Not adding `{ audio: true }` since we only want video now 
  8.     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
  9.         //video.src = window.URL.createObjectURL(stream); 
  10.         video.srcObject = stream; 
  11.         video.play(); 
  12.     }); 
  13. /* Legacy code below: getUserMedia  
  14. else if(navigator.getUserMedia) { // Standard 
  15.     navigator.getUserMedia({ video: true }, function(stream) { 
  16.         video.src = stream; 
  17.         video.play(); 
  18.     }, errBack); 
  19. } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
  20.     navigator.webkitGetUserMedia({ video: true }, function(stream){ 
  21.         video.src = window.webkitURL.createObjectURL(stream); 
  22.         video.play(); 
  23.     }, errBack); 
  24. } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed 
  25.     navigator.mozGetUserMedia({ video: true }, function(stream){ 
  26.         video.srcObject = stream; 
  27.         video.play(); 
  28.     }, errBack); 
  29. } 
  30. */ 
  31. </script> 

随后,要在刚才创建的HTML元素的后面插入以下代码:

  1. <script language="javascript"
  2.     // Elements for taking the snapshot 
  3. var canvas = document.getElementById('canvas'); 
  4. var context = canvas.getContext('2d'); 
  5. var video = document.getElementById('video'); 
  6.  
  7. // Trigger photo take 
  8. document.getElementById("snap").addEventListener("click"function() { 
  9.     context.drawImage(video, 0, 0, 640, 480); 
  10. }); 
  11. </script> 

现在,这个HTML就可以完成打开摄像头,和拍照的功能了!

    收藏