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

ID:8128 / 打印

技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能。还有在登录了电脑之后,手机端进行登录时只需要扫描一下电脑上的二维码就可以登录。这对一个网络来说难度是极大的。技术的进步使我们遇到了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>

【相关推荐】

1. 通过H5实现拍照功能的实例详解

2. HTML5调用摄像头的示例代码分享

3. HTML5 程序设计

4. html5自定义遮罩的实现代码分享

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

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

作者:admin @ 24资源网   2024-09-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。