Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<doctype html>
<html>
<head>
  <style>
    #snapshotCanvas {
  width: 307px;
  height: 250px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #ccc;
}
#output {
  width: 307px;
  height: 250px;
  background: rgba(255,255,255,0.5);
  border: 0px solid #ccc;
}
#screenshot-stream {
  width: initial;
  height: initial;
}
#screenshot {
  vertical-align: top;
}
.blur {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}
.brightness {
  -webkit-filter: brightness(5);
  -moz-filter: brightness(5);
  -o-filter: brightness(5);
  -ms-filter: brightness(5);
  filter: brightness(5);
}
.contrast {
  -webkit-filter: contrast(8);
  -moz-filter: contrast(8);
  -o-filter: contrast(8);
  -ms-filter: contrast(8);
  filter: contrast(8);
}
.hue-rotate {
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  -o-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.hue-rotate2 {
  -webkit-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -o-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.hue-rotate3 {
  -webkit-filter: hue-rotate(270deg);
  -moz-filter: hue-rotate(270deg);
  -o-filter: hue-rotate(270deg);
  -ms-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}
.saturate {
  -webkit-filter: saturate(10);
  -moz-filter: saturate(10);
  -o-filter: saturate(10);
  -ms-filter: saturate(10);
  filter: saturate(10);
}
.grayscale {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1);
}
.sepia {
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  -o-filter: sepia(1);
  -ms-filter: sepia(1);
  filter: sepia(1);
}
.invert {
  -webkit-filter: invert(1);
  -moz-filter: invert(1)
  -o-filter: invert(1)
  -ms-filter: invert(1)
  filter: invert(1)
}
</style>
</head>
  <body>
<video id="output" width="200" height="200" autoplay>Put your fallback message here.</video> 
    <canvas id="snapshotCanvas" width="200" height="200"></canvas><p>
    <button id="startVideoCapture">Start Capture</button>
 <button id="stopVideoCapture">Stop Capture</button>
     <button id="takeSnapshot">Take snapshot</button>
  
<script>
​
    var n = navigator, is_webkit = false;
    var vido = document.getElementById('output');
    var canvas = document.querySelector('#snapshotCanvas');
    var context = canvas.getContext('2d');
  var is_mozilla=false;
​
  
document.querySelector('#stopVideoCapture').addEventListener('click', function(e) {
  output.pause();
}, false);
  document.querySelector('#startVideoCapture').addEventListener('click', function(e) {
  startCapture();
}, false);
   document.querySelector('#takeSnapshot').addEventListener('click', function(e) {
  takeSnapshot();
}, false);
  
   function onSuccess(stream) {
        var video = document.getElementById('output'),
            source;
​
        video.autoplay = true;
​
      var source;
​
        if (!is_webkit) {
            source = stream;
        }
        else {
            source = window.webkitURL.createObjectURL(stream);
        }
​
        if (is_mozilla) {
            video.mozSrcObject = source;
        } else {
             video.src = source;
        }
    }
​
    function onError() {
        // getUserMedia API not supported, or another application is using the webcam !
    }
​
  function startCapture() {
   if (navigator.mozGetUserMedia) {
        is_mozilla = true;
        navigator.mozGetUserMedia({video:true, audio:false}, onSuccess, onError);
    }
    else if (navigator.getUserMedia) {
        navigator.getUserMedia({video:true, audio:false}, onSuccess, onError);
    }
    else if (navigator.webkitGetUserMedia) {
        is_webkit = true;
        navigator.webkitGetUserMedia({video:true, audio:false}, onSuccess, onError);
    }
  }
  
  takeSnapshot = function() {
    context.drawImage(output, 0, 0, canvas.width, canvas.height);
  }
    
  var idx = 0;
  var filters = [
    'grayscale',
    'sepia',
    'blur',
    'brightness',
    'contrast',
    'hue-rotate', 'hue-rotate2', 'hue-rotate3',
    'saturate',
    'invert',
    ''
  ];
  
  function changeFilter(e) {
    var el = e.target;
    el.className = '';
    var effect = filters[idx++ % filters.length];
    if (effect) {
      el.classList.add(effect);
    }
  }
  
  output.addEventListener('click', changeFilter, false);
</script>
</body>
</html>
 
if (document.getElementById('hello')) {
  document.getElementById('hello').innerHTML = 'Hello World - this was inserted using JavaScript';
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers