分享h5调用摄像头实现拍照的实例教程
导读：收集整理的这篇文章主要介绍了分享h5调用摄像头实现拍照的实例教程，觉得挺不错的，现在分享给大家，也给大家做个参考。技术时刻都在前进着。我们的需求也是时刻在改变着。最近在开发中遇到了用户进行账号注册时需要个人图像，网站提供自动拍照功能。还有在...
收集整理的这篇文章主要介绍了分享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摄像头拍照的图文详情
以上就是分享h5调用摄像头实现拍照的实例教程的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 分享h5调用摄像头实现拍照的实例教程
本文地址： https://pptw.com/jishu/583274.html