requirebin sketch

index.js

// boilerplate html
var insertCSS = require('insert-css')
var domify = require('domify')
var html = '' +
'<div class="video-actions" id="record">' +
  '<span class="recorder"></span> <span class="text">Record</span>' +
'</div>' +
'<div id="video-preview"></div>' +
'<div class="debugger">' +
  '<p id="debug-msg">' +
'</div>'
document.body.appendChild(domify(html))

// using the module.
var Webrtc2images = require('webrtc2images');
var rtc2images = new Webrtc2images({
  width: 640,
  height: 360,
  frames: 10,
  type: 'image/jpeg',
  interval: 200,
  quality: 0.4,
});

rtc2images.startVideo(function(err) {
  if (err) {
    console.log(err);
  }
});

var recordBtn = document.getElementById('record');
recordBtn.addEventListener('click', function (ev) {
  ev.preventDefault();
  rtc2images.recordVideo(function (err, frames) {
    if (err) {
      console.log(err);
    } else {
      console.log(frames);
    }
  });
});

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"insert-css":[function(require,module,exports){var inserted={};module.exports=function(css,options){if(inserted[css])return;inserted[css]=true;var elem=document.createElement("style");elem.setAttribute("type","text/css");if("textContent"in elem){elem.textContent=css}else{elem.styleSheet.cssText=css}var head=document.getElementsByTagName("head")[0];if(options&&options.prepend){head.insertBefore(elem,head.childNodes[0])}else{head.appendChild(elem)}}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({domify:[function(require,module,exports){module.exports=parse;var div=document.createElement("div");div.innerHTML='  <link/><table></table><a href="/a">a</a><input type="checkbox"/>';var innerHTMLBug=!div.getElementsByTagName("link").length;div=undefined;var map={legend:[1,"<fieldset>","</fieldset>"],tr:[2,"<table><tbody>","</tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],_default:innerHTMLBug?[1,"X<div>","</div>"]:[0,"",""]};map.td=map.th=[3,"<table><tbody><tr>","</tr></tbody></table>"];map.option=map.optgroup=[1,'<select multiple="multiple">',"</select>"];map.thead=map.tbody=map.colgroup=map.caption=map.tfoot=[1,"<table>","</table>"];map.text=map.circle=map.ellipse=map.line=map.path=map.polygon=map.polyline=map.rect=[1,'<svg xmlns="http://www.w3.org/2000/svg" version="1.1">',"</svg>"];function parse(html,doc){if("string"!=typeof html)throw new TypeError("String expected");if(!doc)doc=document;var m=/<([\w:]+)/.exec(html);if(!m)return doc.createTextNode(html);html=html.replace(/^\s+|\s+$/g,"");var tag=m[1];if(tag=="body"){var el=doc.createElement("html");el.innerHTML=html;return el.removeChild(el.lastChild)}var wrap=map[tag]||map._default;var depth=wrap[0];var prefix=wrap[1];var suffix=wrap[2];var el=doc.createElement("div");el.innerHTML=prefix+html+suffix;while(depth--)el=el.lastChild;if(el.firstChild==el.lastChild){return el.removeChild(el.firstChild)}var fragment=doc.createDocumentFragment();while(el.firstChild){fragment.appendChild(el.removeChild(el.firstChild))}return fragment}},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=function(options){"use strict";var interval=options.interval||2e3;var pendingFrames=options.frames||10;var type=options.type||"image/jpeg";var quality=options.quality||.4;var canvas=document.createElement("canvas");var previews=document.querySelectorAll(".previews");var text=document.querySelector("#record .text");var debugMsg=document.getElementById("debug-msg");var img=document.createElement("img");this.video;this.videoFrames=[];this.streamer;var self=this;var captureFrame=function(pendingFrames,callback){canvas.getContext("2d").drawImage(self.video,0,0,canvas.width,canvas.height);img.src=canvas.toDataURL("image/png",quality);var saveFrame=function(){pendingFrames--;debugMsg.textContent=pendingFrames+" frames remaining";self.videoFrames.push(img.src);captureFrame(pendingFrames,callback)};if(pendingFrames>0){setTimeout(saveFrame,interval)}else{text.textContent="Record";callback(true)}};this.getScreenshot=function(callback){this.videoFrames=[];debugMsg.textContent="start recording";if(this.video){canvas.width=this.video.width;canvas.height=this.video.height;text.textContent="Recording...";captureFrame(pendingFrames,callback)}}}},{}],2:[function(require,module,exports){module.exports=function(){"use strict";window.url=window.URL||window.webkitURL||window.mozURL||window.msURL;navigator.getMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;this.video;this.cameraStream;this.videoElement;var self=this;var width=320;var height=180;function streamMedia(callback){navigator.getMedia({audio:false,video:{optional:[{minHeight:height},{maxHeight:height},{minWidth:width},{maxWidth:width}]}},function(stream){if(self.videoElement.mozSrcObject){self.videoElement.mozSrcObject=stream}else{self.videoElement.src=window.url.createObjectURL(stream)}self.videoElement.play();callback(null,stream)},function(err){callback(err)})}function startStreaming(callback){var attempts=0;self.videoElement=document.createElement("video");self.videoElement.autoplay=true;var streaming=false;self.videoElement.addEventListener("canplay",function(ev){if(!streaming){self.videoElement.setAttribute("width",width);self.videoElement.setAttribute("height",height);streaming=true}},false);streamMedia(callback)}this.startVideo=function(callback){if(navigator.getMedia){startStreaming(function(err,stream){if(err){callback(err)}else{self.cameraStream=stream;self.video=self.videoElement;callback(null,{stream:self.stream,videoElement:self.video})}})}else{callback(new Error("Could not stream video"))}};this.stopVideo=function(){if(this.cameraStream){this.cameraStream.stop()}if(this.video){this.video.pause();this.video.src=null;this.video=null}}}},{}],webrtc2images:[function(require,module,exports){var Streamer=require("./lib/streamer");var Recorder=require("./lib/recorder");module.exports=function(config,callback){"use strict";var canvas=document.createElement("canvas");var streamer=new Streamer;var recorder=new Recorder(config);var preview=document.getElementById("video-preview");var previewEl=document.querySelectorAll(".previews");var record=document.getElementById("record");this.startVideo=function(){streamer.startVideo(function(err,data){if(err){callback(err)}else{streamer.video=data.videoElement;streamer.video.width=data.videoElement.width;streamer.video.height=data.videoElement.height;preview.appendChild(streamer.video);streamer.video.play()}})};this.recordVideo=function(){previewEl.innerHTML="";recorder.video=streamer.video;recorder.getScreenshot(function(){callback(null,recorder.videoFrames);record.classList.remove("on")})}}},{"./lib/recorder":1,"./lib/streamer":2}]},{},[]);var insertCSS=require("insert-css");var domify=require("domify");var html=""+'<div class="video-actions" id="record">'+'<span class="recorder"></span> <span class="text">Record</span>'+"</div>"+'<div id="video-preview"></div>'+'<div class="debugger">'+'<p id="debug-msg">'+"</div>";document.body.appendChild(domify(html));var Webrtc2images=require("webrtc2images");var rtc2images=new Webrtc2images({width:640,height:360,frames:10,type:"image/jpeg",interval:200,quality:.4});rtc2images.startVideo(function(err){if(err){console.log(err)}});var recordBtn=document.getElementById("record");recordBtn.addEventListener("click",function(ev){ev.preventDefault();rtc2images.recordVideo(function(err,frames){if(err){console.log(err)}else{console.log(frames)}})});

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "insert-css": "0.2.0",
    "domify": "1.3.1",
    "webrtc2images": "1.2.0"
  }
}

page-head.html

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

requirebin.md

made with requirebin