Skip to content
Browse files

added second text. webcam inversion

  • Loading branch information...
1 parent 811b26e commit eb5d7504e954296b1069af861c6f89c42411272e @joshmarinacci committed
Showing with 69 additions and 2 deletions.
  1. +2 −2 WebCam/test1.html
  2. +67 −0 WebCam/test2.html
View
4 WebCam/test1.html
@@ -1,9 +1,9 @@
<html>
<body>
-<h1>Get User Media Test 1</h1>
+<h1>Basic getUserMedia Example</h1>
-<p>You will need the latest chrome or opera beta to make this work.</p>
+<p>You will need the latest chrome beta to make this work.</p>
<!-- html tag for video. notice there is no src -->
<video autoplay></video>
View
67 WebCam/test2.html
@@ -0,0 +1,67 @@
+<html>
+<body>
+
+<h1>WebCam Snapshot Inverted</h1>
+
+<p>You will need the latest chrome beta for htis to work.</p>
+
+<!-- html tag for video. notice there is no src -->
+<video autoplay></video>
+
+<!-- init webcam -->
+<script language='javascript'>
+//hook up the webcam
+if(navigator.webkitGetUserMedia!=null) {
+ console.log("we have get user media");
+ var options = {
+ video:true,
+ audio:true
+ };
+
+ //request webcam access
+ navigator.webkitGetUserMedia(options,function(stream) {
+ //get the video tag
+ var video = document.querySelector('video');
+ //turn the stream into a magic URL
+ video.src = window.webkitURL.createObjectURL(stream);
+ },
+ function(e) {
+ console.log("error happened");
+ });
+}
+
+
+</script>
+
+
+<form>
+<input type='button' id='snapshot' value="snapshot"/>
+</form>
+
+<canvas id='canvas' width='640' height='480'></canvas>
+
+
+
+<script language='javascript'>
+document.getElementById('snapshot').onclick = function() {
+ var video = document.querySelector('video');
+ var canvas = document.getElementById('canvas');
+ var ctx = canvas.getContext('2d');
+ ctx.drawImage(video,0,0);
+ //get the canvas data
+ var data = ctx.getImageData(0,0,canvas.width,canvas.height);
+ //invert each pixel
+ for(n=0; n<data.width*data.height; n++) {
+ var index = n*4;
+ data.data[index+0] = 255-data.data[index+0];
+ data.data[index+1] = 255-data.data[index+1];
+ data.data[index+2] = 255-data.data[index+2];
+ //don't touch the alpha
+ }
+
+ //set the data back
+ ctx.putImageData(data,0,0);
+}
+</script>
+</body>
+</html>

0 comments on commit eb5d750

Please sign in to comment.
Something went wrong with that request. Please try again.