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

来源：动视网责编：小采时间：2020-11-27 15:08:42

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

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

推荐度：

点击下载本文 文档为doc格式

导读分享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 ='width：640px; height：480px'> </ 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摄像头拍照的图文详情