Created
April 12, 2015 16:20
-
-
Save sdellis/33dc4ccbe99ba936935d to your computer and use it in GitHub Desktop.
Time-Lapse Recorder - JS + WebCam // source http://jsbin.com/buqiba/5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="boilerplate widget factory"> | |
| <script src="http://code.jquery.com/jquery.min.js"></script> | |
| <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h2>Save demo</h2> | |
| <p>After allowing the webcam in your browser, click record to start recording. <strong>Enjoy!</strong><br/> | |
| <button class="record">record</button> | |
| <button class="pause">pause</button></p> | |
| <canvas id="canvas1"></canvas> | |
| <br /> | |
| <form> | |
| <div> | |
| Format:<label><input type="radio" name="format" value="png" />png</label> | |
| <label><input type="radio" name="format" value="jpeg" checked="checked" />jpeg</label> | |
| <label><input type="radio" name="format" value="webp" />webp</label> | |
| </div> | |
| <div class="quality"> | |
| Quality:<label><input type="radio" name="quality" value="0.1" />poor (0.1)</label> | |
| <label><input type="radio" name="quality" value="0.3" />low (0.3)</label> | |
| <label><input type="radio" name="quality" value="0.7" checked="checked" />middle (0.7)</label> | |
| <label><input type="radio" name="quality" value="1" />good (1)</label> | |
| </div> | |
| <div> | |
| Estimated filesize: <em class="filesize">*</em> | |
| </div> | |
| </form> | |
| <div class="thumb"></div> | |
| <blockquote class="log"></blockquote> | |
| <script id="jsbin-javascript"> | |
| (function(e){e.instacam=function(c,g){var a=this,d={width:400,height:300,sound:!1,opacity:1,brightness:1,contrast:1,saturation:0,hue:0,invert:0,grayscale:0,sepia:0,blur:0,url:"",filter:null,done:null,fail:null,unsupported:null},m=function(f){try{navigator.getUserMedia({video:!0,audio:a.settings.sound},function(k){f.src=window.URL.createObjectURL(k);var h=function(){requestAnimationFrame(h);"function"!=typeof a.settings.filter?c.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height):("undefined"==typeof a.buffer&&(a.buffer=document.createElement("canvas"),a.buffer.setAttribute("width",a.settings.width),a.buffer.setAttribute("height",a.settings.height),c.parentNode.insertBefore(a.buffer,c.nextSibling),e(a.buffer).hide()),a.buffer.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height),c.getContext("2d").putImageData(l(a.buffer.getContext("2d").getImageData(0,0,a.settings.width,a.settings.height)),0,0));var b=a.settings.opacity!=d.opacity?"opacity("+a.settings.opacity+") ":"",b=b+(a.settings.brightness!=d.brightness?"brightness("+a.settings.brightness+") ":""),b=b+(a.settings.contrast!=d.contrast?"contrast("+a.settings.contrast+") ":""),b=b+(a.settings.saturation!=d.saturation?"saturate("+a.settings.saturation+") ":""),b=b+(a.settings.hue!=d.hue?"hue-rotate("+a.settings.hue+"deg) ":""),b=b+(a.settings.invert!=d.invert?"invert("+a.settings.invert+") ":""),b=b+(a.settings.grayscale!=d.grayscale?"grayscale("+a.settings.grayscale+") ":""),b=b+(a.settings.sepia!=d.sepia?"sepia("+a.settings.sepia+") ":""),b=b+(a.settings.blur!=d.blur?"blur("+a.settings.blur+"px) ":""),b=b+(a.settings.url!=d.url?"url("+a.settings.url+") ":"");""!==b&&a.css!=b&&(e(c).css({filter:b,"-webkit-filter":b}),a.css=b);""===b&&(e(c).css({filter:"","-webkit-filter":""}),a.css="")};requestAnimationFrame(h);"function"==typeof a.settings.done&&a.settings.done(f,c)},function(){"function"==typeof a.settings.fail&&a.settings.fail(f,c)})}catch(k){"function"==typeof a.settings.fail&&a.settings.fail(f,c)}},l=function(f){for(var c=f.data,d=0;d<a.settings.height;d++)for(var e=0;e<a.settings.width;e++){var b=4*(a.settings.width*d+e),g=a.settings.filter({offset:b,x:e,y:d,red:c[b],green:c[b+1],blue:c[b+2],alpha:c[b+3]});c[b]=g[0];c[b+1]=g[1];c[b+2]=g[2];c[b+3]=g[3]}return f};a.snap=function(f,d,e,g){if("undefined"==typeof f||"undefined"==typeof d||"undefined"==typeof e||"undefined"==typeof g)d=f=0,e=a.settings.width,g=a.settings.height;return c.getContext("2d").getImageData(f,d,e,g)};a.save=function(a,d){"undefined"==typeof a&&(a="png");"undefined"==typeof d&&(d=1);return c.toDataURL("image/"+a,d)};(function(){a.settings=e.extend({},d,g);navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame;if(navigator.getUserMedia&&window.requestAnimationFrame){c.setAttribute("width",a.settings.width);c.setAttribute("height",a.settings.height);var f=document.createElement("video");f.setAttribute("autoplay","1");f.setAttribute("width",a.settings.width);f.setAttribute("height",a.settings.height);e(f).hide();c.parentNode.insertBefore(f,c.nextSibling);m(f)}else"function"==typeof a.settings.unsupported&&a.settings.unsupported()})()};e.fn.instacam=function(c){var g=e(this).data("instacam");if(void 0===g)return this.each(function(){var a=new e.instacam(this,c);e(this).data("instacam",a)});if("object"==typeof c)e.each(c,function(a,c){g.settings[a]=c});else return g.settings[c]}})(jQuery); | |
| $(function() { | |
| $('#canvas1').instacam(); | |
| var i = 0; | |
| var snapshot; | |
| recording = function() { | |
| snapshot = window.setInterval(function() { | |
| if (i <= 10) { // auto-off: set max value to prevent infinite record | |
| var data = $('#canvas1').data('instacam').save('jpeg', '0.7'); | |
| var thumbnail = document.createElement('img'); | |
| thumbnail.setAttribute('width', $('#canvas1').instacam('width')); | |
| thumbnail.setAttribute('height', $('#canvas1').instacam('height')); | |
| thumbnail.setAttribute('src', data); | |
| $('.thumb').append(thumbnail); | |
| i=i+1; | |
| snapshot(); | |
| } | |
| }, 500); | |
| } | |
| $(".record").click(function() { | |
| recording(); | |
| }); | |
| $(".pause").click(function() { | |
| clearInterval(snapshot); | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="boilerplate widget factory"> | |
| <script src="//code.jquery.com/jquery.min.js"><\/script> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h2>Save demo</h2> | |
| <p>After allowing the webcam in your browser, click record to start recording. <strong>Enjoy!</strong><br/> | |
| <button class="record">record</button> | |
| <button class="pause">pause</button></p> | |
| <canvas id="canvas1"></canvas> | |
| <br /> | |
| <form> | |
| <div> | |
| Format:<label><input type="radio" name="format" value="png" />png</label> | |
| <label><input type="radio" name="format" value="jpeg" checked="checked" />jpeg</label> | |
| <label><input type="radio" name="format" value="webp" />webp</label> | |
| </div> | |
| <div class="quality"> | |
| Quality:<label><input type="radio" name="quality" value="0.1" />poor (0.1)</label> | |
| <label><input type="radio" name="quality" value="0.3" />low (0.3)</label> | |
| <label><input type="radio" name="quality" value="0.7" checked="checked" />middle (0.7)</label> | |
| <label><input type="radio" name="quality" value="1" />good (1)</label> | |
| </div> | |
| <div> | |
| Estimated filesize: <em class="filesize">*</em> | |
| </div> | |
| </form> | |
| <div class="thumb"></div> | |
| <blockquote class="log"></blockquote> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| (function(e){e.instacam=function(c,g){var a=this,d={width:400,height:300,sound:!1,opacity:1,brightness:1,contrast:1,saturation:0,hue:0,invert:0,grayscale:0,sepia:0,blur:0,url:"",filter:null,done:null,fail:null,unsupported:null},m=function(f){try{navigator.getUserMedia({video:!0,audio:a.settings.sound},function(k){f.src=window.URL.createObjectURL(k);var h=function(){requestAnimationFrame(h);"function"!=typeof a.settings.filter?c.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height):("undefined"==typeof a.buffer&&(a.buffer=document.createElement("canvas"),a.buffer.setAttribute("width",a.settings.width),a.buffer.setAttribute("height",a.settings.height),c.parentNode.insertBefore(a.buffer,c.nextSibling),e(a.buffer).hide()),a.buffer.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height),c.getContext("2d").putImageData(l(a.buffer.getContext("2d").getImageData(0,0,a.settings.width,a.settings.height)),0,0));var b=a.settings.opacity!=d.opacity?"opacity("+a.settings.opacity+") ":"",b=b+(a.settings.brightness!=d.brightness?"brightness("+a.settings.brightness+") ":""),b=b+(a.settings.contrast!=d.contrast?"contrast("+a.settings.contrast+") ":""),b=b+(a.settings.saturation!=d.saturation?"saturate("+a.settings.saturation+") ":""),b=b+(a.settings.hue!=d.hue?"hue-rotate("+a.settings.hue+"deg) ":""),b=b+(a.settings.invert!=d.invert?"invert("+a.settings.invert+") ":""),b=b+(a.settings.grayscale!=d.grayscale?"grayscale("+a.settings.grayscale+") ":""),b=b+(a.settings.sepia!=d.sepia?"sepia("+a.settings.sepia+") ":""),b=b+(a.settings.blur!=d.blur?"blur("+a.settings.blur+"px) ":""),b=b+(a.settings.url!=d.url?"url("+a.settings.url+") ":"");""!==b&&a.css!=b&&(e(c).css({filter:b,"-webkit-filter":b}),a.css=b);""===b&&(e(c).css({filter:"","-webkit-filter":""}),a.css="")};requestAnimationFrame(h);"function"==typeof a.settings.done&&a.settings.done(f,c)},function(){"function"==typeof a.settings.fail&&a.settings.fail(f,c)})}catch(k){"function"==typeof a.settings.fail&&a.settings.fail(f,c)}},l=function(f){for(var c=f.data,d=0;d<a.settings.height;d++)for(var e=0;e<a.settings.width;e++){var b=4*(a.settings.width*d+e),g=a.settings.filter({offset:b,x:e,y:d,red:c[b],green:c[b+1],blue:c[b+2],alpha:c[b+3]});c[b]=g[0];c[b+1]=g[1];c[b+2]=g[2];c[b+3]=g[3]}return f};a.snap=function(f,d,e,g){if("undefined"==typeof f||"undefined"==typeof d||"undefined"==typeof e||"undefined"==typeof g)d=f=0,e=a.settings.width,g=a.settings.height;return c.getContext("2d").getImageData(f,d,e,g)};a.save=function(a,d){"undefined"==typeof a&&(a="png");"undefined"==typeof d&&(d=1);return c.toDataURL("image/"+a,d)};(function(){a.settings=e.extend({},d,g);navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame;if(navigator.getUserMedia&&window.requestAnimationFrame){c.setAttribute("width",a.settings.width);c.setAttribute("height",a.settings.height);var f=document.createElement("video");f.setAttribute("autoplay","1");f.setAttribute("width",a.settings.width);f.setAttribute("height",a.settings.height);e(f).hide();c.parentNode.insertBefore(f,c.nextSibling);m(f)}else"function"==typeof a.settings.unsupported&&a.settings.unsupported()})()};e.fn.instacam=function(c){var g=e(this).data("instacam");if(void 0===g)return this.each(function(){var a=new e.instacam(this,c);e(this).data("instacam",a)});if("object"==typeof c)e.each(c,function(a,c){g.settings[a]=c});else return g.settings[c]}})(jQuery); | |
| $(function() { | |
| $('#canvas1').instacam(); | |
| var i = 0; | |
| var snapshot; | |
| recording = function() { | |
| snapshot = window.setInterval(function() { | |
| if (i <= 10) { // auto-off: set max value to prevent infinite record | |
| var data = $('#canvas1').data('instacam').save('jpeg', '0.7'); | |
| var thumbnail = document.createElement('img'); | |
| thumbnail.setAttribute('width', $('#canvas1').instacam('width')); | |
| thumbnail.setAttribute('height', $('#canvas1').instacam('height')); | |
| thumbnail.setAttribute('src', data); | |
| $('.thumb').append(thumbnail); | |
| i=i+1; | |
| snapshot(); | |
| } | |
| }, 500); | |
| } | |
| $(".record").click(function() { | |
| recording(); | |
| }); | |
| $(".pause").click(function() { | |
| clearInterval(snapshot); | |
| }); | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(e){e.instacam=function(c,g){var a=this,d={width:400,height:300,sound:!1,opacity:1,brightness:1,contrast:1,saturation:0,hue:0,invert:0,grayscale:0,sepia:0,blur:0,url:"",filter:null,done:null,fail:null,unsupported:null},m=function(f){try{navigator.getUserMedia({video:!0,audio:a.settings.sound},function(k){f.src=window.URL.createObjectURL(k);var h=function(){requestAnimationFrame(h);"function"!=typeof a.settings.filter?c.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height):("undefined"==typeof a.buffer&&(a.buffer=document.createElement("canvas"),a.buffer.setAttribute("width",a.settings.width),a.buffer.setAttribute("height",a.settings.height),c.parentNode.insertBefore(a.buffer,c.nextSibling),e(a.buffer).hide()),a.buffer.getContext("2d").drawImage(f,0,0,a.settings.width,a.settings.height),c.getContext("2d").putImageData(l(a.buffer.getContext("2d").getImageData(0,0,a.settings.width,a.settings.height)),0,0));var b=a.settings.opacity!=d.opacity?"opacity("+a.settings.opacity+") ":"",b=b+(a.settings.brightness!=d.brightness?"brightness("+a.settings.brightness+") ":""),b=b+(a.settings.contrast!=d.contrast?"contrast("+a.settings.contrast+") ":""),b=b+(a.settings.saturation!=d.saturation?"saturate("+a.settings.saturation+") ":""),b=b+(a.settings.hue!=d.hue?"hue-rotate("+a.settings.hue+"deg) ":""),b=b+(a.settings.invert!=d.invert?"invert("+a.settings.invert+") ":""),b=b+(a.settings.grayscale!=d.grayscale?"grayscale("+a.settings.grayscale+") ":""),b=b+(a.settings.sepia!=d.sepia?"sepia("+a.settings.sepia+") ":""),b=b+(a.settings.blur!=d.blur?"blur("+a.settings.blur+"px) ":""),b=b+(a.settings.url!=d.url?"url("+a.settings.url+") ":"");""!==b&&a.css!=b&&(e(c).css({filter:b,"-webkit-filter":b}),a.css=b);""===b&&(e(c).css({filter:"","-webkit-filter":""}),a.css="")};requestAnimationFrame(h);"function"==typeof a.settings.done&&a.settings.done(f,c)},function(){"function"==typeof a.settings.fail&&a.settings.fail(f,c)})}catch(k){"function"==typeof a.settings.fail&&a.settings.fail(f,c)}},l=function(f){for(var c=f.data,d=0;d<a.settings.height;d++)for(var e=0;e<a.settings.width;e++){var b=4*(a.settings.width*d+e),g=a.settings.filter({offset:b,x:e,y:d,red:c[b],green:c[b+1],blue:c[b+2],alpha:c[b+3]});c[b]=g[0];c[b+1]=g[1];c[b+2]=g[2];c[b+3]=g[3]}return f};a.snap=function(f,d,e,g){if("undefined"==typeof f||"undefined"==typeof d||"undefined"==typeof e||"undefined"==typeof g)d=f=0,e=a.settings.width,g=a.settings.height;return c.getContext("2d").getImageData(f,d,e,g)};a.save=function(a,d){"undefined"==typeof a&&(a="png");"undefined"==typeof d&&(d=1);return c.toDataURL("image/"+a,d)};(function(){a.settings=e.extend({},d,g);navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame;if(navigator.getUserMedia&&window.requestAnimationFrame){c.setAttribute("width",a.settings.width);c.setAttribute("height",a.settings.height);var f=document.createElement("video");f.setAttribute("autoplay","1");f.setAttribute("width",a.settings.width);f.setAttribute("height",a.settings.height);e(f).hide();c.parentNode.insertBefore(f,c.nextSibling);m(f)}else"function"==typeof a.settings.unsupported&&a.settings.unsupported()})()};e.fn.instacam=function(c){var g=e(this).data("instacam");if(void 0===g)return this.each(function(){var a=new e.instacam(this,c);e(this).data("instacam",a)});if("object"==typeof c)e.each(c,function(a,c){g.settings[a]=c});else return g.settings[c]}})(jQuery); | |
| $(function() { | |
| $('#canvas1').instacam(); | |
| var i = 0; | |
| var snapshot; | |
| recording = function() { | |
| snapshot = window.setInterval(function() { | |
| if (i <= 10) { // auto-off: set max value to prevent infinite record | |
| var data = $('#canvas1').data('instacam').save('jpeg', '0.7'); | |
| var thumbnail = document.createElement('img'); | |
| thumbnail.setAttribute('width', $('#canvas1').instacam('width')); | |
| thumbnail.setAttribute('height', $('#canvas1').instacam('height')); | |
| thumbnail.setAttribute('src', data); | |
| $('.thumb').append(thumbnail); | |
| i=i+1; | |
| snapshot(); | |
| } | |
| }, 500); | |
| } | |
| $(".record").click(function() { | |
| recording(); | |
| }); | |
| $(".pause").click(function() { | |
| clearInterval(snapshot); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment