zoukankan      html  css  js  c++  java
  • 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='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>  
  • 相关阅读:
    UML类图(上):类、继承和实现
    Maven实战:Maven生命周期
    MyBatis6:MyBatis集成Spring事物管理(下篇)
    MyBatis5:MyBatis集成Spring事务管理(上篇)
    Spring7:基于注解的Spring MVC(下篇)
    Spring6:基于注解的Spring MVC(上篇)
    Spring5:@Autowired注解、@Resource注解和@Service注解
    Dubbo学习小记
    Maven入门详解
    MyBatis4:动态SQL
  • 原文地址:https://www.cnblogs.com/lr393993507/p/5702869.html
Copyright © 2011-2022 走看看