首页 > 文章 > web前端 > 分享h5调用摄像头实现拍照的实例教程

分享h5调用摄像头实现拍照的实例教程

零下一度原创: 2017-05-31 15:20:395738浏览

技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像，网站提供自动拍照功能。还有在登录了电脑之后，手机端进行登录时只需要扫描一下电脑上的二维码就可以登录。这对一个网络来说难度是极大的。技术的进步使我们遇到了HTML5下面这个简单粗暴的演示就是来完成这些功能的直接看代码：

 <！DOCTYPE html>  
    <HTML>  
    <HEAD>  
        <TITLE> HTML5调用摄像头实现拍照</ TITLE>  
        <meta charset =“utf-8”>  
        <meta name =“viewport”content =“width = device-width，initial-scale = 1”>  
    </ HEAD>  
    <BODY>  
    <video id =“video”autoplay =“”style =&#39;width：640px; height：480px&#39;> </ video>  
    <button id =“paizhao”>拍照</ button>   
    <canvas id =“canvas”width =“640”height =“480”> </ canvas>  
    <script type =“text / javascript”>  
        var video = document.getElementById（“video”）;  
        var context = canvas.getContext（“2d”）;  
        var errocb = function（）{  
            console.log（“sth srong”）;  
        }  
        如果（navigator.getUserMedia）{  
            navigator.getUserMedia（{ “视频”：真}，函数（流）{  
                video.src =流;  
                video.play（）;  
            }，errocb）;  
        } else if（navigator.webkitGetUserMedia）{  
            navigator.webkitGetUserMedia（{ “视频”：真}，函数（流）{  
                video.src = window.webkitURL.createObjectURL（流）;  
                video.play（）;  
            }，errocb）;  
        }  
        的document.getElementById（ “paizhao”）的addEventListener（ “点击”，函数（）{  
            context.drawImage（视频，0,0,640,480）;  
        }）;  
    </ SCRIPT>  
    </ BODY>  
    </ HTML>

【相关推荐】

5. 详细介绍AngularJS中使用HTML5摄像头拍照的图文详情

以上是分享h5调用摄像头实现拍照的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：分享html5中localStorage的实例教程下一篇：h5中main元素的实例详解

查看更多