所属分类：web前端开发
微博登录
QQ登录 <！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调用摄像头实现拍照的实例教程的详细内容，更多请关注zzsucai.com其它相关文章！
