Skip to content

Commit 394893f

Browse files
fofrfofr
committed
Add webcam experiments
* Add mask overlay with getUserMedia * Add content scaling
1 parent 3998fda commit 394893f

File tree

8 files changed

+674
-1
lines changed

8 files changed

+674
-1
lines changed

‎experiment-styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ body {
132132
font-size: 1em;
133133
line-height: 1.5em; /* 16px/24px default */
134134
color: #666;
135-
background: #faf7ee;
135+
background: #f1ebe2;
136136
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
137137
font-weight: 200;
138138
}

‎webcam/css/experiment.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.transforming-content {
2+
height: 200px;
3+
width: 200px;
4+
border-radius: 5px;
5+
overflow: hidden;
6+
color: #fff;
7+
padding: 30px;
8+
background: rgba(0,0,0,0.8);
9+
margin: 0 auto;
10+
11+
-webkit-transition: -webkit-transform 500ms;
12+
-ms-transition: -ms-transform 500ms;
13+
-o-transition: -o-transform 500ms;
14+
transition: transform 500ms;
15+
}
16+
17+
canvas.scale {
18+
position: fixed;
19+
border-radius: 5px;
20+
bottom: 10px;
21+
left: 10px;
22+
}
23+
24+
canvas.mask {
25+
margin: 0 auto;
26+
display: block;
27+
border-radius: 5px;
28+
}

‎webcam/img/mask.png

18.5 KB
Loading

‎webcam/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- Article: http://www.paulrhayes.com/2012-11/fun-with-face-detection-canvas-and-webcam-video -->
5+
<!-- Demo: http://www.paulrhayes.com/experiments/webcam/ -->
6+
<!-- Originally posted: 18th Nov 2012 -->
7+
<meta charset="UTF-8" />
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9+
<title>Face detection, canvas &amp; webcams &mdash; Paul Hayes</title>
10+
<meta name="author" content="Paul Hayes" />
11+
<link rel="stylesheet" href="../experiment-styles.css" />
12+
13+
<link rel="stylesheet" href="css/experiment.css" />
14+
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
15+
</head>
16+
<body class="experiment">
17+
<div id="wrapper">
18+
<p id="learn">
19+
This is a demo, <a href="http://www.paulrhayes.com/2012-11/fun-with-face-detection-canvas-and-webcam-video">learn how it works</a>.
20+
</p>
21+
<canvas width="200" height="160" class="scale"></canvas>
22+
23+
<p class="transforming-content">This element ought to shrink or grow as you move towards or away from it.</p>
24+
25+
<!-- Include the CCV image processing and face detection libraries -->
26+
<script src="js/ccv.js"></script>
27+
<script src="js/face.js"></script>
28+
</div>
29+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
30+
<script src="js/experiment.js"></script> </body>
31+
</html>

0 commit comments

Comments
 (0)