siyo/index.html

## index.html
<!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>
	<!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>