getUserMedia

CSS

.grayscale {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
    
      -webkit-filter: contrast(1);
  -moz-filter: contrast(1);
  -o-filter: contrast(1);
  -ms-filter: contrast(1);
  filter: contrast(1);
    
      -webkit-filter: brightness(5);
  -moz-filter: brightness(5);
  -o-filter: brightness(5);
  -ms-filter: brightness(5);
  filter: brightness(5);


}

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('#basic-stream');

var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
};

navigator.getUserMedia({
    video: true
}, function(stream) {
    if (navigator.webkitGetUserMedia) {
        video.src = window.webkitURL.createObjectURL(stream);
    } else {
        video.src = stream; // Opera
    }
}, onFailSoHard);