html5調用攝像頭實現拍照


技術時刻都在前進着。我們的需求也是時刻在改變着。最近在開發中遇到了用戶進行賬號注冊時需要個人圖像,網站提供自動拍照功能。還有在登錄了PC之后,手機端進行登錄時只需要掃描一下PC上的二維碼就可以登錄。這對一個網絡來說難度是極大的。

技術的進步使我們遇到了html5。下面這個簡單粗暴的demo就是來完成這些功能的。直接看代碼:

 1   <!DOCTYPE html>  
 2     <html>  
 3     <head>  
 4         <title>html5調用攝像頭實現拍照</title>  
 5         <meta charset="utf-8">  
 6         <meta name="viewport" content="width=device-width, initial-scale=1">  
 7     </head>  
 8     <body>  
 9     <video id="video" autoplay=""style='width:640px;height:480px'></video>  
10     <button id="paizhao">拍照</button>   
11     <canvas id="canvas" width="640" height="480"></canvas>  
12     <script type="text/javascript">  
13         var video=document.getElementById("video");  
14         var context=canvas.getContext("2d");  
15         var errocb=function(){  
16             console.log("sth srong");  
17         }  
18         if(navigator.getUserMedia){  
19             navigator.getUserMedia({"video":true},function(stream){  
20                 video.src=stream;  
21                 video.play();  
22             },errocb);  
23         }else if(navigator.webkitGetUserMedia){  
24             navigator.webkitGetUserMedia({"video":true},function(stream){  
25                 video.src=window.webkitURL.createObjectURL(stream);  
26                 video.play();  
27             },errocb);  
28         }  
29         document.getElementById("paizhao").addEventListener("click",function(){  
30             context.drawImage(video,0,0,640,480);  
31         });  
32     </script>  
33     </body>  
34     </html>  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM