Skip to content

Instantly share code, notes, and snippets.

@kid-icarus

kid-icarus/index.js

Created September 21, 2014 20:22
Show Gist options
  • Save kid-icarus/0aff6392d71ece0ab133 to your computer and use it in GitHub Desktop.
Save kid-icarus/0aff6392d71ece0ab133 to your computer and use it in GitHub Desktop.
Download ZIP
requirebin sketch
Raw
index.js
// hello world
var insertCSS = require('insert-css')
var domify = require('domify')
var webrtc2pngs = require('node-webrtc2pngs');
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"></div>' +
'<div class="video-actions uploader">' +
'<span id="upload" class="text">Upload</span>' +
'</div>'
// append the html elements that domify returns to the <body>
document.body.appendChild(domify(html))
webrtc2pngs({
frames: 10,
interval: 200,
imgQuality: 0.4,
postUrl: 'http://localhost:3000'
});
Raw
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(pendingFrames,interval,imgQuality){"use strict";interval=interval||2e3;imgQuality=imgQuality||.4;pendingFrames=pendingFrames||10;var canvas=document.createElement("canvas");var previews=document.querySelectorAll(".previews");var text=document.querySelector("#record .text");var debug=document.querySelector(".debugger");debug.innerHTML='<p id="debug-msg"></p>';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",imgQuality);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}}}},{}],"node-webrtc2pngs":[function(require,module,exports){var Streamer=require("./lib/streamer");var Recorder=require("./lib/recorder");module.exports=function(config){"use strict";var canvas=document.createElement("canvas");var streamer=new Streamer;var recorder=new Recorder(config.frames,config.interval,config.imgQuality);var preview=document.getElementById("video-preview");var previewEl=document.querySelectorAll(".previews");var record=document.getElementById("record");var upload=document.getElementById("upload");var uploadXHR=new XMLHttpRequest;var debugMsg=document.getElementById("debug-msg");streamer.startVideo(function(err,data){if(err){console.log(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()}});record.addEventListener("click",function(ev){ev.preventDefault();var self=this;previewEl.innerHTML="";self.classList.add("on");recorder.video=streamer.video;recorder.getScreenshot(function(){self.classList.remove("on")})});var uploadDone=function(){if(uploadXHR.readyState===4){if(uploadXHR.status===200){debugMsg.textContent="Upload successful!"}else{debugMsg.textContent=uploadXHR.responseText}}};upload.addEventListener("click",function(ev){if(recorder.videoFrames.length<1){return}uploadXHR.onreadystatechange=uploadDone;uploadXHR.open("POST",config.postUrl);uploadXHR.setRequestHeader("Content-Type","application/json");uploadXHR.send(JSON.stringify(recorder.videoFrames))})}},{"./lib/recorder":1,"./lib/streamer":2}]},{},[]);var insertCSS=require("insert-css");var domify=require("domify");var webrtc2pngs=require("node-webrtc2pngs");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"></div>'+'<div class="video-actions uploader">'+'<span id="upload" class="text">Upload</span>'+"</div>";document.body.appendChild(domify(html));webrtc2pngs({frames:10,interval:200,imgQuality:.4,postUrl:"http://localhost:3000"});
Raw
package.json
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"insert-css": "0.2.0",
"domify": "1.3.1",
"node-webrtc2pngs": "1.0.0"
}
}
Raw
page-head.html
<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment