Skip to content

Instantly share code, notes, and snippets.

@siyo siyo/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
zanzou-ken cam
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
body {
Background: #222;
}
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 640px;
height: 480px;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.photo {
position: absolute;
opacity: 0.3;
}
#cam {
position: absolute;
top: 100%;
visibility: hidden;
}
</style>
<title> zanzou-ken </title>
</head>
<body>
<div id="container">
</div>
<div id="cam"></div>
</body>
<footer>
<script src="./say-cheese.js"></script>
<script src="http://rawgit.com/leemachin/say-cheese/master/say-cheese.js"></script>
<script>
$(function() {
var sayCheese = new SayCheese('#cam', {snapshots: true});
var $container = $('#container');
var photos = [];
var td;
sayCheese.on('start', function() {
console.log('saCheese start!');
td = window.setInterval(this.takeSnapshot.bind(this), 200);
});
sayCheese.on('error', function(error) {
console.error(error);
});
sayCheese.on('snapshot', function(snapshot) {
var $photo = $('<img/>').attr({
class: 'photo',
src: snapshot.toDataURL()
})
.appendTo($container);
photos.push($photo);
while (photos.length > 10) {
$('#conteainer').children('.photo:first').remove();
photos.shift();
}
});
sayCheese.start();
});
</script>
</footer>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.