<!DOCTYPE html>
<html>
<head>
<title>getUserMedia Demo 3</title>
<style>
video {
    border:5px solid black;
    width:480px;
    height:360px;
}
canvas {
    border:5px solid black;
    width:480px;
    height:360px;
}
button {
    font: 18px sans-serif;
    padding: 8px;
}  
.grayscale {
  -webkit-filter: grayscale(1);
}
.sepia {
  -webkit-filter: sepia(1);
}
.invert {
  -webkit-filter: invert(1);
}
.blur {
  -webkit-filter: blur(3px);
}
</style>
</head>
<body>
<video id="vid" autoplay="true"></video>
<canvas id="cvs"></canvas>
<br>
<button id="btn1" onclick="start()">Start</button>
<button id="btn2" onclick="change()">Change Filter</button>
<button id="btn3" onclick="snap()">Snapshot</button>
<script>
filters = ["", "sepia", "invert", "blur", "grayscale"];
findex = 0;
video = document.getElementById("vid");
canvas = document.getElementById("cvs");
canvas.width = 480;
canvas.height = 360;  
btn2.disabled = true;
btn3.disabled = true;
function start() {
  navigator.webkitGetUserMedia({video:true}, gotStream, function() {}); 
  btn1.disabled = true;
}
function gotStream(stream) {
  video.src = webkitURL.createObjectURL(stream);
  btn2.disabled = false;
  btn3.disabled = false;
}
function change() {
  video.className = '';
  findex = (findex + 1) % filters.length;
  if (findex != 0)
    video.classList.add(filters[findex]);
}
function snap() {
  canvas.className = '';
  if (findex != 0)
    canvas.classList.add(filters[findex]);
  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>