paulkoegel/jsbin.xikin.css

## jsbin.xikin.css
#wrapper {
  position: relative;
  margin: 0 auto;
  width: 800px;
  text-align: center;
}
#doge {
  width: 500px;
  height: 576px;
}
#startbutton {
  background: green;
  border: none;
  color: #fff;
  margin: 100px 20px 20px 20px;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 10px;
  position: absolute;
  bottom: -150px;
  left: 50%;
  width: 133px;
  margin-left: -66px;
}
#canvas {
  display: none;
}
#video, #photo {
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -150px;
  border: 10px solid #eee;
  border-radius: 10px;
  box-shadow: 3px 3px 10px rgba(40, 40, 40, 0.6);
  background-color: black;
  height: 225px;
  width: 300px;
}
#photo {
  display: none;
}

## jsbin.xikin.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <div id='wrapper'>
    <img id='#doge' src='https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/cff5aac1e087caa046569b8054f5ba3f/tumblr_n031k8OAM31tqxqa3o1_500.png'>
    <video id="video"></video>
    <button id="startbutton">Take a photo</button>
    <img src="" id="photo" alt="photo">
  </div>

  <canvas id="canvas"></canvas>

</body>
</html>

## jsbin.xikin.js
(function() {

  var streaming = false,
      video     = document.querySelector('#video'),
      cover     = document.querySelector('#cover'),
      canvas    = document.querySelector('#canvas'),
      photo     = document.querySelector('#photo'),
      startbutton = document.querySelector('#startbutton'),
      width = 300,
      height = 0;

  navigator.getMedia = ( navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia);

  navigator.getMedia(
    {
      video: true,
      audio: false
    },
    function(stream) {
      if (navigator.mozGetUserMedia) {
        video.mozSrcObject = stream;
      } else {
        var vendorURL = window.URL || window.webkitURL;
        video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

  video.addEventListener('canplay', function(ev){
    if (!streaming) {
      height = video.videoHeight / (video.videoWidth/width);
      video.setAttribute('width', width);
      video.setAttribute('height', height);
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      streaming = true;
    }
  }, false);

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
    video.style.display = 'none';
    photo.style.display = 'inline';
  }

  startbutton.addEventListener('click', function(ev){
      takepicture();
    ev.preventDefault();
  }, false);

})();
	#wrapper {
	position: relative;
	margin: 0 auto;
	width: 800px;
	text-align: center;
	}
	#doge {
	width: 500px;
	height: 576px;
	}
	#startbutton {
	background: green;
	border: none;
	color: #fff;
	margin: 100px 20px 20px 20px;
	padding: 10px 20px;
	font-size: 20px;
	border-radius: 10px;
	position: absolute;
	bottom: -150px;
	left: 50%;
	width: 133px;
	margin-left: -66px;
	}
	#canvas {
	display: none;
	}
	#video, #photo {
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -150px;
	border: 10px solid #eee;
	border-radius: 10px;
	box-shadow: 3px 3px 10px rgba(40, 40, 40, 0.6);
	background-color: black;
	height: 225px;
	width: 300px;
	}
	#photo {
	display: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>

	<body>

	<div id='wrapper'>
	<img id='#doge' src='https://gs1.wac.edgecastcdn.net/8019B6/data.tumblr.com/cff5aac1e087caa046569b8054f5ba3f/tumblr_n031k8OAM31tqxqa3o1_500.png'>
	<video id="video"></video>
	<button id="startbutton">Take a photo</button>
	<img src="" id="photo" alt="photo">
	</div>

	<canvas id="canvas"></canvas>

	</body>
	</html>
	(function() {

	var streaming = false,
	video = document.querySelector('#video'),
	cover = document.querySelector('#cover'),
	canvas = document.querySelector('#canvas'),
	photo = document.querySelector('#photo'),
	startbutton = document.querySelector('#startbutton'),
	width = 300,
	height = 0;

	navigator.getMedia = ( navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia);

	navigator.getMedia(
	{
	video: true,
	audio: false
	},
	function(stream) {
	if (navigator.mozGetUserMedia) {
	video.mozSrcObject = stream;
	} else {
	var vendorURL = window.URL \|\| window.webkitURL;
	video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
	}
	video.play();
	},
	function(err) {
	console.log("An error occured! " + err);
	}
	);

	video.addEventListener('canplay', function(ev){
	if (!streaming) {
	height = video.videoHeight / (video.videoWidth/width);
	video.setAttribute('width', width);
	video.setAttribute('height', height);
	canvas.setAttribute('width', width);
	canvas.setAttribute('height', height);
	streaming = true;
	}
	}, false);

	function takepicture() {
	canvas.width = width;
	canvas.height = height;
	canvas.getContext('2d').drawImage(video, 0, 0, width, height);
	var data = canvas.toDataURL('image/png');
	photo.setAttribute('src', data);
	video.style.display = 'none';
	photo.style.display = 'inline';
	}

	startbutton.addEventListener('click', function(ev){
	takepicture();
	ev.preventDefault();
	}, false);

	})();