html5调用摄像头实现拍照

最新推荐文章于 2023-04-07 13:55:15 发布

weixin_33795833

最新推荐文章于 2023-04-07 13:55:15 发布

阅读量158

点赞数

文章标签： javascript ViewUI

技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像，网站提供自动拍照功能。还有在登录了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>