requirebin sketch

index.js

var media = require('rtc-media')
var fakevid = require('rtc-videoproc')
var canvas = fakevid(document.body)
var whammy = require('whammy')

var SECONDS = 2
var MILISECONDS = SECONDS * 1000
var QUALITY = 1
var WIDTH = 640
var HEIGHT = 480

var frames = []

function handleFrame(evt) {
  frames.push(canvas.toDataURL('image/webp', QUALITY))
}

function capture() {
  canvas.addEventListener('frame', handleFrame)

  setTimeout(function() {
    canvas.removeEventListener('frame', handleFrame)

    var fps = frames.length / SECONDS
    var webmBlob = whammy.fromImageArray(frames, fps)
    var loop = document.createElement('video')
    loop.src = window.URL.createObjectURL(webmBlob)
    loop.autoplay = true
    loop.loop = true
    loop.width = WIDTH
    loop.height = HEIGHT
    document.body.appendChild(loop)
    
    var a = document.createElement('a')
    a.innerHTML = 'download'
    a.setAttribute('href', URL.createObjectURL(webmBlob))
    document.body.appendChild(a)
  }, MILISECONDS)
}

media().render(canvas, capture)

minified.js

function handleFrame(){frames.push(canvas.toDataURL("image/webp",QUALITY))}function capture(){canvas.addEventListener("frame",handleFrame),setTimeout(function(){canvas.removeEventListener("frame",handleFrame);var e=frames.length/SECONDS,t=whammy.fromImageArray(frames,e),n=document.createElement("video");n.src=window.URL.createObjectURL(t),n.autoplay=!0,n.loop=!0,n.width=WIDTH,n.height=HEIGHT,document.body.appendChild(n);var r=document.createElement("a");r.innerHTML="download",r.setAttribute("href",URL.createObjectURL(t)),document.body.appendChild(r)},MILISECONDS)}require=function e(t,n,r){function i(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(o)return o(a,!0);throw Error("Cannot find module '"+a+"'")}var c=n[a]={exports:{}};t[a][0].call(c.exports,function(e){var n=t[a][1][e];return i(n?n:e)},c,c.exports,e,t,n,r)}return n[a].exports}for(var o="function"==typeof require&&require,a=0;r.length>a;a++)i(r[a]);return i}({rP2IBn:[function(e,t){"use strict";function n(e){return this instanceof n?(o.call(this),e&&e instanceof MediaStream&&(e={stream:e,capture:!1,muted:!1}),e&&(e.audio||e.video)&&(e={constraints:e}),e=r({},{capture:!0,muted:!0,constraints:{video:{mandatory:{},optional:[]},audio:!0}},e),this.constraints=e.constraints,this.name=e.name,this.stream=e.stream||null,this.muted=e.muted===void 0||e.muted,this._bindings=[],e.capture&&setTimeout(this.capture.bind(this),0),void 0):new n(e)}e("cog/logger")("media");var r=e("cog/extend"),i=e("rtc-core/detect"),o=e("events").EventEmitter,a=e("util");navigator.getUserMedia=navigator.getUserMedia||i.call(navigator,"getUserMedia"),window.URL=window.URL||i("URL"),window.MediaStream=i("MediaStream"),a.inherits(n,o),t.exports=n,n.prototype.capture=function(e,t){var n=this,r=this.emit.bind(this,"end");this.stream||("function"==typeof e&&(t=e,e=this.constraints),"function"==typeof t&&this.once("capture",t.bind(this)),navigator.getUserMedia(e||this.constraints,function(e){"function"==typeof e.addEventListener?e.addEventListener("ended",r):e.onended=r,n.stream=e,n.emit("capture",e)},this._handleFail.bind(this)))},n.prototype.render=function(e,t,n){return Array.isArray(e)&&(console.log("WARNING: rtc-media render (as of 1.x) expects a single target"),e=e[0]),"function"==typeof t&&(n=t,t={}),t=t||{},e=this._prepareElement(t,e),this.stream?this._bindStream(this.stream):this.once("capture",this._bindStream.bind(this)),"function"==typeof n&&this.once("render",n),e},n.prototype.stop=function(e){var t=this;this.stream&&(this._unbind(e),this.stream.stop(),this.once("capture",t._bindStream.bind(t)),this.stream=null)},n.prototype._prepareElement=function(e,t){var n,r=t instanceof HTMLVideoElement||t instanceof HTMLAudioElement,i=e.preserveAspectRatio===void 0||e.preserveAspectRatio;return r=r||"function"==typeof t.play&&(t.mozSrcObject!==void 0||t.src!==void 0),r||(n=t,t=document.createElement("video"),i&&t.setAttribute("preserveAspectRatio",""),n.appendChild(t),t.setAttribute("data-playing",!1)),t&&this.muted&&t.setAttribute("muted",""),this._bindings.push({el:t,opts:e}),t},n.prototype._bindStream=function(e){function t(){0===o.length&&i.length>0&&(r.emit("render",i[0]),i.map(function(e){e.setAttribute("data-playing",!0)}))}function n(e){var r=e.target||e.srcElement,a=i.indexOf(r);a>=0&&o.splice(a,1),r.removeEventListener("playing",n),t()}var r=this,i=[],o=[];i=this._bindings.map(function(t){return t.el.mozSrcObject!==void 0?t.el.mozSrcObject=e:t.el.src=r._createObjectURL(e)||e,"function"==typeof t.el.play&&t.el.play(),t.el}),o=i.filter(function(e){return 3>e.readyState}),o.map(function(e){e.addEventListener("playing",n,!1)}),t()},n.prototype._unbind=function(e){e=e||{},this._bindings.forEach(function(e){var t=e.el;t.src=null,t.mozSrcObject&&(t.mozSrcObject=null),t.currentSrc&&(t.currentSrc=null)})},n.prototype._createObjectURL=function(e){try{return window.URL.createObjectURL(e)}catch(t){}},n.prototype._handleSuccess=function(e){this.stream=e,this.emit("stream",e)},n.prototype._handleFail=function(e){this.emit("error",e)}},{"cog/extend":3,"cog/logger":4,events:6,"rtc-core/detect":5,util:10}],"rtc-media":[function(e,t){t.exports=e("rP2IBn")},{}],3:[function(e,t){"use strict";t.exports=function(e){return[].slice.call(arguments,1).forEach(function(t){if(t)for(var n in t)e[n]=t[n]}),e}},{}],4:[function(e,t){"use strict";var n=[],r=[],i=[console],o=t.exports=function(e){function t(){return o=n.indexOf("*")>=0||n.indexOf(e)>=0}var o=t();return r[r.length]=t,function(){var t=[].slice.call(arguments);("string"==typeof t[0]||t[0]instanceof String)&&(t[0]=e+": "+t[0]),o&&i.forEach(function(e){e.log.apply(e,t)})}};o.reset=function(){return i=[],n=[],o.enable()},o.to=function(e){return i=i.concat(e||[]),o},o.enable=function(){return n=n.concat([].slice.call(arguments)),r.forEach(function(e){e()}),o}},{}],5:[function(e,t){"use strict";var n={chrome:/Chrom(?:e|ium)\/([0-9]+)\./,firefox:/Firefox\/([0-9]+)\./,opera:/Opera\/([0-9]+)\./},r=t.exports=function(e,t){var n,i,o,a=this||("undefined"!=typeof window?window:void 0);if(a)for(t=(t||["ms","o","moz","webkit"]).concat(""),n=t.length;n--;)if(i=t[n],o=i+(i?e.charAt(0).toUpperCase()+e.slice(1):e),a[o]!==void 0)return r.browser=r.browser||i.toLowerCase(),a[e]=a[o]};r.moz="undefined"!=typeof navigator&&!!navigator.mozGetUserMedia,"undefined"!=typeof navigator?Object.keys(n).forEach(function(e){var t=n[e].exec(navigator.userAgent);t&&(r.browser=e,r.browserVersion=r.version=parseInt(t[1],10))}):(r.browser="node",r.browserVersion=r.version="?")},{}],6:[function(e,t,n){var r=e("__browserify_process");r.EventEmitter||(r.EventEmitter=function(){});var i=n.EventEmitter=r.EventEmitter,o="function"==typeof Array.isArray?Array.isArray:function(e){return"[object Array]"===Object.prototype.toString.call(e)},a=10;i.prototype.setMaxListeners=function(e){this._events||(this._events={}),this._events.maxListeners=e},i.prototype.emit=function(e){if("error"===e&&(!this._events||!this._events.error||o(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var t=this._events[e];if(!t)return!1;if("function"==typeof t){switch(arguments.length){case 1:t.call(this);break;case 2:t.call(this,arguments[1]);break;case 3:t.call(this,arguments[1],arguments[2]);break;default:var n=Array.prototype.slice.call(arguments,1);t.apply(this,n)}return!0}if(o(t)){for(var n=Array.prototype.slice.call(arguments,1),r=t.slice(),i=0,a=r.length;a>i;i++)r[i].apply(this,n);return!0}return!1},i.prototype.addListener=function(e,t){if("function"!=typeof t)throw Error("addListener only takes instances of Function");if(this._events||(this._events={}),this.emit("newListener",e,t),this._events[e])if(o(this._events[e])){if(!this._events[e].warned){var n;n=void 0!==this._events.maxListeners?this._events.maxListeners:a,n&&n>0&&this._events[e].length>n&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),console.trace())}this._events[e].push(t)}else this._events[e]=[this._events[e],t];else this._events[e]=t;return this},i.prototype.on=i.prototype.addListener,i.prototype.once=function(e,t){var n=this;return n.on(e,function r(){n.removeListener(e,r),t.apply(this,arguments)}),this},i.prototype.removeListener=function(e,t){if("function"!=typeof t)throw Error("removeListener only takes instances of Function");if(!this._events||!this._events[e])return this;var n=this._events[e];if(o(n)){var r=n.indexOf(t);if(0>r)return this;n.splice(r,1),0==n.length&&delete this._events[e]}else this._events[e]===t&&delete this._events[e];return this},i.prototype.removeAllListeners=function(e){return e&&this._events&&this._events[e]&&(this._events[e]=null),this},i.prototype.listeners=function(e){return this._events||(this._events={}),this._events[e]||(this._events[e]=[]),o(this._events[e])||(this._events[e]=[this._events[e]]),this._events[e]}},{__browserify_process:8}],7:[function(e,t){t.exports="function"==typeof Object.create?function(e,t){e.super_=t,e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}})}:function(e,t){e.super_=t;var n=function(){};n.prototype=t.prototype,e.prototype=new n,e.prototype.constructor=e}},{}],8:[function(e,t){var n=t.exports={};n.nextTick=function(){var e="undefined"!=typeof window&&window.setImmediate,t="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(e)return function(e){return window.setImmediate(e)};if(t){var n=[];return window.addEventListener("message",function(e){if(e.source===window&&"process-tick"===e.data&&(e.stopPropagation(),n.length>0)){var t=n.shift();t()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.binding=function(){throw Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw Error("process.chdir is not supported")}},{}],9:[function(e,t){t.exports=function(e){return e&&"object"==typeof e&&"function"==typeof e.copy&&"function"==typeof e.fill&&"function"==typeof e.binarySlice}},{}],10:[function(e,t,n){function r(e,t){var r={seen:[],stylize:o};return arguments.length>=3&&(r.depth=arguments[2]),arguments.length>=4&&(r.colors=arguments[3]),h(t)?r.showHidden=t:t&&n._extend(r,t),b(r.showHidden)&&(r.showHidden=!1),b(r.depth)&&(r.depth=2),b(r.colors)&&(r.colors=!1),b(r.customInspect)&&(r.customInspect=!0),r.colors&&(r.stylize=i),s(r,e,r.depth)}function i(e,t){var n=r.styles[t];return n?"["+r.colors[n][0]+"m"+e+"["+r.colors[n][1]+"m":e}function o(e){return e}function a(e){var t={};return e.forEach(function(e){t[e]=!0}),t}function s(e,t,r){if(e.customInspect&&t&&L(t.inspect)&&t.inspect!==n.inspect&&(!t.constructor||t.constructor.prototype!==t)){var i=t.inspect(r,e);return y(i)||(i=s(e,i,r)),i}var o=u(e,t);if(o)return o;var h=Object.keys(t),m=a(h);if(e.showHidden&&(h=Object.getOwnPropertyNames(t)),0===h.length){if(L(t)){var v=t.name?": "+t.name:"";return e.stylize("[Function"+v+"]","special")}if(_(t))return e.stylize(RegExp.prototype.toString.call(t),"regexp");if(x(t))return e.stylize(Date.prototype.toString.call(t),"date");if(S(t))return c(t)}var g="",w=!1,b=["{","}"];if(l(t)&&(w=!0,b=["[","]"]),L(t)){var E=t.name?": "+t.name:"";g=" [Function"+E+"]"}if(_(t)&&(g=" "+RegExp.prototype.toString.call(t)),x(t)&&(g=" "+Date.prototype.toUTCString.call(t)),S(t)&&(g=" "+c(t)),0===h.length&&(!w||0==t.length))return b[0]+g+b[1];if(0>r)return _(t)?e.stylize(RegExp.prototype.toString.call(t),"regexp"):e.stylize("[Object]","special");e.seen.push(t);var j;return j=w?f(e,t,r,m,h):h.map(function(n){return d(e,t,r,m,n,w)}),e.seen.pop(),p(j,g,b)}function u(e,t){if(b(t))return e.stylize("undefined","undefined");if(y(t)){var n="'"+JSON.stringify(t).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return e.stylize(n,"string")}return g(t)?e.stylize(""+t,"number"):h(t)?e.stylize(""+t,"boolean"):m(t)?e.stylize("null","null"):void 0}function c(e){return"["+Error.prototype.toString.call(e)+"]"}function f(e,t,n,r,i){for(var o=[],a=0,s=t.length;s>a;++a)U(t,a+"")?o.push(d(e,t,n,r,a+"",!0)):o.push("");return i.forEach(function(i){i.match(/^\d+$/)||o.push(d(e,t,n,r,i,!0))}),o}function d(e,t,n,r,i,o){var a,u,c;if(c=Object.getOwnPropertyDescriptor(t,i)||{value:t[i]},c.get?u=c.set?e.stylize("[Getter/Setter]","special"):e.stylize("[Getter]","special"):c.set&&(u=e.stylize("[Setter]","special")),U(r,i)||(a="["+i+"]"),u||(0>e.seen.indexOf(c.value)?(u=m(n)?s(e,c.value,null):s(e,c.value,n-1),u.indexOf("\n")>-1&&(u=o?u.split("\n").map(function(e){return"  "+e}).join("\n").substr(2):"\n"+u.split("\n").map(function(e){return"   "+e}).join("\n"))):u=e.stylize("[Circular]","special")),b(a)){if(o&&i.match(/^\d+$/))return u;a=JSON.stringify(""+i),a.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(a=a.substr(1,a.length-2),a=e.stylize(a,"name")):(a=a.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),a=e.stylize(a,"string"))}return a+": "+u}function p(e,t,n){var r=0,i=e.reduce(function(e,t){return r++,t.indexOf("\n")>=0&&r++,e+t.replace(/\u001b\[\d\d?m/g,"").length+1},0);return i>60?n[0]+(""===t?"":t+"\n ")+" "+e.join(",\n  ")+" "+n[1]:n[0]+t+" "+e.join(", ")+" "+n[1]}function l(e){return Array.isArray(e)}function h(e){return"boolean"==typeof e}function m(e){return null===e}function v(e){return null==e}function g(e){return"number"==typeof e}function y(e){return"string"==typeof e}function w(e){return"symbol"==typeof e}function b(e){return void 0===e}function _(e){return E(e)&&"[object RegExp]"===A(e)}function E(e){return"object"==typeof e&&null!==e}function x(e){return E(e)&&"[object Date]"===A(e)}function S(e){return E(e)&&("[object Error]"===A(e)||e instanceof Error)}function L(e){return"function"==typeof e}function j(e){return null===e||"boolean"==typeof e||"number"==typeof e||"string"==typeof e||"symbol"==typeof e||e===void 0}function A(e){return Object.prototype.toString.call(e)}function O(e){return 10>e?"0"+e.toString(10):e.toString(10)}function I(){var e=new Date,t=[O(e.getHours()),O(e.getMinutes()),O(e.getSeconds())].join(":");return[e.getDate(),D[e.getMonth()],t].join(" ")}function U(e,t){return Object.prototype.hasOwnProperty.call(e,t)}var C=e("__browserify_process"),M="undefined"!=typeof self?self:"undefined"!=typeof window?window:{},R=/%[sdj%]/g;n.format=function(e){if(!y(e)){for(var t=[],n=0;arguments.length>n;n++)t.push(r(arguments[n]));return t.join(" ")}for(var n=1,i=arguments,o=i.length,a=(e+"").replace(R,function(e){if("%%"===e)return"%";if(n>=o)return e;switch(e){case"%s":return i[n++]+"";case"%d":return Number(i[n++]);case"%j":try{return JSON.stringify(i[n++])}catch(t){return"[Circular]"}default:return e}}),s=i[n];o>n;s=i[++n])a+=m(s)||!E(s)?" "+s:" "+r(s);return a},n.deprecate=function(e,t){function r(){if(!i){if(C.throwDeprecation)throw Error(t);C.traceDeprecation?console.trace(t):console.error(t),i=!0}return e.apply(this,arguments)}if(b(M.process))return function(){return n.deprecate(e,t).apply(this,arguments)};if(C.noDeprecation===!0)return e;var i=!1;return r};var z,k={};n.debuglog=function(e){if(b(z)&&(z=C.env.NODE_DEBUG||""),e=e.toUpperCase(),!k[e])if(RegExp("\\b"+e+"\\b","i").test(z)){var t=C.pid;k[e]=function(){var r=n.format.apply(n,arguments);console.error("%s %d: %s",e,t,r)}}else k[e]=function(){};return k[e]},n.inspect=r,r.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},r.styles={special:"cyan",number:"yellow","boolean":"yellow",undefined:"grey","null":"bold",string:"green",date:"magenta",regexp:"red"},n.isArray=l,n.isBoolean=h,n.isNull=m,n.isNullOrUndefined=v,n.isNumber=g,n.isString=y,n.isSymbol=w,n.isUndefined=b,n.isRegExp=_,n.isObject=E,n.isDate=x,n.isError=S,n.isFunction=L,n.isPrimitive=j,n.isBuffer=e("./support/isBuffer");var D=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];n.log=function(){console.log("%s - %s",I(),n.format.apply(n,arguments))},n.inherits=e("inherits"),n._extend=function(e,t){if(!t||!E(t))return e;for(var n=Object.keys(t),r=n.length;r--;)e[n[r]]=t[n[r]];return e}},{"./support/isBuffer":9,__browserify_process:8,inherits:7}]},{},[]),require=function e(t,n,r){function i(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(o)return o(a,!0);throw Error("Cannot find module '"+a+"'")}var c=n[a]={exports:{}};t[a][0].call(c.exports,function(e){var n=t[a][1][e];return i(n?n:e)},c,c.exports,e,t,n,r)}return n[a].exports}for(var o="function"==typeof require&&require,a=0;r.length>a;a++)i(r[a]);return i}({tPek8I:[function(e,t){"use strict";function n(e,t,n){function o(e){b=w.push(e)}function a(n){var r,o,s;if(l){if(n=n||Date.now(),n-h>v){if(p.drawImage(t,g,y,u,c),s=_&&new CustomEvent("frame",{detail:{tick:n}}),s&&e.dispatchEvent(s),b){for(r=p.getImageData(0,0,u,c),o=!1,d=0;b>d;d++)o=w[d](r,p,e,f)||o;o&&p.putImageData(r,0,0)}h=n}i(a)}}function s(){var n,r,o;(0===e.width||0===e.height)&&(e.width=t.videoWidth,e.height=t.videoHeight),0!==e.width&&0!==e.height&&(n=Math.min(r=e.width/t.videoWidth,o=e.height/t.videoHeight),u=0|t.videoWidth*n,c=0|t.videoHeight*n,g=e.width-u>>1,y=e.height-c>>1,f={x:g,y:y,width:u,height:c},l=!0,i(a))}var u,c,f,d,p=e.getContext("2d"),l=!1,h=0,m=(n||{}).fps||r,v=0|1e3/m,g=0,y=0,w=[],b=0,_="undefined"!=typeof CustomEvent;return t.addEventListener("playing",s),["mozSrcObject","src"].forEach(function(n){void 0!==t[n]&&Object.defineProperty(e,n,{get:function(){return t[n]},set:function(e){t[n]=e}})}),e.play=function(){t.play()},{add:o}}var r=25,i=e("fdom/raf");t.exports=function(e,t){var r=e instanceof HTMLCanvasElement?e:document.createElement("canvas"),i=e instanceof HTMLVideoElement?e:document.createElement("video");return e===i?i.parentNode.insertBefore(r,i):e!==r&&e.appendChild(r),r.width=(t||{}).width||0,r.height=(t||{}).height||0,i.style.display="none",r.pipeline=n(r,i,t),r}},{"fdom/raf":3}],"rtc-videoproc":[function(e,t){t.exports=e("tPek8I")},{}],3:[function(e,t){"use strict";var n=["r","webkitR","mozR","oR","msR"];t.exports="undefined"!=typeof window&&function(){for(var e=0;n.length>e;e++)window.animFrame=window.animFrame||window[n[e]+"equestAnimationFrame"];return animFrame}()},{}]},{},[]),require=function e(t,n,r){function i(a,s){if(!n[a]){if(!t[a]){var u="function"==typeof require&&require;if(!s&&u)return u(a,!0);if(o)return o(a,!0);throw Error("Cannot find module '"+a+"'")}var c=n[a]={exports:{}};t[a][0].call(c.exports,function(e){var n=t[a][1][e];return i(n?n:e)},c,c.exports,e,t,n,r)}return n[a].exports}for(var o="function"==typeof require&&require,a=0;r.length>a;a++)i(r[a]);return i}({"33ycba":[function(e,t){var n=e("__browserify_process"),r="undefined"!=typeof self?self:"undefined"!=typeof window?window:{};r.Whammy=function(){function e(e,n){for(var r=t(e),i=3e4,a=[{id:440786851,data:[{data:1,id:17030},{data:1,id:17143},{data:4,id:17138},{data:8,id:17139},{data:"webm",id:17026},{data:2,id:17031},{data:2,id:17029}]},{id:408125543,data:[{id:357149030,data:[{data:1e6,id:2807729},{data:"whammy",id:19840},{data:"whammy",id:22337},{data:f(r.duration),id:17545}]},{id:374648427,data:[{id:174,data:[{data:1,id:215},{data:1,id:25541},{data:0,id:156},{data:"und",id:2274716},{data:"V_VP8",id:134},{data:"VP8",id:2459272},{data:1,id:131},{id:224,data:[{data:r.width,id:176},{data:r.height,id:186}]}]}]}]}],u=0,c=0;e.length>u;){var d=[],p=0;do d.push(e[u]),p+=e[u].duration,u++;while(e.length>u&&i>p);var l=0,h={id:524531317,data:[{data:c,id:231}].concat(d.map(function(e){var t=s({discardable:0,frame:e.data.slice(4),invisible:0,keyframe:1,lacing:0,trackNum:1,timecode:Math.round(l)});return l+=e.duration,{data:t,id:163}}))};a[1].data.push(h),c+=p}return o(a,n)}function t(e){for(var t=e[0].width,n=e[0].height,r=e[0].duration,i=1;e.length>i;i++){if(e[i].width!=t)throw"Frame "+(i+1)+" has a different width";if(e[i].height!=n)throw"Frame "+(i+1)+" has a different height";if(0>e[i].duration||e[i].duration>32767)throw"Frame "+(i+1)+" has a weird duration (must be between 0 and 32767)";r+=e[i].duration}return{duration:r,width:t,height:n}}function n(e){for(var t=[];e>0;)t.push(255&e),e>>=8;return new Uint8Array(t.reverse())}function r(e){for(var t=new Uint8Array(e.length),n=0;e.length>n;n++)t[n]=e.charCodeAt(n);return t}function i(e){var t=[],n=e.length%8?Array(9-e.length%8).join("0"):"";e=n+e;for(var r=0;e.length>r;r+=8)t.push(parseInt(e.substr(r,8),2));return new Uint8Array(t)}function o(e,t){for(var s=[],u=0;e.length>u;u++){var c=e[u].data;"object"==typeof c&&(c=o(c,t)),"number"==typeof c&&(c=i(c.toString(2))),"string"==typeof c&&(c=r(c)),c.length;var f=c.size||c.byteLength||c.length,d=Math.ceil(Math.ceil(Math.log(f)/Math.log(2))/8),p=f.toString(2),l=Array(7*d+7+1-p.length).join("0")+p,h=Array(d).join("0")+"1"+l;s.push(n(e[u].id)),s.push(i(h)),s.push(c)}if(t){var m=a(s);return new Uint8Array(m)}return new Blob(s,{type:"video/webm"})}function a(e,t){null==t&&(t=[]);for(var n=0;e.length>n;n++)"object"==typeof e[n]?a(e[n],t):t.push(e[n]);return t}function s(e){var t=0;if(e.keyframe&&(t|=128),e.invisible&&(t|=8),e.lacing&&(t|=e.lacing<<1),e.discardable&&(t|=1),e.trackNum>127)throw"TrackNumber > 127 not supported";var n=[128|e.trackNum,e.timecode>>8,255&e.timecode,t].map(function(e){return String.fromCharCode(e)}).join("")+e.frame;return n}function u(e){for(var t=e.RIFF[0].WEBP[0],n=t.indexOf("
*"),r=0,i=[];4>r;r++)i[r]=t.charCodeAt(n+3+r);var o,a,s,u,c;return c=i[1]<<8|i[0],o=16383&c,a=c>>14,c=i[3]<<8|i[2],s=16383&c,u=c>>14,{width:o,height:s,data:t,riff:e}}function c(e){for(var t=0,n={};e.length>t;){var r=e.substr(t,4),i=parseInt(e.substr(t+4,4).split("").map(function(e){var t=e.charCodeAt(0).toString(2);return Array(8-t.length+1).join("0")+t}).join(""),2),o=e.substr(t+4+4,i);t+=8+i,n[r]=n[r]||[],"RIFF"==r||"LIST"==r?n[r].push(c(o)):n[r].push(o)}return n}function f(e){return[].slice.call(new Uint8Array(new Float64Array([e]).buffer),0).map(function(e){return String.fromCharCode(e)}).reverse().join("")}function d(e,t){this.frames=[],this.duration=1e3/e,this.quality=t||.8}return d.prototype.add=function(e,t){if(t!==void 0&&this.duration)throw"you can't pass a duration if the fps is set";if(t===void 0&&!this.duration)throw"if you don't have the fps set, you ned to have durations here.";if("canvas"in e&&(e=e.canvas),"toDataURL"in e)e=e.toDataURL("image/webp",this.quality);else if("string"!=typeof e)throw"frame must be a a HTMLCanvasElement, a CanvasRenderingContext2D or a DataURI formatted string";if(!/^data:image\/webp;base64,/gi.test(e))throw"Input must be formatted properly as a base64 encoded DataURI of type image/webp";this.frames.push({image:e,duration:t||this.duration})},d.prototype.compile=function(t){return new e(this.frames.map(function(e){var t=u(c(atob(e.image.slice(23))));return t.duration=e.duration,t}),t)},{Video:d,fromImageArray:function(t,n,r){return e(t.map(function(e){var t=u(c(atob(e.slice(23))));return t.duration=1e3/n,t}),r)},toWebM:e}}(),n!==void 0&&(t.exports=Whammy)},{__browserify_process:3}],whammy:[function(e,t){t.exports=e("33ycba")},{}],3:[function(e,t){var n=t.exports={};n.nextTick=function(){var e="undefined"!=typeof window&&window.setImmediate,t="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(e)return function(e){return window.setImmediate(e)};if(t){var n=[];return window.addEventListener("message",function(e){if(e.source===window&&"process-tick"===e.data&&(e.stopPropagation(),n.length>0)){var t=n.shift();t()}},!0),function(e){n.push(e),window.postMessage("process-tick","*")}}return function(e){setTimeout(e,0)}}(),n.title="browser",n.browser=!0,n.env={},n.argv=[],n.binding=function(){throw Error("process.binding is not supported")},n.cwd=function(){return"/"},n.chdir=function(){throw Error("process.chdir is not supported")}},{}]},{},[]);var media=require("rtc-media"),fakevid=require("rtc-videoproc"),canvas=fakevid(document.body),whammy=require("whammy"),SECONDS=2,MILISECONDS=1e3*SECONDS,QUALITY=1,WIDTH=640,HEIGHT=480,frames=[];media().render(canvas,capture);

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

view on requirebin