<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webcam demo</title>
<meta name="author" content="terry - gbin1.com">
<meta name="description" content="HTML5 webcam demo">
<meta name="keywords" content="HTML5,webcam,gbin1.com, gbin1, gbtags">
<link href='http://fonts.googleapis.com/css?family=Revalia' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/jquery.qtip.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/photobooth_min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="js/gbin1.js"></script>
<style>
body{
font-size:12px;
background: #333;
font-family: 'Revalia', cursive, arial;
}
div#pictures,div#webcam{
margin: 10px 0 0;
}
h1{
margin: 20px 0;
}
div#from{
margin:20px 0px;
}
div#from a{
color: #FFF;
font-size:12px;
background: #1557C3;
margin: 20px 0;
border-radius: 5px;
padding:10px;
line-height: 25px;
}
h1 a{
background: #333;
border-radius: 5px;
padding: 5px;
float:right;
cusor: hand;
color: #FFF;
text-decoration: none;
margin-left: 20px;
}
#main{
width: 800px;
margin: 10px auto;
background: #FFF;
color: #333;
border: 2px solid #FFF;
box-shadow: 0px 0px 10px #CCC;
padding:20px;
border-radius: 5px;
}
#main article{
margin-bottom: 50px;
background: #F8F8F8;
border-radius: 5px;
padding:20px;
border: 1px solid #bbb;
}
#main #webcam{
height: 400px;
width: 100%;
}
#main #plist{
margin: 20px 0;
font-weight: bold;
border-radius: 5px;
background: #CCC;
padding:10px;
}
#main img{
margin-bottom: 50px;
background: #F8F8F8;
border-radius: 10px;
box-shadow: 0px 0px 5px #888;
}
.clear{
clear:both;
}
#main ul{
list-style:none;
margin:0;
padding:0;
}
#main .photobooth{
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<section id="main">
<h1> HTML5 Webcam <a href="http://www.gbin1.com" id="site">By GBin1.com</a> </h1>
<article>
<h1>click the controll menu below, you can controll crop, hue, brightness, take picture </h1>
<div id="webcam"></div>
<div id="plist"> picture list </div>
<div id="pictures"><div class="nopic">no pictures</div></div>
<div id="from">
<a href="http://www.gbin1.com/gb/">via gbtags.com</a>
</div>
<div class="clear"></div>
</article>
</section>
</body>
</html>
HTML5调用摄像头拍照
5星 · 超过95%的资源 需积分: 11 115 浏览量
2017-07-14
11:53:49
上传
评论 1
收藏 56KB RAR 举报 
HTML5 Webcam.rar （6个子文件） 
HTML5 Webcam 
index.html 3KB js 
jquery.qtip.min.js 40KB photobooth_min.js 12KB jquery-1.8.2.min.js 91KB gbin1.js 1KB css jquery.qtip.css 13KB资源评论
tangtangangel2018-10-17非常好，谢谢分享
Isabelle_Yan2017-12-08挺好的，可以连续拍几张，如果能自动下载到本地就更好了- qq_352367672018-09-18挺好的，可以用
- 枫之幻月2018-05-06很好的资料,很齐全,谢谢.
