Skip to content

Instantly share code, notes, and snippets.

@kid-icarus

kid-icarus/index.js

Last active August 29, 2015 14:06
Download ZIP

Revisions

  1. kid-icarus revised this gist Sep 22, 2014. No changes.
  2. kid-icarus revised this gist Sep 22, 2014. 2 changed files with 2 additions and 1 deletion.
    1 change: 1 addition & 0 deletions minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    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)}})});
    2 changes: 1 addition & 1 deletion package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,6 @@
    "dependencies": {
    "insert-css": "0.2.0",
    "domify": "1.3.1",
    "webrtc2images": "1.4.1"
    "webrtc2images": "1.2.0"
    }
    }
  3. kid-icarus revised this gist Sep 22, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    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)}})});
  4. kid-icarus revised this gist Sep 22, 2014. 2 changed files with 1 addition and 2 deletions.
    1 change: 0 additions & 1 deletion index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    // boilerplate html
    var insertCSS = require('insert-css')
    var domify = require('domify')
    2 changes: 1 addition & 1 deletion package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,6 @@
    "dependencies": {
    "insert-css": "0.2.0",
    "domify": "1.3.1",
    "webrtc2images": "1.2.0"
    "webrtc2images": "1.4.1"
    }
    }
  5. kid-icarus created this gist Sep 22, 2014.
    42 changes: 42 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@

    // 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);
    }
    });
    });
    1 change: 1 addition & 0 deletions minified.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    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)}})});
    9 changes: 9 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "name": "requirebin-sketch",
    "version": "1.0.0",
    "dependencies": {
    "insert-css": "0.2.0",
    "domify": "1.3.1",
    "webrtc2images": "1.2.0"
    }
    }
    2 changes: 2 additions & 0 deletions page-head.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
    body, html { height: 100%; width: 100%; }</style>
    1 change: 1 addition & 0 deletions requirebin.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    made with [requirebin](http://requirebin.com)