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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签实例教程

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

【

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集