• 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>  
  • 相关阅读:
    filter过滤组件Grok 正则捕获
    Logstash 最佳实践配置语法
    【小记】Ubuntu 工具链升级 gcc 流程
    图数据集cora详解
    HGNN超图神经网络代码
    modelnet40数据集
    GCN代码解读(版本1)
    GCN代码解读(版本2:github版本)
    企业微信代开发自建应用开发
    企业微信服务商工具实现
  • 原文地址:https://www.cnblogs.com/lr393993507/p/5702869.html
Copyright © 2020-2023  润新知