# Built-in tools
You can use [`designer.setSelected`](https://github.com/muaz-khan/Canvas-Designer#setselected) or [`designer.setTools`](https://github.com/muaz-khan/Canvas-Designer#settools) for below tools.
1. `line` --- to draw straight lines
2. `pencil` --- to write/draw shapes
3. `dragSingle` --- to drag/ove and especially **resize** last selected shape
4. `dragMultiple` --- to drag/move all shapes
5. `eraser` --- to erase/clear specific portion of shapes
6. `rectangle` --- to draw rectangles
7. `arc` --- to draw circles
8. `bezier` --- to draw bezier curves
9. `quadratic` --- to draw quadratic curves
10. `text` --- to write texts on single or multiple lines, select font families/sizes and more
11. `image` --- add external images
12. `arrow` --- draw arrow lines
13. `marker` --- draw markers
14. `lineWidth` --- set line width
15. `colorsPicker` --- background and foreground colors picker
16. `extraOptions` --- extra options eg. lineCap, lineJoin, globalAlpha, globalCompositeOperation etc.
17. `pdf` --- to import PDF
18. `code` --- to enable/disable code view
19. `undo` --- undo recent shapes
The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`.
The correct name for `dragMultiple` should be: `drag-move all-shapes`.
### Upcoming tools
1. Allow users to add video-streams or screen-streams or existing-webm-mp4-videos
2. Resize all shapes at once (currently you can resize last selected shape only)
# Features
1. Draw single or multiple shapes of any kind (according to toolbox)
2. Drag/resize/adjust all the shapes in any possible direction
3. Rectangles and images can be resized in 4-directions
Red transparent small circles helps you understand how to resize.
4. Undo drawings using `ctrl+z` keys (undo all shapes, undo last 10 or specific shapes, undo range of shapes or undo last shape)
5. Drag/move single or all the shapes without affecting any single coordinate
More importantly, you can use unlimited designers on a single page. Each will have its own surface and its own tools.
# Chinese, Arabic, other languages
You can install following chrome extension for multi-language input tools:
* https://chrome.google.com/webstore/detail/google-input-tools/mclkkofklkfljcocdinagocijmpgbhab?hl=en
Now type your own language text in any `` box or anywhere, and simply copy that text.
Now click `T` tool icon from the tool-box and press `ctrl+v` to paste your own language's text.
**To repeat it:**
1. Type your own language texts anywhere and make sure to copy to clipboard using `ctrl+v`
2. Then click `T` icon, and then press `ctrl+v` to paste your copied text
You can paste any text: English, Arabic, Chinese etc.
# How to Use
1. Download/link `canvas-designer-widget.js` from [this github repository](https://github.com/muaz-khan/Canvas-Designer).
2. Set `designer.widgetHtmlURL` and `designer.widgetJsURL` in your HTML file.
3. Use this command to append widget in your HTML page:
`var designer = new CanvasDesigner();`
`designer.appendTo(document.body);`
```html
```
# Complete Usage
```javascript
var designer = new CanvasDesigner();
websocket.onmessage = function(event) {
designer.syncData( JSON.parse(event.data) );
};
designer.addSyncListener(function(data) {
websocket.send(JSON.stringify(data));
});
designer.setSelected('pencil');
designer.setTools({
pencil: true,
text: true
});
designer.appendTo(document.documentElement);
```
It is having `designer.destroy()` method as well.
# Use [WebRTC](http://www.rtcmulticonnection.org/docs/)!
```javascript
webrtc.onmessage = function(event) {
designer.syncData( event.data );
};
designer.addSyncListener(function(data) {
webrtc.send(data);
});
```
# Use Socket.io
```javascript
socket.on('message', function(data) {
designer.syncData( data );
});
designer.addSyncListener(function(data) {
socket.emit('message', data);
});
```
# API Reference
## `widgetHtmlURL`
You can place `widget.html` file anywhere on your site.
```javascript
designer.widgetHtmlURL = '/html-files/widget.html';
```
By default `widget.html` is placed in the same directory of `index.html`.
```javascript
// here is default value
designer.widgetHtmlURL = 'widget.html';
```
Remember, `widget.html` is loaded using `
-->
This chrome extension is open-sourced here:
Watch a YouTube video to understand how this demo works.
Set Your Own Room ID:
It will use your room-id instead of generating random string.
E.g. You can always share this with screen viewers:
https://webrtcweb.com/fs#your_room_id
Set File Chunk Size:
If your file receivers are using Firefox, then set "15000" which is maximum reciving limit in Firefox.
Wanna learn "how to use"? ================================================ FILE: Chrome-Extensions/file-sharing/options.js ================================================ chrome.storage.sync.get(null, function(items) { if (items['room_id']) { document.getElementById('room_id').value = items['room_id']; } if (items['chunk_size']) { document.getElementById('chunk_size').value = items['chunk_size']; } }); document.getElementById('room_id').onblur = function() { this.disabled = true; chrome.storage.sync.set({ room_id: this.value }, function() { document.getElementById('room_id').disabled = false; }); }; document.getElementById('chunk_size').onblur = function() { this.disabled = true; chrome.storage.sync.set({ chunk_size: this.value }, function() { document.getElementById('chunk_size').disabled = false; }); }; ================================================ FILE: Chrome-Extensions/file-sharing/popup.html ================================================
You are NOT connected to any room.
Click to connect.
Click to connect.
You didn't send/receve any file yet.
Select & share your own files.
================================================ FILE: Chrome-Extensions/file-sharing/popup.js ================================================ // popup.js /*! jQuery v2.2.2 | (c) jQuery Foundation | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="2.2.2",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(e.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:g,sort:c.sort,splice:c.splice},n.extend=n.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||n.isFunction(g)||(g={}),h===i&&(g=this,h--);i>h;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(n.isPlainObject(d)||(e=n.isArray(d)))?(e?(e=!1,f=c&&n.isArray(c)?c:[]):f=c&&n.isPlainObject(c)?c:{},g[b]=n.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},n.extend({expando:"jQuery"+(m+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===n.type(a)},isArray:Array.isArray,isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=a&&a.toString();return!n.isArray(a)&&b-parseFloat(b)+1>=0},isPlainObject:function(a){var b;if("object"!==n.type(a)||a.nodeType||n.isWindow(a))return!1;if(a.constructor&&!k.call(a,"constructor")&&!k.call(a.constructor.prototype||{},"isPrototypeOf"))return!1;for(b in a);return void 0===b||k.call(a,b)},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?i[j.call(a)]||"object":typeof a},globalEval:function(a){var b,c=eval;a=n.trim(a),a&&(1===a.indexOf("use strict")?(b=d.createElement("script"),b.text=a,d.head.appendChild(b).parentNode.removeChild(b)):c(a))},camelCase:function(a){return a.replace(p,"ms-").replace(q,r)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,b){var c,d=0;if(s(a)){for(c=a.length;c>d;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(o,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(s(Object(a))?n.merge(c,"string"==typeof a?[a]:a):g.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:h.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;c>d;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;g>f;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,g=0,h=[];if(s(a))for(d=a.length;d>g;g++)e=b(a[g],g,c),null!=e&&h.push(e);else for(g in a)e=b(a[g],g,c),null!=e&&h.push(e);return f.apply([],h)},guid:1,proxy:function(a,b){var c,d,f;return"string"==typeof b&&(c=a[b],b=a,a=c),n.isFunction(a)?(d=e.call(arguments,2),f=function(){return a.apply(b||this,d.concat(e.call(arguments)))},f.guid=a.guid=a.guid||n.guid++,f):void 0},now:Date.now,support:l}),"function"==typeof Symbol&&(n.fn[Symbol.iterator]=c[Symbol.iterator]),n.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){i["[object "+b+"]"]=b.toLowerCase()});function s(a){var b=!!a&&"length"in a&&a.length,c=n.type(a);return"function"===c||n.isWindow(a)?!1:"array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a}var t=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*new Date,v=a.document,w=0,x=0,y=ga(),z=ga(),A=ga(),B=function(a,b){return a===b&&(l=!0),0},C=1<<31,D={}.hasOwnProperty,E=[],F=E.pop,G=E.push,H=E.push,I=E.slice,J=function(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return c;return-1},K="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",L="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",N="\\["+L+"*("+M+")(?:"+L+"*([*^$|!~]?=)"+L+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+M+"))|)"+L+"*\\]",O=":("+M+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+N+")*)|.*)\\)|)",P=new RegExp(L+"+","g"),Q=new RegExp("^"+L+"+|((?:^|[^\\\\])(?:\\\\.)*)"+L+"+$","g"),R=new RegExp("^"+L+"*,"+L+"*"),S=new RegExp("^"+L+"*([>+~]|"+L+")"+L+"*"),T=new RegExp("="+L+"*([^\\]'\"]*?)"+L+"*\\]","g"),U=new RegExp(O),V=new RegExp("^"+M+"$"),W={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),TAG:new RegExp("^("+M+"|[*])"),ATTR:new RegExp("^"+N),PSEUDO:new RegExp("^"+O),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+L+"*(even|odd|(([+-]|)(\\d*)n|)"+L+"*(?:([+-]|)"+L+"*(\\d+)|))"+L+"*\\)|)","i"),bool:new RegExp("^(?:"+K+")$","i"),needsContext:new RegExp("^"+L+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+L+"*((?:-\\d)?\\d*)"+L+"*\\)|)(?=[^-]|$)","i")},X=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,Z=/^[^{]+\{\s*\[native \w/,$=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,_=/[+~]/,aa=/'|\\/g,ba=new RegExp("\\\\([\\da-f]{1,6}"+L+"?|("+L+")|.)","ig"),ca=function(a,b,c){var d="0x"+b-65536;return d!==d||c?b:0>d?String.fromCharCode(d+65536):String.fromCharCode(d>>10|55296,1023&d|56320)},da=function(){m()};try{H.apply(E=I.call(v.childNodes),v.childNodes),E[v.childNodes.length].nodeType}catch(ea){H={apply:E.length?function(a,b){G.apply(a,I.call(b))}:function(a,b){var c=a.length,d=0;while(a[c++]=b[d++]);a.length=c-1}}}function fa(a,b,d,e){var f,h,j,k,l,o,r,s,w=b&&b.ownerDocument,x=b?b.nodeType:9;if(d=d||[],"string"!=typeof a||!a||1!==x&&9!==x&&11!==x)return d;if(!e&&((b?b.ownerDocument||b:v)!==n&&m(b),b=b||n,p)){if(11!==x&&(o=$.exec(a)))if(f=o[1]){if(9===x){if(!(j=b.getElementById(f)))return d;if(j.id===f)return d.push(j),d}else if(w&&(j=w.getElementById(f))&&t(b,j)&&j.id===f)return d.push(j),d}else{if(o[2])return H.apply(d,b.getElementsByTagName(a)),d;if((f=o[3])&&c.getElementsByClassName&&b.getElementsByClassName)return H.apply(d,b.getElementsByClassName(f)),d}if(c.qsa&&!A[a+" "]&&(!q||!q.test(a))){if(1!==x)w=b,s=a;else if("object"!==b.nodeName.toLowerCase()){(k=b.getAttribute("id"))?k=k.replace(aa,"\\$&"):b.setAttribute("id",k=u),r=g(a),h=r.length,l=V.test(k)?"#"+k:"[id='"+k+"']";while(h--)r[h]=l+" "+qa(r[h]);s=r.join(","),w=_.test(a)&&oa(b.parentNode)||b}if(s)try{return H.apply(d,w.querySelectorAll(s)),d}catch(y){}finally{k===u&&b.removeAttribute("id")}}}return i(a.replace(Q,"$1"),b,d,e)}function ga(){var a=[];function b(c,e){return a.push(c+" ")>d.cacheLength&&delete b[a.shift()],b[c+" "]=e}return b}function ha(a){return a[u]=!0,a}function ia(a){var b=n.createElement("div");try{return!!a(b)}catch(c){return!1}finally{b.parentNode&&b.parentNode.removeChild(b),b=null}}function ja(a,b){var c=a.split("|"),e=c.length;while(e--)d.attrHandle[c[e]]=b}function ka(a,b){var c=b&&a,d=c&&1===a.nodeType&&1===b.nodeType&&(~b.sourceIndex||C)-(~a.sourceIndex||C);if(d)return d;if(c)while(c=c.nextSibling)if(c===b)return-1;return a?1:-1}function la(a){return function(b){var c=b.nodeName.toLowerCase();return"input"===c&&b.type===a}}function ma(a){return function(b){var c=b.nodeName.toLowerCase();return("input"===c||"button"===c)&&b.type===a}}function na(a){return ha(function(b){return b=+b,ha(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function oa(a){return a&&"undefined"!=typeof a.getElementsByTagName&&a}c=fa.support={},f=fa.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?"HTML"!==b.nodeName:!1},m=fa.setDocument=function(a){var b,e,g=a?a.ownerDocument||a:v;return g!==n&&9===g.nodeType&&g.documentElement?(n=g,o=n.documentElement,p=!f(n),(e=n.defaultView)&&e.top!==e&&(e.addEventListener?e.addEventListener("unload",da,!1):e.attachEvent&&e.attachEvent("onunload",da)),c.attributes=ia(function(a){return a.className="i",!a.getAttribute("className")}),c.getElementsByTagName=ia(function(a){return a.appendChild(n.createComment("")),!a.getElementsByTagName("*").length}),c.getElementsByClassName=Z.test(n.getElementsByClassName),c.getById=ia(function(a){return o.appendChild(a).id=u,!n.getElementsByName||!n.getElementsByName(u).length}),c.getById?(d.find.ID=function(a,b){if("undefined"!=typeof b.getElementById&&p){var c=b.getElementById(a);return c?[c]:[]}},d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){return a.getAttribute("id")===b}}):(delete d.find.ID,d.filter.ID=function(a){var b=a.replace(ba,ca);return function(a){var c="undefined"!=typeof a.getAttributeNode&&a.getAttributeNode("id");return c&&c.value===b}}),d.find.TAG=c.getElementsByTagName?function(a,b){return"undefined"!=typeof b.getElementsByTagName?b.getElementsByTagName(a):c.qsa?b.querySelectorAll(a):void 0}:function(a,b){var c,d=[],e=0,f=b.getElementsByTagName(a);if("*"===a){while(c=f[e++])1===c.nodeType&&d.push(c);return d}return f},d.find.CLASS=c.getElementsByClassName&&function(a,b){return"undefined"!=typeof b.getElementsByClassName&&p?b.getElementsByClassName(a):void 0},r=[],q=[],(c.qsa=Z.test(n.querySelectorAll))&&(ia(function(a){o.appendChild(a).innerHTML="",a.querySelectorAll("[msallowcapture^='']").length&&q.push("[*^$]="+L+"*(?:''|\"\")"),a.querySelectorAll("[selected]").length||q.push("\\["+L+"*(?:value|"+K+")"),a.querySelectorAll("[id~="+u+"-]").length||q.push("~="),a.querySelectorAll(":checked").length||q.push(":checked"),a.querySelectorAll("a#"+u+"+*").length||q.push(".#.+[+~]")}),ia(function(a){var b=n.createElement("input");b.setAttribute("type","hidden"),a.appendChild(b).setAttribute("name","D"),a.querySelectorAll("[name=d]").length&&q.push("name"+L+"*[*^$|!~]?="),a.querySelectorAll(":enabled").length||q.push(":enabled",":disabled"),a.querySelectorAll("*,:x"),q.push(",.*:")})),(c.matchesSelector=Z.test(s=o.matches||o.webkitMatchesSelector||o.mozMatchesSelector||o.oMatchesSelector||o.msMatchesSelector))&&ia(function(a){c.disconnectedMatch=s.call(a,"div"),s.call(a,"[s!='']:x"),r.push("!=",O)}),q=q.length&&new RegExp(q.join("|")),r=r.length&&new RegExp(r.join("|")),b=Z.test(o.compareDocumentPosition),t=b||Z.test(o.contains)?function(a,b){var c=9===a.nodeType?a.documentElement:a,d=b&&b.parentNode;return a===d||!(!d||1!==d.nodeType||!(c.contains?c.contains(d):a.compareDocumentPosition&&16&a.compareDocumentPosition(d)))}:function(a,b){if(b)while(b=b.parentNode)if(b===a)return!0;return!1},B=b?function(a,b){if(a===b)return l=!0,0;var d=!a.compareDocumentPosition-!b.compareDocumentPosition;return d?d:(d=(a.ownerDocument||a)===(b.ownerDocument||b)?a.compareDocumentPosition(b):1,1&d||!c.sortDetached&&b.compareDocumentPosition(a)===d?a===n||a.ownerDocument===v&&t(v,a)?-1:b===n||b.ownerDocument===v&&t(v,b)?1:k?J(k,a)-J(k,b):0:4&d?-1:1)}:function(a,b){if(a===b)return l=!0,0;var c,d=0,e=a.parentNode,f=b.parentNode,g=[a],h=[b];if(!e||!f)return a===n?-1:b===n?1:e?-1:f?1:k?J(k,a)-J(k,b):0;if(e===f)return ka(a,b);c=a;while(c=c.parentNode)g.unshift(c);c=b;while(c=c.parentNode)h.unshift(c);while(g[d]===h[d])d++;return d?ka(g[d],h[d]):g[d]===v?-1:h[d]===v?1:0},n):n},fa.matches=function(a,b){return fa(a,null,null,b)},fa.matchesSelector=function(a,b){if((a.ownerDocument||a)!==n&&m(a),b=b.replace(T,"='$1']"),c.matchesSelector&&p&&!A[b+" "]&&(!r||!r.test(b))&&(!q||!q.test(b)))try{var d=s.call(a,b);if(d||c.disconnectedMatch||a.document&&11!==a.document.nodeType)return d}catch(e){}return fa(b,n,null,[a]).length>0},fa.contains=function(a,b){return(a.ownerDocument||a)!==n&&m(a),t(a,b)},fa.attr=function(a,b){(a.ownerDocument||a)!==n&&m(a);var e=d.attrHandle[b.toLowerCase()],f=e&&D.call(d.attrHandle,b.toLowerCase())?e(a,b,!p):void 0;return void 0!==f?f:c.attributes||!p?a.getAttribute(b):(f=a.getAttributeNode(b))&&f.specified?f.value:null},fa.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},fa.uniqueSort=function(a){var b,d=[],e=0,f=0;if(l=!c.detectDuplicates,k=!c.sortStable&&a.slice(0),a.sort(B),l){while(b=a[f++])b===a[f]&&(e=d.push(f));while(e--)a.splice(d[e],1)}return k=null,a},e=fa.getText=function(a){var b,c="",d=0,f=a.nodeType;if(f){if(1===f||9===f||11===f){if("string"==typeof a.textContent)return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=e(a)}else if(3===f||4===f)return a.nodeValue}else while(b=a[d++])c+=e(b);return c},d=fa.selectors={cacheLength:50,createPseudo:ha,match:W,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(ba,ca),a[3]=(a[3]||a[4]||a[5]||"").replace(ba,ca),"~="===a[2]&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),"nth"===a[1].slice(0,3)?(a[3]||fa.error(a[0]),a[4]=+(a[4]?a[5]+(a[6]||1):2*("even"===a[3]||"odd"===a[3])),a[5]=+(a[7]+a[8]||"odd"===a[3])):a[3]&&fa.error(a[0]),a},PSEUDO:function(a){var b,c=!a[6]&&a[2];return W.CHILD.test(a[0])?null:(a[3]?a[2]=a[4]||a[5]||"":c&&U.test(c)&&(b=g(c,!0))&&(b=c.indexOf(")",c.length-b)-c.length)&&(a[0]=a[0].slice(0,b),a[2]=c.slice(0,b)),a.slice(0,3))}},filter:{TAG:function(a){var b=a.replace(ba,ca).toLowerCase();return"*"===a?function(){return!0}:function(a){return a.nodeName&&a.nodeName.toLowerCase()===b}},CLASS:function(a){var b=y[a+" "];return b||(b=new RegExp("(^|"+L+")"+a+"("+L+"|$)"))&&y(a,function(a){return b.test("string"==typeof a.className&&a.className||"undefined"!=typeof a.getAttribute&&a.getAttribute("class")||"")})},ATTR:function(a,b,c){return function(d){var e=fa.attr(d,a);return null==e?"!="===b:b?(e+="","="===b?e===c:"!="===b?e!==c:"^="===b?c&&0===e.indexOf(c):"*="===b?c&&e.indexOf(c)>-1:"$="===b?c&&e.slice(-c.length)===c:"~="===b?(" "+e.replace(P," ")+" ").indexOf(c)>-1:"|="===b?e===c||e.slice(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d,e){var f="nth"!==a.slice(0,3),g="last"!==a.slice(-4),h="of-type"===b;return 1===d&&0===e?function(a){return!!a.parentNode}:function(b,c,i){var j,k,l,m,n,o,p=f!==g?"nextSibling":"previousSibling",q=b.parentNode,r=h&&b.nodeName.toLowerCase(),s=!i&&!h,t=!1;if(q){if(f){while(p){m=b;while(m=m[p])if(h?m.nodeName.toLowerCase()===r:1===m.nodeType)return!1;o=p="only"===a&&!o&&"nextSibling"}return!0}if(o=[g?q.firstChild:q.lastChild],g&&s){m=q,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n&&j[2],m=n&&q.childNodes[n];while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if(1===m.nodeType&&++t&&m===b){k[a]=[w,n,t];break}}else if(s&&(m=b,l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),j=k[a]||[],n=j[0]===w&&j[1],t=n),t===!1)while(m=++n&&m&&m[p]||(t=n=0)||o.pop())if((h?m.nodeName.toLowerCase()===r:1===m.nodeType)&&++t&&(s&&(l=m[u]||(m[u]={}),k=l[m.uniqueID]||(l[m.uniqueID]={}),k[a]=[w,t]),m===b))break;return t-=e,t===d||t%d===0&&t/d>=0}}},PSEUDO:function(a,b){var c,e=d.pseudos[a]||d.setFilters[a.toLowerCase()]||fa.error("unsupported pseudo: "+a);return e[u]?e(b):e.length>1?(c=[a,a,"",b],d.setFilters.hasOwnProperty(a.toLowerCase())?ha(function(a,c){var d,f=e(a,b),g=f.length;while(g--)d=J(a,f[g]),a[d]=!(c[d]=f[g])}):function(a){return e(a,0,c)}):e}},pseudos:{not:ha(function(a){var b=[],c=[],d=h(a.replace(Q,"$1"));return d[u]?ha(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a,d(b,null,f,c),b[0]=null,!c.pop()}}),has:ha(function(a){return function(b){return fa(a,b).length>0}}),contains:ha(function(a){return a=a.replace(ba,ca),function(b){return(b.textContent||b.innerText||e(b)).indexOf(a)>-1}}),lang:ha(function(a){return V.test(a||"")||fa.error("unsupported lang: "+a),a=a.replace(ba,ca).toLowerCase(),function(b){var c;do if(c=p?b.lang:b.getAttribute("xml:lang")||b.getAttribute("lang"))return c=c.toLowerCase(),c===a||0===c.indexOf(a+"-");while((b=b.parentNode)&&1===b.nodeType);return!1}}),target:function(b){var c=a.location&&a.location.hash;return c&&c.slice(1)===b.id},root:function(a){return a===o},focus:function(a){return a===n.activeElement&&(!n.hasFocus||n.hasFocus())&&!!(a.type||a.href||~a.tabIndex)},enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&!!a.checked||"option"===b&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},empty:function(a){for(a=a.firstChild;a;a=a.nextSibling)if(a.nodeType<6)return!1;return!0},parent:function(a){return!d.pseudos.empty(a)},header:function(a){return Y.test(a.nodeName)},input:function(a){return X.test(a.nodeName)},button:function(a){var b=a.nodeName.toLowerCase();return"input"===b&&"button"===a.type||"button"===b},text:function(a){var b;return"input"===a.nodeName.toLowerCase()&&"text"===a.type&&(null==(b=a.getAttribute("type"))||"text"===b.toLowerCase())},first:na(function(){return[0]}),last:na(function(a,b){return[b-1]}),eq:na(function(a,b,c){return[0>c?c+b:c]}),even:na(function(a,b){for(var c=0;b>c;c+=2)a.push(c);return a}),odd:na(function(a,b){for(var c=1;b>c;c+=2)a.push(c);return a}),lt:na(function(a,b,c){for(var d=0>c?c+b:c;--d>=0;)a.push(d);return a}),gt:na(function(a,b,c){for(var d=0>c?c+b:c;++d
The purpose of this page is to access your camera and microphone.
'); var port = chrome.runtime.connect(); var hints = location.href.split('?hints=')[1]; if (hints) { hints = JSON.parse(hints); } else { hints = { audio: true, video: true }; } navigator.mediaDevices.getUserMedia(hints).then(function(stream) { stream.getTracks().forEach(function(track) { track.stop(); }); port.postMessage(hints); window.close(); }).catch(function(e) { port.postMessage({ error: e }); var html = 'Unable to access your camera and microphone.
'; html += 'Please go to following pages and remove "getUserMedia" from blocked-list:
'; html += 'chrome://settings/content/microphone?search=camera'; html += '
chrome://settings/content/microphone?search=microphone'; if(e.message && e.message.toString().length) { html += '
Error Message: ' + e.message + '';
}
document.body.innerHTML = html;
});
================================================
FILE: Chrome-Extensions/getUserMedia-on-http/content-script.js
================================================
var port = chrome.runtime.connect();
port.onMessage.addListener(function(message) {
window.postMessage({
'get-user-media-http': message,
'from-background': true
}, '*');
});
window.addEventListener('message', function(event) {
if (event.source != window || !event.data['from-webpage'] || !event.data['get-user-media-http']) return;
port.postMessage(event.data['get-user-media-http']);
});
function getUserMediaHttp() {
if(location.protocol === 'https:' || location.protocol === 'chrome:' || document.domain === 'localhost' || document.domain === '127.0.0.1') {
// ignore HTTPs and localhost and chrome
return;
}
if(!navigator.mediaDevices) {
navigator.mediaDevices = {};
}
var hints = {
audio: true,
video: true
};
var errorCallback = function(error) {
console.error('getUserMediaHttp error', error);
};
var successCallback = function(stream) {
stream.getTracks().forEach(function(track) {
console.log('getUserMediaHttp stream', track.kind, track.readyState);
});
};
navigator.mediaDevices.getUserMedia = function(_hints) {
if (!_hints || (!_hints.audio && !_hints.video && !_hints.screen && !_hints.tab)) {
_hints = {
audio: true,
video: true
};
}
hints = _hints;
getUserMedia();
return {
then: function(callback) {
if(typeof callback !== 'function') {
throw new Error('"callback" must be a function.');
}
successCallback = callback;
return {
catch: function(callback) {
if(typeof callback !== 'function') {
throw new Error('"callback" must be a function.');
}
errorCallback = callback;
}
}
}
}
};
function getUserMedia() {
window.postMessage({
'get-user-media-http': hints,
'from-webpage': true
}, '*');
}
window.addEventListener('message', function(event) {
if (event.source != window || !event.data['from-background']) return;
var hints = event.data['get-user-media-http'];
if (!hints) return;
if(hints.error) {
errorCallback(hints.error);
return;
}
if (hints.sdp && hints.sdp.type === 'offer') {
var rtc = new webrtcHandler();
rtc.createAnswer(hints.sdp, function(answer) {
if (answer.sdp) {
window.postMessage({
'get-user-media-http': {
sdp: answer
},
'from-webpage': true
}, '*');
}
if (answer.stream) {
answer.stream.oninactive = function() {
window.postMessage({
'get-user-media-http': {
'stream-stop': answer.stream.id
},
'from-webpage': true
}, '*');
rtc.peer.close();
rtc.peer = null;
};
successCallback(answer.stream);
window.addEventListener('beforeunload', function() {
answer.stream.getTracks().forEach(function(track) {
track.stop();
});
}, false);
}
});
}
});
}
var script = document.createElement('script');
(document.head || document.body || document.documentElement).appendChild(script).text = getUserMediaHttp.toString() + ';' + webrtcHandler.toString() + ';getUserMediaHttp();';
script.remove();
================================================
FILE: Chrome-Extensions/getUserMedia-on-http/example/index.html
================================================
getUserMedia on HTTP / Install This Extension
================================================ FILE: Chrome-Extensions/getUserMedia-on-http/example/index.js ================================================ var logs = document.querySelector('#logs'); function showLog(log) { var div = document.createElement('div'); div.innerHTML = log; logs.appendChild(div); } var getUserMediaStreamObject; function getUserMedia() { if(typeof getUserMediaHttp !== 'function') { showLog('getUserMedia extension is not installed or disabled.'); showLog('Please install this extension: https://chrome.google.com/webstore/detail/getusermedia/nbnpcmljmiinldficickhdoaiblgkggc'); return; } showLog('Calling getUserMediaHttp...'); var hints = { audio: true, video: true }; var checkedRadioId = document.querySelector('input[type=radio]:checked').id; if(checkedRadioId === 'camera') { hints = { audio: true, video: true }; } if(checkedRadioId === 'microphone') { hints = { audio: true }; } if(checkedRadioId === 'screen') { hints = { video: { mediaSource: 'screen' } }; } showLog('getUserMediaHttp hints: ' + JSON.stringify(hints)); navigator.mediaDevices.getUserMedia(hints).then(function(stream) { getUserMediaStreamObject = stream; showLog('Got stream from getUserMediaHttp...'); stream.getTracks().forEach(function(track) { showLog(track.kind + ': ' + track.readyState); }); document.querySelector('video').srcObject = stream; }).catch(function(e) { showLog('Message: ' + e.message); showLog('Stack: ' + e.stack); }); } document.querySelector('#getUserMedia').onclick = function() { this.disabled = true; if(!getUserMediaStreamObject) { this.innerHTML = 'Stop getUserMedia Stream'; getUserMedia(); } else { this.innerHTML = 'getUserMedia'; getUserMediaStreamObject.getTracks().forEach(function(track) { track.stop(); }); document.querySelector('video').srcObject = null; } setTimeout(function() { document.querySelector('#getUserMedia').disabled = false; }, 1000); }; document.querySelectorAll('#radio-container input[type=radio]').forEach(function(radio) { radio.onclick = function() { document.querySelectorAll('#radio-container input[type=radio]:checked').forEach(function(radio) { radio.checked = false; }); this.checked = true; }; }); ================================================ FILE: Chrome-Extensions/getUserMedia-on-http/manifest.json ================================================ { "name" : "getUserMedia", "author": "Muaz Khan", "version" : "1.2", "manifest_version" : 2, "minimum_chrome_version": "34", "description" : "Access camera, mic or screen on any HTTP domain! i.e. Call getUserMedia on any HTTP website!", "homepage_url": "https://github.com/muaz-khan/Chrome-Extensions/tree/master/getUserMedia-on-http", "background": { "scripts": ["webrtc-handler.js", "background-script.js"], "persistent": false }, "content_scripts":[ { "matches":[ "
## Call From Your Own WebSite
**Live Demo:** [simple-demos/RecordRTC_Extension.html](https://www.webrtc-experiment.com/RecordRTC/simple-demos/RecordRTC_Extension.html)
You can call this chrome extension directly from your own website as well!
```javascript
if(typeof RecordRTC_Extension === 'undefined') {
alert('RecordRTC chrome extension is either disabled or not installed.');
}
var recorder = new RecordRTC_Extension();
recorder.startRecording(recorder.getSupoortedFormats()[7], function() {
setTimeout(function() {
recorder.stopRecording(function(blob) {
console.log(blob.size, blob);
var url = URL.createObjectURL(blob);
video.src = url;
});
}, 3000);
});
```
For simple code:
```javascript
var recorder = new RecordRTC_Extension();
recorder.startRecording({
enableScreen: true,
enableMicrophone: true,
enableSpeakers: true
});
btnStopRecording.onclick = function() {
recorder.stopRecording(function(blob) {
console.log(blob.size, blob);
var url = URL.createObjectURL(blob);
video.src = url;
});
};
```
### `getSupoortedFormats`
You can pass any of the following on `startRecording` method:
```javascript
const getSupoortedFormats = [{
enableScreen: true
}, {
enableScreen: true,
enableMicrophone: true
}, {
enableScreen: true,
enableSpeakers: true
}, {
enableScreen: true,
enableMicrophone: true,
enableSpeakers: true
}, {
enableTabCaptureAPI: true
}, {
enableTabCaptureAPI: true,
enableTabCaptureAPIAudioOnly: true
}, {
enableScreen: true,
enableCamera: true
}, {
enableMicrophone: true,
enableCamera: true
}, {
enableMicrophone: true,
enableSpeakers: true
}, {
enableMicrophone: true
}, {
enableSpeakers: true
}];
```
### API Explanation
1. First step is to initialize the constructor `new RecordRTC_Extension()`.
2. Second step is, pass two parameters on `startRecording`. First paramter is named as `recording-formats` and last parameter is named as `recording-start-callback`.
3. Manually stop the recording using `stopRecording` method. Callback contains two arguments. First argument is `Blob` object and second argument is `error` string.
## License
[Chrome-Extensions](https://github.com/muaz-khan/Chrome-Extensions) are released under [MIT license](https://github.com/muaz-khan/Chrome-Extensions/blob/master/LICENSE) . Copyright (c) [Muaz Khan](https://MuazKhan.com).
================================================
FILE: Chrome-Extensions/screen-recording/RecordRTC/DiskStorage.js
================================================
// via: https://github.com/muaz-khan/RecordRTC/blob/master/dev/DiskStorage.js
var DiskStorage = {
init: function() {
var self = this;
var dbVersion = 1;
var dbName = this.dbName || location.href.replace(/\/|:|#|%|\.|\[|\]/g, ''),
db;
var request = indexedDB.open(dbName, dbVersion);
function createObjectStore(dataBase) {
dataBase.createObjectStore(self.dataStoreName);
}
function putInDB() {
var transaction = db.transaction([self.dataStoreName], 'readwrite');
if (typeof self.data.key !== 'undefined') {
var request;
if (self.data.remove === true) {
request = transaction.objectStore(self.dataStoreName).delete(self.data.key);
} else if (self.data.get === true) {
request = transaction.objectStore(self.dataStoreName).get(self.data.key);
} else {
request = transaction.objectStore(self.dataStoreName).put(self.data.value, self.data.key);
}
var key = self.data.key;
request.onsuccess = function() {
if (typeof self.callback === 'function') {
if (self.data.get === true) {
var cb = self.callback;
self.callback = null;
cb(event.target.result, key);
return;
}
var cb = self.callback;
self.callback = null;
cb('success', key);
}
};
request.onerror = function(error) {
if (typeof self.callback === 'function') {
self.callback(null, key, error);
var cb = self.callback;
self.callback = null;
cb(null, key, error);
}
};
}
}
request.onerror = self.onError;
request.onsuccess = function() {
db = request.result;
db.onerror = self.onError;
if (db.setVersion) {
if (db.version !== dbVersion) {
var setVersion = db.setVersion(dbVersion);
setVersion.onsuccess = function() {
createObjectStore(db);
putInDB();
};
} else {
putInDB();
}
} else {
putInDB();
}
};
request.onupgradeneeded = function(event) {
createObjectStore(event.target.result);
};
},
Fetch: function(key, callback) {
this.data = {
key: key,
get: true
};
this.callback = callback;
this.init();
return this;
},
Store: function(data, callback) {
this.data = data;
this.callback = callback;
this.init();
return this;
},
Remove: function(key, callback) {
this.data = {
key: key,
remove: true
};
this.callback = callback;
this.init();
return this;
},
onError: function(error) {
console.error(error);
},
dataStoreName: 'DiskStorage',
dbName: 'DiskStorage',
data: {
value: '',
key: 'key'
},
StoreFile: function(file, callback) {
DiskStorage.Fetch('files-list', function(list) {
if (!list || list === 'success') {
list = [];
}
list.push({
name: file.name,
display: file.name,
youtube: '',
php: ''
});
DiskStorage.Store({
key: 'files-list',
value: list
}, function() {
DiskStorage.Store({
key: file.name,
value: file
}, callback);
});
});
},
RemoveFile: function(fName, callback) {
DiskStorage.Fetch('files-list', function(list) {
if (!list || list === 'success') {
list = [];
}
var newNames = [];
list.forEach(function(item) {
if(typeof item === 'string') {
if (item !== fName) {
newNames.push({
name: item,
display: item,
youtube: '',
php: ''
});
}
}
else if(typeof item.name === 'string') {
if (item.name !== fName) {
newNames.push(item);
}
}
});
list = newNames;
DiskStorage.Store({
key: 'files-list',
value: list
}, function() {
DiskStorage.Remove(fName, callback);
});
});
},
GetFilesList: function(callback) {
DiskStorage.Fetch('files-list', function(list) {
if (!list || list === 'success') {
list = [];
}
var newList = [];
list.reverse().forEach(function(item) {
if(typeof item === 'string') {
newList.push({
name: item,
display: item,
youtube: '',
php: ''
});
}
else {
newList.push({
name: item.name,
display: item.display || item.name,
youtube: item.youtube,
php: item.php
});
}
})
callback(newList);
});
},
GetLastSelectedFile: function(fName, callback) {
DiskStorage.GetFilesList(function(list) {
if (!list.length) {
callback();
return;
}
if(!fName) {
DiskStorage.Fetch(list[0].name || list[0], callback);
return;
}
var found;
list.forEach(function(item) {
if(typeof item === 'string') {
if(item === fName) {
found = {
name: item,
display: item,
php: '',
youtube: ''
};
}
}
else if(item.name === fName) {
found = item;
}
});
if(!found) {
DiskStorage.Fetch(list[0].name || list[0], callback);
return;
}
DiskStorage.Fetch(found.name, callback);
});
},
UpdateFileName: function(fileName, newFileName, callback) {
if(!newFileName || !newFileName.replace(/ /g, '').length) {
newFileName = 'unknown.webm';
}
if(newFileName.split('.').length <= 1) {
newFileName = newFileName.split('.')[0] + '.webm';
}
DiskStorage.Fetch('files-list', function(list) {
if (!list || list === 'success') {
list = [];
}
var alreadyTaken;
list.forEach(function(item, idx) {
if(item.name === newFileName || /* fallback */ item === newFileName) {
alreadyTaken = true;
}
});
if(alreadyTaken) {
newFileName = newFileName.split('.')[0] + '_.' + newFileName.split('.')[1];
DiskStorage.UpdateFileName(fileName, newFileName, callback);
return;
}
var updated;
list.forEach(function(item, idx) {
if(typeof item === 'string') {
if(item !== fileName) {
return;
}
}
else if(typeof item.name === 'string') {
if(item.name !== fileName) {
return;
}
}
updated = true;
item.name = newFileName;
list[idx] = item;
});
DiskStorage.Store({
key: 'files-list',
value: list
}, function() {
DiskStorage.Fetch(fileName, function(blob) {
var file = new File([blob], newFileName, {
type: blob.type
});
DiskStorage.Store({
key: file.name,
value: file
}, function() {
callback(file);
});
});
});
});
},
UpdateFileInfo: function(fileName, info, callback) {
DiskStorage.Fetch('files-list', function(list) {
if (!list || list === 'success') {
list = [];
}
var updated;
list.forEach(function(item, idx) {
if(typeof item === 'string') {
if(item !== fileName) {
return;
}
}
else if(typeof item.name === 'string') {
if(item.name !== fileName) {
return;
}
}
updated = true;
Object.keys(info).forEach(function(key) {
item[key] = info[key];
})
list[idx] = item;
});
DiskStorage.Store({
key: 'files-list',
value: list
}, callback);
});
}
};
================================================
FILE: Chrome-Extensions/screen-recording/RecordRTC/EBML.js
================================================
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.EBML = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;iThe purpose of this page is to access your camera and microphone.
'); var port = chrome.runtime.connect(); navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) { var tracksLength = stream.getTracks().length; stream.getTracks().forEach(function(track) { track.stop(); }); if(tracksLength <= 1) { throw new Error('Expected two tracks but received: ' + tracksLength); } port.postMessage({ messageFromContentScript1234: true, startRecording: true }); window.close(); }).catch(function(e) { navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) { var tracksLength = stream.getTracks().length; stream.getTracks().forEach(function(track) { track.stop(); }); if(tracksLength < 1) { throw new Error('Expected at least one track but received: ' + tracksLength); } port.postMessage({ messageFromContentScript1234: true, startRecording: true, onlyMicrophone: true }); window.close(); }).catch(function() { var html = 'Unable to access your camera and/or microphone.
'; html += 'Please go to following pages and remove "RecordRTC" from blocked-list:
'; html += 'chrome://settings/content/camera?search=camera'; html += '
chrome://settings/content/microphone?search=microphone'; if(e.message && e.message.toString().length) { html += '
Error Message: ' + e.message + '';
}
document.body.innerHTML = html;
});
});
================================================
FILE: Chrome-Extensions/screen-recording/dropdown.html
================================================
Applying Changes...
Customize RecordRTC Extension
| Select a camera device: | |
| Select a microphone device: | |
| Select video codecs: |
|
| Camera resolutions: | |
| Select video frame rates: | |
| Select video bitrates: | |
| Fix video seeking issues? | |
| YouTube visibility: |
or YouTube';
} else if (item.php) {
html = 'Click to download file from: ' + item.php + ' ';
} else if (item.youtube) {
html = 'Click to download file from: ' + item.youtube + '';
}
browserCache.innerHTML = html;
if (browserCache.querySelector('.cross-icon')) {
browserCache.querySelector('.cross-icon').onclick = function() {
if (window.confirm('Do you want to delete this video from server?')) {
deleteFromPHPServer(item.name, function(response) {
DiskStorage.UpdateFileInfo(file.name, {
php: ''
}, function() {
if (response === 'deleted') {
location.reload();
} else {
alert(response);
}
});
});
}
};
}
localStorage.setItem('selected-file', file.name);
}
var recentFile = localStorage.getItem('selected-file');
DiskStorage.GetLastSelectedFile(recentFile, function(file) {
if (!file) {
onGettingFile(file);
return;
}
DiskStorage.GetFilesList(function(list) {
if (!recentFile) {
onGettingFile(file, list[0]);
return;
}
var found;
list.forEach(function(item) {
if (typeof item === 'string') {
if (item === recentFile) {
found = {
name: item,
display: item,
php: '',
youtube: ''
};
}
} else if (item.name === recentFile) {
found = item;
}
});
if (!found) {
onGettingFile(file, list[0]);
return;
}
onGettingFile(file, found);
});
});
var btnUploadDropDown = document.querySelector('#btn-upload-dropdown');
document.querySelector('#btn-upload').onclick = function(e) {
e.stopPropagation();
if (!file) {
alert('You have no recordings.');
return;
}
if (btnUploadDropDown.className === 'visible') {
btnUploadDropDown.className = '';
} else {
btnUploadDropDown.className = 'visible';
}
};
var btnRecordingsListDropDown = document.querySelector('#btn-recordings-list-dropdown');
document.querySelector('#btn-recordings-list').onclick = function(e) {
e.stopPropagation();
if (btnRecordingsListDropDown.className === 'visible') {
btnRecordingsListDropDown.className = '';
btnRecordingsListDropDown.innerHTML = '';
} else {
btnRecordingsListDropDown.className = 'visible';
btnRecordingsListDropDown.innerHTML = '';
DiskStorage.GetFilesList(function(list) {
if (!list.length) {
btnRecordingsListDropDown.className = '';
alert('You have no recordings.');
return;
}
list.forEach(function(item) {
var div = document.createElement('div');
div.innerHTML = '
' + item.display;
btnRecordingsListDropDown.appendChild(div);
div.querySelector('.cross-icon').onclick = function(e) {
e.preventDefault();
e.stopPropagation();
if (!window.confirm('Are you sure you want to permanently delete the selected recording?')) {
return;
}
function afterDelete() {
if (div.previousSibling) {
div.previousSibling.click();
} else if (div.nextSibling) {
div.nextSibling.click();
} else {
location.reload();
}
div.parentNode.removeChild(div);
}
DiskStorage.RemoveFile(item.name, function() {
if(!item.php || !item.php.length) {
afterDelete();
return;
}
deleteFromPHPServer(item.name, afterDelete);
});
};
div.querySelector('.edit-icon').onclick = function(e) {
e.preventDefault();
e.stopPropagation();
var newFileName = prompt('Please enter new file name', item.display) || item.display;
DiskStorage.UpdateFileInfo(item.name, {
display: newFileName
}, function() {
item.display = newFileName;
onGettingFile(file, item);
document.body.onclick();
});
};
div.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
DiskStorage.Fetch(item.name, function(file) {
onGettingFile(file, item);
});
document.body.onclick();
};
if (file && file.item && file.item.name === item.name) {
div.className = 'btn-upload-dropdown-selected';
}
});
});
}
};
document.body.onclick = function() {
if (btnUploadDropDown.className === 'visible') {
btnUploadDropDown.className = '';
}
if (btnRecordingsListDropDown.className === 'visible') {
btnRecordingsListDropDown.className = '';
}
};
function formatSecondsAsTime(secs) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - (hr * 3600)) / 60);
var sec = Math.floor(secs - (hr * 3600) - (min * 60));
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
if (hr <= 0) {
return min + ':' + sec;
}
return hr + ':' + min + ':' + sec;
}
================================================
FILE: Chrome-Extensions/screen-recording/preview/preview.php.upload.js
================================================
var server_url = 'https://your-domain.com/f/';
document.querySelector('#btn-php-upload').onclick = function() {
if (!file) {
fname.innerHTML = 'You did NOT record anything yet.';
return;
}
this.disabled = true;
fresolutions.innerHTML = fsize.innerHTML = fduration.innerHTML = browserCache.innerHTML = '';
fname.innerHTML = 'Upload started...';
uploadToPHPServer(file, function(progress, videoURL) {
browserCache.innerHTML = '';
if (progress === 'ended' || videoURL) {
showPHPURL(videoURL);
document.title = 'Upload successful';
return;
}
if (progress != 'Upload started...') {
fname.innerHTML = 'Upload Progress: ' + progress + '%';
browserCache.innerHTML = '';
} else {
fname.innerHTML = progress;
}
document.title = progress + '% uploaded';
if (progress >= 99 || videoURL || progress === 'progress-ended') {
browserCache.innerHTML = '';
fname.innerHTML = 'Uploaded to Server. Retrieving the private video URL...';
}
});
};
function showPHPURL(videoURL) {
DiskStorage.UpdateFileInfo(file.name, {
php: videoURL
}, function() {
file.url = videoURL;
if(!file.item) file.item = {};
file.item.php = videoURL;
onGettingFile(file, file.item);
});
}
function uploadToPHPServer(blob, callback) {
// create FormData
var formData = new FormData();
var fName = blob.name;
formData.append('video-filename', fName);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');
makeXMLHttpRequest(server_url, formData, function(progress) {
if (progress === 'upload-faild') {
return;
}
if (progress !== 'http-response-200') {
callback(progress);
return;
}
callback('ended', server_url + fName);
});
}
function deleteFromPHPServer(fName, callback) {
// create FormData
var formData = new FormData();
formData.append('delete-file', fName);
makeXMLHttpRequest(server_url + 'delete.php', formData, function(progress) {
if (progress === 'deleted' || progress === 'Problem deleting file.') {
callback(progress, fName)
}
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText && request.responseText.toString().indexOf('Upload failed.
') === 0) { fname.innerHTML = request.responseText; header.style.height = 'auto'; header.style.color = 'red'; callback('upload-faild'); return; } if (request.responseText && request.responseText.toString().indexOf('deleted successfully') !== -1) { callback('deleted') return; } if (request.responseText && request.responseText.toString() === 'Problem deleting file.') { callback(request.responseText) return; } callback('http-response-200'); } }; request.upload.onloadstart = function() { callback('Upload started...'); }; request.upload.onprogress = function(event) { callback(Math.round(event.loaded / event.total * 100)); }; request.upload.onload = function() { callback('progress-about-to-end'); }; request.upload.onload = function() { callback('progress-ended'); }; request.upload.onerror = function(error) { callback('Failed to upload to server'); }; request.upload.onabort = function(error) { callback('Upload aborted.'); }; request.open('POST', url); request.send(data); } ================================================ FILE: Chrome-Extensions/screen-recording/preview/preview.youtube.upload.js ================================================ var youtube_privacy = 'public'; chrome.storage.sync.get(null, function(items) { if (items['youtube_privacy'] && items['youtube_privacy'] !== 'public') { youtube_privacy = items['youtube_privacy']; } }); document.querySelector('#btn-youtube-upload').onclick = function() { if (!file) { fname.innerHTML = 'You did NOT record anything yet.'; return; } this.disabled = true; fresolutions.innerHTML = fsize.innerHTML = fduration.innerHTML = browserCache.innerHTML = ''; fname.innerHTML = 'Google.getAuthToken...'; chrome.identity.getAuthToken({ 'interactive': true }, function(access_token) { if (chrome.runtime.lastError) { if (typeof chrome.runtime.lastError === 'object') { if (chrome.runtime.lastError && chrome.runtime.lastError.message) { alert(chrome.runtime.lastError.message); } else { alert(JSON.stringify(chrome.runtime.lastError)); } } fname.innerHTML = chrome.runtime.lastError; return; } fname.innerHTML = 'Upload started...'; uploadVideo = new UploadVideo(); uploadVideo.ready(access_token); uploadVideo.callback = uploadVideoCallback; uploadVideo.uploadFile(file.name, file); }); }; function showYouTubeURL(videoURL) { DiskStorage.UpdateFileInfo(file.name, { youtube: videoURL }, function() { file.url = videoURL; if(!file.item) file.item = {}; file.item.youtube = videoURL; onGettingFile(file, file.item); }); } function uploadVideoCallback(response, videoURL) { fname.innerHTML = 'YouTube Upload Progress: ' + response + '%'; browserCache.innerHTML = ''; document.title = response + '% uploaded'; if (response >= 100 || videoURL) { browserCache.innerHTML = ''; fname.innerHTML = 'Uploaded to YouTube. Retrieving the video URL...'; } if (videoURL) { browserCache.innerHTML = ''; showYouTubeURL(videoURL); document.title = 'Upload successful'; } // etag, id, kind // snippet => {title, categoryId, channelId, channelTitle, description, liveBroadcastContent, publishedAt, // tags[], localized{description,title}, // thumbnails{default{height, url, width}, hiegh{}, medium{}} // status{embeddable, license, privacyStatus, publicStatsViewable, uploadStatus}} // uploadResponse.status.uploadStatus === 'uploaded' // uploadResponse.snippets.title (video title) // uploadResponse.snippets.channelId } /* upload_youtube_video.js Copyright 2017 Google Inc. All Rights Reserved. */ var uploadVideo; var STATUS_POLLING_INTERVAL_MILLIS = 60 * 1000; // One minute. var UploadVideo = function() { this.tags = ['recordrtc']; this.categoryId = 28; this.videoId = ''; this.uploadStartTime = 0; }; UploadVideo.prototype.ready = function(accessToken) { this.accessToken = accessToken; this.gapi = gapi; this.authenticated = true; false && this.gapi.client.request({ path: '/youtube/v3/channels', params: { part: 'snippet', mine: true }, callback: function(response) { if (!response.error) { // response.items[0].snippet.title -- channel title // response.items[0].snippet.thumbnails.default.url -- channel thumbnail } }.bind(this) }); }; UploadVideo.prototype.uploadFile = function(fileName, file) { var youtube_title = fileName; if (file.item && file.item.display) { youtube_title = file.item.display; } var metadata = { snippet: { title: youtube_title, description: fileName + ' (via RecordRTC)', tags: this.tags, categoryId: this.categoryId }, status: { privacyStatus: youtube_privacy } }; var uploader = new MediaUploader({ baseUrl: 'https://www.googleapis.com/upload/youtube/v3/videos', file: file, token: this.accessToken, metadata: metadata, params: { part: Object.keys(metadata).join(',') }, onError: function(data) { var message = data; try { var errorResponse = JSON.parse(data); message = errorResponse.error.message; } finally { alert(message); } }.bind(this), onProgress: function(data) { var bytesUploaded = data.loaded; var totalBytes = parseInt(data.total); var percentageComplete = parseInt((bytesUploaded * 100) / totalBytes); uploadVideo.callback(percentageComplete); }.bind(this), onComplete: function(data) { var uploadResponse = JSON.parse(data); this.uploadResponse = uploadResponse; this.videoId = uploadResponse.id; this.videoURL = 'https://www.youtube.com/watch?v=' + this.videoId; uploadVideo.callback('uploaded', this.videoURL); setTimeout(this.pollForVideoStatus, 2000); }.bind(this) }); this.uploadStartTime = Date.now(); uploader.upload(); }; UploadVideo.prototype.pollForVideoStatus = function() { this.gapi.client.request({ path: '/youtube/v3/videos', params: { part: 'status,player', id: this.videoId }, callback: function(response) { if (response.error) { uploadVideo.pollForVideoStatus(); } else { var uploadStatus = response.items[0].status.uploadStatus; switch (uploadStatus) { case 'uploaded': uploadVideo.callback('uploaded', uploadVideo.videoURL); uploadVideo.pollForVideoStatus(); break; case 'processed': uploadVideo.callback('processed', uploadVideo.videoURL); break; default: uploadVideo.callback('failed', uploadVideo.videoURL); break; } } }.bind(this) }); }; /* cors_upload.js Copyright 2015 Google Inc. All Rights Reserved. */ var DRIVE_UPLOAD_URL = 'https://www.googleapis.com/upload/drive/v2/files/'; var RetryHandler = function() { this.interval = 1000; // Start at one second this.maxInterval = 60 * 1000; // Don't wait longer than a minute }; RetryHandler.prototype.retry = function(fn) { setTimeout(fn, this.interval); this.interval = this.nextInterval_(); }; RetryHandler.prototype.reset = function() { this.interval = 1000; }; RetryHandler.prototype.nextInterval_ = function() { var interval = this.interval * 2 + this.getRandomInt_(0, 1000); return Math.min(interval, this.maxInterval); }; RetryHandler.prototype.getRandomInt_ = function(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; var MediaUploader = function(options) { var noop = function() {}; this.file = options.file; this.contentType = options.contentType || this.file.type || 'application/octet-stream'; this.metadata = options.metadata || { 'title': this.file.name, 'mimeType': this.contentType }; this.token = options.token; this.onComplete = options.onComplete || noop; this.onProgress = options.onProgress || noop; this.onError = options.onError || noop; this.offset = options.offset || 0; this.chunkSize = options.chunkSize || 0; this.retryHandler = new RetryHandler(); this.url = options.url; if (!this.url) { var params = options.params || {}; params.uploadType = 'resumable'; this.url = this.buildUrl_(options.fileId, params, options.baseUrl); } this.httpMethod = options.fileId ? 'PUT' : 'POST'; }; MediaUploader.prototype.upload = function() { var self = this; var xhr = new XMLHttpRequest(); xhr.open(this.httpMethod, this.url, true); xhr.setRequestHeader('Authorization', 'Bearer ' + this.token); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('X-Upload-Content-Length', this.file.size); xhr.setRequestHeader('X-Upload-Content-Type', this.contentType); xhr.onload = function(e) { if (e.target.status < 400) { var location = e.target.getResponseHeader('Location'); this.url = location; this.sendFile_(); } else { this.onUploadError_(e); } }.bind(this); xhr.onerror = this.onUploadError_.bind(this); xhr.send(JSON.stringify(this.metadata)); }; MediaUploader.prototype.sendFile_ = function() { var content = this.file; var end = this.file.size; if (this.offset || this.chunkSize) { // Only bother to slice the file if we're either resuming or uploading in chunks if (this.chunkSize) { end = Math.min(this.offset + this.chunkSize, this.file.size); } content = content.slice(this.offset, end); } var xhr = new XMLHttpRequest(); xhr.open('PUT', this.url, true); xhr.setRequestHeader('Content-Type', this.contentType); xhr.setRequestHeader('Content-Range', 'bytes ' + this.offset + '-' + (end - 1) + '/' + this.file.size); xhr.setRequestHeader('X-Upload-Content-Type', this.file.type); if (xhr.upload) { xhr.upload.addEventListener('progress', this.onProgress); } xhr.onload = this.onContentUploadSuccess_.bind(this); xhr.onerror = this.onContentUploadError_.bind(this); xhr.send(content); }; MediaUploader.prototype.resume_ = function() { var xhr = new XMLHttpRequest(); xhr.open('PUT', this.url, true); xhr.setRequestHeader('Content-Range', 'bytes */' + this.file.size); xhr.setRequestHeader('X-Upload-Content-Type', this.file.type); if (xhr.upload) { xhr.upload.addEventListener('progress', this.onProgress); } xhr.onload = this.onContentUploadSuccess_.bind(this); xhr.onerror = this.onContentUploadError_.bind(this); xhr.send(); }; MediaUploader.prototype.extractRange_ = function(xhr) { var range = xhr.getResponseHeader('Range'); if (range) { this.offset = parseInt(range.match(/\d+/g).pop(), 10) + 1; } }; MediaUploader.prototype.onContentUploadSuccess_ = function(e) { if (e.target.status == 200 || e.target.status == 201) { this.onComplete(e.target.response); } else if (e.target.status == 308) { this.extractRange_(e.target); this.retryHandler.reset(); this.sendFile_(); } }; MediaUploader.prototype.onContentUploadError_ = function(e) { if (e.target.status && e.target.status < 500) { this.onError(e.target.response); } else { this.retryHandler.retry(this.resume_.bind(this)); } }; MediaUploader.prototype.onUploadError_ = function(e) { this.onError(e.target.response); // TODO - Retries for initial upload }; MediaUploader.prototype.buildQuery_ = function(params) { params = params || {}; return Object.keys(params).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); }; MediaUploader.prototype.buildUrl_ = function(id, params, baseUrl) { var url = baseUrl || DRIVE_UPLOAD_URL; if (id) { url += id; } var query = this.buildQuery_(params); if (query) { url += '?' + query; } return url; }; ================================================ FILE: Chrome-Extensions/screen-recording/preview.html ================================================ 
Upload to Private Server
Upload to YouTube
Recording: 00:00
================================================ FILE: Chrome-Extensions/screen-recording/video.js ================================================ // var src = location.href.split('?src=')[1]; // document.querySelector('video').src = src; var video = document.querySelector('video'); video.style.height = parseInt(innerHeight - 100) + 'px'; var deviceId = {}; chrome.storage.sync.get(null, function(items) { var hints = { video: true }; if(items['camera'] && typeof items['camera'] === 'string') { hints.video = { deviceId: items['camera'] }; } if(items['videoResolutions'] && items['videoResolutions'] !== 'default') { var videoResolutions = items['videoResolutions']; if(hints.video === true) { hints.video = {}; } var width = videoResolutions.split('x')[0]; var height = videoResolutions.split('x')[1]; if(width && height) { hints.video.width = { ideal: width }; hints.video.height = { ideal: height }; } } navigator.mediaDevices.getUserMedia(hints).then(function(stream) { video.srcObject = stream; }).catch(function() { // retry with default devices hints = { video: true }; navigator.mediaDevices.getUserMedia(hints).then(function(stream) { video.srcObject = stream; }).catch(function() { alert('Unable to capture your camera.'); }); }); }); document.querySelector('button').onclick = function() { window.close(); }; function msToTime(s) { function addZ(n) { return (n < 10 ? '0' : '') + n; } var ms = s % 1000; s = (s - ms) / 1000; var secs = s % 60; s = (s - secs) / 60; var mins = s % 60; var hrs = (s - mins) / 60; return addZ(mins) + ':' + addZ(secs); } var span = document.querySelector('span'); var startedAt = (new Date).getTime(); var counter = 1; (function looper() { counter ++; if(counter % 2 == 0) { span.style.color = 'red'; } else { span.style.color = 'black'; } var current = (new Date).getTime() - startedAt; span.innerHTML = msToTime(current); setTimeout(looper, 1000); })(); ================================================ FILE: Chrome-Extensions/tabCapture/CodecsHandler.js ================================================ // CodecsHandler.js var CodecsHandler = (function() { function preferCodec(sdp, codecName) { var info = splitLines(sdp); if (!info.videoCodecNumbers) { return sdp; } if (codecName === 'vp8' && info.vp8LineNumber === info.videoCodecNumbers[0]) { return sdp; } if (codecName === 'vp9' && info.vp9LineNumber === info.videoCodecNumbers[0]) { return sdp; } if (codecName === 'h264' && info.h264LineNumber === info.videoCodecNumbers[0]) { return sdp; } sdp = preferCodecHelper(sdp, codecName, info); return sdp; } function preferCodecHelper(sdp, codec, info, ignore) { var preferCodecNumber = ''; if (codec === 'vp8') { if (!info.vp8LineNumber) { return sdp; } preferCodecNumber = info.vp8LineNumber; } if (codec === 'vp9') { if (!info.vp9LineNumber) { return sdp; } preferCodecNumber = info.vp9LineNumber; } if (codec === 'h264') { if (!info.h264LineNumber) { return sdp; } preferCodecNumber = info.h264LineNumber; } var newLine = info.videoCodecNumbersOriginal.split('SAVPF')[0] + 'SAVPF '; var newOrder = [preferCodecNumber]; if (ignore) { newOrder = []; } info.videoCodecNumbers.forEach(function(codecNumber) { if (codecNumber === preferCodecNumber) return; newOrder.push(codecNumber); }); newLine += newOrder.join(' '); sdp = sdp.replace(info.videoCodecNumbersOriginal, newLine); return sdp; } function splitLines(sdp) { var info = {}; sdp.split('\n').forEach(function(line) { if (line.indexOf('m=video') === 0) { info.videoCodecNumbers = []; line.split('SAVPF')[1].split(' ').forEach(function(codecNumber) { codecNumber = codecNumber.trim(); if (!codecNumber || !codecNumber.length) return; info.videoCodecNumbers.push(codecNumber); info.videoCodecNumbersOriginal = line; }); } if (line.indexOf('VP8/90000') !== -1 && !info.vp8LineNumber) { info.vp8LineNumber = line.replace('a=rtpmap:', '').split(' ')[0]; } if (line.indexOf('VP9/90000') !== -1 && !info.vp9LineNumber) { info.vp9LineNumber = line.replace('a=rtpmap:', '').split(' ')[0]; } if (line.indexOf('H264/90000') !== -1 && !info.h264LineNumber) { info.h264LineNumber = line.replace('a=rtpmap:', '').split(' ')[0]; } }); return info; } function removeVPX(sdp) { var info = splitLines(sdp); // last parameter below means: ignore these codecs sdp = preferCodecHelper(sdp, 'vp9', info, true); sdp = preferCodecHelper(sdp, 'vp8', info, true); return sdp; } function disableNACK(sdp) { if (!sdp || typeof sdp !== 'string') { throw 'Invalid arguments.'; } sdp = sdp.replace('a=rtcp-fb:126 nack\r\n', ''); sdp = sdp.replace('a=rtcp-fb:126 nack pli\r\n', 'a=rtcp-fb:126 pli\r\n'); sdp = sdp.replace('a=rtcp-fb:97 nack\r\n', ''); sdp = sdp.replace('a=rtcp-fb:97 nack pli\r\n', 'a=rtcp-fb:97 pli\r\n'); return sdp; } function prioritize(codecMimeType, peer) { if (!peer || !peer.getSenders || !peer.getSenders().length) { return; } if (!codecMimeType || typeof codecMimeType !== 'string') { throw 'Invalid arguments.'; } peer.getSenders().forEach(function(sender) { var params = sender.getParameters(); for (var i = 0; i < params.codecs.length; i++) { if (params.codecs[i].mimeType == codecMimeType) { params.codecs.unshift(params.codecs.splice(i, 1)); break; } } sender.setParameters(params); }); } function removeNonG722(sdp) { return sdp.replace(/m=audio ([0-9]+) RTP\/SAVPF ([0-9 ]*)/g, 'm=audio $1 RTP\/SAVPF 9'); } function setBAS(sdp, bandwidth, isScreen) { if (!bandwidth) { return sdp; } if (typeof isFirefox !== 'undefined' && isFirefox) { return sdp; } if (isScreen) { if (!bandwidth.screen) { console.warn('It seems that you are not using bandwidth for screen. Screen sharing is expected to fail.'); } else if (bandwidth.screen < 300) { console.warn('It seems that you are using wrong bandwidth value for screen. Screen sharing is expected to fail.'); } } // if screen; must use at least 300kbs if (bandwidth.screen && isScreen) { sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, ''); sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + bandwidth.screen + '\r\n'); } // remove existing bandwidth lines if (bandwidth.audio || bandwidth.video) { sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, ''); } if (bandwidth.audio) { sdp = sdp.replace(/a=mid:audio\r\n/g, 'a=mid:audio\r\nb=AS:' + bandwidth.audio + '\r\n'); } if (bandwidth.screen) { sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + bandwidth.screen + '\r\n'); } else if (bandwidth.video) { sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + bandwidth.video + '\r\n'); } return sdp; } // Find the line in sdpLines that starts with |prefix|, and, if specified, // contains |substr| (case-insensitive search). function findLine(sdpLines, prefix, substr) { return findLineInRange(sdpLines, 0, -1, prefix, substr); } // Find the line in sdpLines[startLine...endLine - 1] that starts with |prefix| // and, if specified, contains |substr| (case-insensitive search). function findLineInRange(sdpLines, startLine, endLine, prefix, substr) { var realEndLine = endLine !== -1 ? endLine : sdpLines.length; for (var i = startLine; i < realEndLine; ++i) { if (sdpLines[i].indexOf(prefix) === 0) { if (!substr || sdpLines[i].toLowerCase().indexOf(substr.toLowerCase()) !== -1) { return i; } } } return null; } // Gets the codec payload type from an a=rtpmap:X line. function getCodecPayloadType(sdpLine) { var pattern = new RegExp('a=rtpmap:(\\d+) \\w+\\/\\d+'); var result = sdpLine.match(pattern); return (result && result.length === 2) ? result[1] : null; } function setVideoBitrates(sdp, params) { params = params || {}; var xgoogle_min_bitrate = params.min; var xgoogle_max_bitrate = params.max; var sdpLines = sdp.split('\r\n'); // VP8 var vp8Index = findLine(sdpLines, 'a=rtpmap', 'VP8/90000'); var vp8Payload; if (vp8Index) { vp8Payload = getCodecPayloadType(sdpLines[vp8Index]); } if (!vp8Payload) { return sdp; } var rtxIndex = findLine(sdpLines, 'a=rtpmap', 'rtx/90000'); var rtxPayload; if (rtxIndex) { rtxPayload = getCodecPayloadType(sdpLines[rtxIndex]); } if (!rtxIndex) { return sdp; } var rtxFmtpLineIndex = findLine(sdpLines, 'a=fmtp:' + rtxPayload.toString()); if (rtxFmtpLineIndex !== null) { var appendrtxNext = '\r\n'; appendrtxNext += 'a=fmtp:' + vp8Payload + ' x-google-min-bitrate=' + (xgoogle_min_bitrate || '228') + '; x-google-max-bitrate=' + (xgoogle_max_bitrate || '228'); sdpLines[rtxFmtpLineIndex] = sdpLines[rtxFmtpLineIndex].concat(appendrtxNext); sdp = sdpLines.join('\r\n'); } return sdp; } function setOpusAttributes(sdp, params) { params = params || {}; var sdpLines = sdp.split('\r\n'); // Opus var opusIndex = findLine(sdpLines, 'a=rtpmap', 'opus/48000'); var opusPayload; if (opusIndex) { opusPayload = getCodecPayloadType(sdpLines[opusIndex]); } if (!opusPayload) { return sdp; } var opusFmtpLineIndex = findLine(sdpLines, 'a=fmtp:' + opusPayload.toString()); if (opusFmtpLineIndex === null) { return sdp; } var appendOpusNext = ''; appendOpusNext += '; stereo=' + (typeof params.stereo != 'undefined' ? params.stereo : '1'); appendOpusNext += '; sprop-stereo=' + (typeof params['sprop-stereo'] != 'undefined' ? params['sprop-stereo'] : '1'); if (typeof params.maxaveragebitrate != 'undefined') { appendOpusNext += '; maxaveragebitrate=' + (params.maxaveragebitrate || 128 * 1024 * 8); } if (typeof params.maxplaybackrate != 'undefined') { appendOpusNext += '; maxplaybackrate=' + (params.maxplaybackrate || 128 * 1024 * 8); } if (typeof params.cbr != 'undefined') { appendOpusNext += '; cbr=' + (typeof params.cbr != 'undefined' ? params.cbr : '1'); } if (typeof params.useinbandfec != 'undefined') { appendOpusNext += '; useinbandfec=' + params.useinbandfec; } if (typeof params.usedtx != 'undefined') { appendOpusNext += '; usedtx=' + params.usedtx; } if (typeof params.maxptime != 'undefined') { appendOpusNext += '\r\na=maxptime:' + params.maxptime; } sdpLines[opusFmtpLineIndex] = sdpLines[opusFmtpLineIndex].concat(appendOpusNext); sdp = sdpLines.join('\r\n'); return sdp; } // forceStereoAudio => via webrtcexample.com // requires getUserMedia => echoCancellation:false function forceStereoAudio(sdp) { var sdpLines = sdp.split('\r\n'); var fmtpLineIndex = null; for (var i = 0; i < sdpLines.length; i++) { if (sdpLines[i].search('opus/48000') !== -1) { var opusPayload = extractSdp(sdpLines[i], /:(\d+) opus\/48000/i); break; } } for (var i = 0; i < sdpLines.length; i++) { if (sdpLines[i].search('a=fmtp') !== -1) { var payload = extractSdp(sdpLines[i], /a=fmtp:(\d+)/); if (payload === opusPayload) { fmtpLineIndex = i; break; } } } if (fmtpLineIndex === null) return sdp; sdpLines[fmtpLineIndex] = sdpLines[fmtpLineIndex].concat('; stereo=1; sprop-stereo=1'); sdp = sdpLines.join('\r\n'); return sdp; } return { removeVPX: removeVPX, disableNACK: disableNACK, prioritize: prioritize, removeNonG722: removeNonG722, setApplicationSpecificBandwidth: function(sdp, bandwidth, isScreen) { return setBAS(sdp, bandwidth, isScreen); }, setVideoBitrates: function(sdp, params) { return setVideoBitrates(sdp, params); }, setOpusAttributes: function(sdp, params) { return setOpusAttributes(sdp, params); }, preferVP9: function(sdp) { return preferCodec(sdp, 'vp9'); }, preferCodec: preferCodec, forceStereoAudio: forceStereoAudio }; })(); // backward compatibility window.BandwidthHandler = CodecsHandler; ================================================ FILE: Chrome-Extensions/tabCapture/IceServersHandler.js ================================================ // IceServersHandler.js var IceServersHandler = (function() { function getIceServers(connection) { // resiprocate: 3344+4433 // pions: 7575 var iceServers = [{ 'urls': [ 'stun:webrtcweb.com:7788' ], 'username': 'muazkh', 'credential': 'muazkh' }, { 'urls': [ 'turn:webrtcweb.com:7788', // coTURN 7788+8877 'turn:webrtcweb.com:8877', 'turn:webrtcweb.com:4455', // restund udp ], 'username': 'muazkh', 'credential': 'muazkh' }, { 'urls': [ 'stun:stun.l.google.com:19302', 'stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302', 'stun:stun.l.google.com:19302?transport=udp', ] } ]; return iceServers; } return { getIceServers: getIceServers }; })(); ================================================ FILE: Chrome-Extensions/tabCapture/README.md ================================================ # Disclaimer No more maintaining this extension; as of 2019. So please use at your own risk. * https://www.webrtc-experiment.com/disclaimer/ ---- ## Chrome tabCapture extension This chrome extension not only captures content of the selected tab, but also provides multi-user peer-to-peer tab-streaming. ## Codes to view the shared tab ``` index.html ``` ## How to capture stream using tabCapture APIs? ```javascript chrome.tabs.getSelected(null, function (tab) { var video_constraints = { mandatory: { chromeMediaSource: 'tab' } }; var constraints = { audio: false, video: true, videoConstraints: video_constraints }; chrome.tabCapture.capture(constraints, function (stream) { // it is a LocalMediaStream object!! }); }); ``` ## How to publish yourself? Make ZIP of the directory. Then navigate to [Chrome WebStore Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard) and click **Add New Item** blue button. To learn more about how to publish a chrome extension in Google App Store: * https://developer.chrome.com/webstore/publish ## For more information For additional information, click [this link](https://github.com/muaz-khan/WebRTC-Experiment/blob/7cd04a81b30cdca2db159eb746e2714307640767/Chrome-Extensions/desktopCapture/README.md). ## License [Chrome-Extensions](https://github.com/muaz-khan/Chrome-Extensions) are released under [MIT license](https://github.com/muaz-khan/Chrome-Extensions/blob/master/LICENSE) . Copyright (c) [Muaz Khan](https://MuazKhan.com). ================================================ FILE: Chrome-Extensions/tabCapture/index.html ================================================x
Select Screen Resolutions:
Set Bandwidth:
kbpskbps
Password Protected Room?
Keep empty for NO password.
Set Your Own Room ID:
It will use your room-id instead of generating random string.
================================================ FILE: Chrome-Extensions/tabCapture/options.js ================================================ chrome.storage.sync.get(null, function(items) { if (items['resolutions']) { document.getElementById('resolutions').value = items['resolutions']; } else { chrome.storage.sync.set({ resolutions: 'fit-screen' }, function() { document.getElementById('resolutions').value = 'fit-screen' }); } if (items['min_bandwidth']) { document.getElementById('min_bandwidth').value = items['min_bandwidth']; } else { chrome.storage.sync.set({ min_bandwidth: 512 }, function() {}); } if (items['max_bandwidth']) { document.getElementById('max_bandwidth').value = items['max_bandwidth']; } else { chrome.storage.sync.set({ max_bandwidth: 1048 }, function() {}); } if (items['room_password']) { document.getElementById('room_password').value = items['room_password']; } if (items['room_id']) { document.getElementById('room_id').value = items['room_id']; } }); document.getElementById('resolutions').onchange = function() { this.disabled = true; chrome.storage.sync.set({ resolutions: this.value }, function() { document.getElementById('resolutions').disabled = false; }); }; document.getElementById('min_bandwidth').onblur = function() { var maxValue = parseInt(document.getElementById('max_bandwidth').value); var minValue = parseInt(document.getElementById('min_bandwidth').value); if(maxValue < minValue) { console.log('Min-Bandwidth must be lower than Max-Bandwidth.'); document.getElementById('max_bandwidth').value = document.getElementById('min_bandwidth').value = this.value; return; } this.disabled = true; chrome.storage.sync.set({ min_bandwidth: this.value }, function() { document.getElementById('min_bandwidth').disabled = false; }); }; document.getElementById('max_bandwidth').onblur = function() { var maxValue = parseInt(document.getElementById('max_bandwidth').value); var minValue = parseInt(document.getElementById('min_bandwidth').value); if(maxValue < minValue) { console.log('Min-Bandwidth must be lower than Max-Bandwidth.'); document.getElementById('max_bandwidth').value = document.getElementById('min_bandwidth').value = this.value; return; } this.disabled = true; chrome.storage.sync.set({ max_bandwidth: this.value }, function() { document.getElementById('max_bandwidth').disabled = false; }); }; document.getElementById('room_password').onblur = function() { this.disabled = true; chrome.storage.sync.set({ room_password: this.value }, function() { document.getElementById('room_password').disabled = false; }); }; document.getElementById('room_id').onblur = function() { this.disabled = true; chrome.storage.sync.set({ room_id: this.value }, function() { document.getElementById('room_id').disabled = false; }); }; ================================================ FILE: Chrome-Extensions/tabCapture/shareStreamUsingRTCMultiConnection.js ================================================ function shareStreamUsingRTCMultiConnection(stream) { // www.RTCMultiConnection.org/docs/ connection = new RTCMultiConnection(); connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/'; connection.autoCloseEntireSession = true; // this must match the viewer page connection.socketMessageEvent = 'desktopCapture'; connection.password = null; if (room_password && room_password.length) { connection.password = room_password; } connection.enableLogs = false; connection.session = { audio: true, video: true, oneway: true }; connection.candidates = { stun: true, turn: true }; connection.iceProtocols = { tcp: true, udp: true }; connection.optionalArgument = { optional: [], mandatory: {} }; connection.channel = connection.sessionid = connection.userid; if (room_id && room_id.length) { connection.channel = connection.sessionid = connection.userid = room_id; } connection.autoReDialOnFailure = true; connection.getExternalIceServers = false; connection.iceServers = IceServersHandler.getIceServers(); function setBandwidth(sdp, value) { sdp = sdp.replace(/b=AS([^\r\n]+\r\n)/g, ''); sdp = sdp.replace(/a=mid:video\r\n/g, 'a=mid:video\r\nb=AS:' + value + '\r\n'); return sdp; } connection.processSdp = function(sdp) { if (bandwidth) { try { bandwidth = parseInt(bandwidth); } catch (e) { bandwidth = null; } if (bandwidth && bandwidth != NaN && bandwidth != 'NaN' && typeof bandwidth == 'number') { sdp = setBandwidth(sdp, bandwidth); sdp = BandwidthHandler.setVideoBitrates(sdp, { min: bandwidth, max: bandwidth }); } } if (!!codecs && codecs !== 'default') { sdp = CodecsHandler.preferCodec(sdp, codecs); } return sdp; }; // www.rtcmulticonnection.org/docs/sdpConstraints/ connection.sdpConstraints.mandatory = { OfferToReceiveAudio: false, OfferToReceiveVideo: false }; connection.onstream = connection.onstreamended = function(event) { try { event.mediaElement.pause(); delete event.mediaElement; } catch (e) {} }; // www.RTCMultiConnection.org/docs/dontCaptureUserMedia/ connection.dontCaptureUserMedia = true; // www.RTCMultiConnection.org/docs/attachStreams/ connection.attachStreams.push(stream); var text = '-'; (function looper() { if (!connection) { setBadgeText(''); return; } if (connection.isInitiator) { setBadgeText('0'); return; } text += ' -'; if (text.length > 6) { text = '-'; } setBadgeText(text); setTimeout(looper, 500); })(); // www.RTCMultiConnection.org/docs/open/ connection.socketCustomEvent = connection.sessionid; function roomOpenCallback(isRoomOpened, roomid, error) { if(error) { alert(error); } chrome.browserAction.enable(); setBadgeText(0); if (room_url_box === true) { var resultingURL = 'https://www.webrtc-experiment.com/screen/?s=' + connection.sessionid; // resultingURL = 'http://localhost:9001/?s=' + connection.sessionid; if (room_password && room_password.length) { resultingURL += '&p=' + room_password; } if (bandwidth) { resultingURL += '&bandwidth=' + bandwidth; } if (!!codecs && codecs !== 'default') { resultingURL += '&codecs=' + codecs; } var popup_width = 600; var popup_height = 170; chrome.windows.create({ url: "data:text/html,
Copy following private URL:
You can share this private-session URI with fellows using email or social networks.
", type: 'popup', width: popup_width, height: popup_height, top: parseInt((screen.height / 2) - (popup_height / 2)), left: parseInt((screen.width / 2) - (popup_width / 2)), focused: true }, function(win) { // popup_id = win.id; }); } connection.socket.on(connection.socketCustomEvent, function(message) { if (message.receivedYourScreen) { setBadgeText(connection.isInitiator ? connection.getAllParticipants().length : ''); } }); } connection.open(connection.sessionid, roomOpenCallback); connection.onleave = connection.onPeerStateChanged = function() { setBadgeText(connection.isInitiator ? connection.getAllParticipants().length : ''); }; } ================================================ FILE: Chrome-Extensions/tabCapture/socket.io.js ================================================ /*! * Socket.IO v2.1.0 * (c) 2014-2018 Guillermo Rauch * Released under the MIT License. */ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.io=e():t.io=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t,e){"object"===("undefined"==typeof t?"undefined":o(t))&&(e=t,t=void 0),e=e||{};var n,r=i(t),s=r.source,p=r.id,h=r.path,f=u[p]&&h in u[p].nsps,l=e.forceNew||e["force new connection"]||!1===e.multiplex||f;return l?(c("ignoring socket cache for %s",s),n=a(s,e)):(u[p]||(c("new io instance for %s",s),u[p]=a(s,e)),n=u[p]),r.query&&!e.query&&(e.query=r.query),n.socket(r.path,e)}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=n(1),s=n(7),a=n(12),c=n(3)("socket.io-client");t.exports=e=r;var u=e.managers={};e.protocol=s.protocol,e.connect=r,e.Manager=n(12),e.Socket=n(37)},function(t,e,n){(function(e){"use strict";function r(t,n){var r=t;n=n||e.location,null==t&&(t=n.protocol+"//"+n.host),"string"==typeof t&&("/"===t.charAt(0)&&(t="/"===t.charAt(1)?n.protocol+t:n.host+t),/^(https?|wss?):\/\//.test(t)||(i("protocol-less url %s",t),t="undefined"!=typeof n?n.protocol+"//"+t:"https://"+t),i("parse %s",t),r=o(t)),r.port||(/^(http|ws)$/.test(r.protocol)?r.port="80":/^(http|ws)s$/.test(r.protocol)&&(r.port="443")),r.path=r.path||"/";var s=r.host.indexOf(":")!==-1,a=s?"["+r.host+"]":r.host;return r.id=r.protocol+"://"+a+":"+r.port,r.href=r.protocol+"://"+a+(n&&n.port===r.port?"":":"+r.port),r}var o=n(2),i=n(3)("socket.io-client:url");t.exports=r}).call(e,function(){return this}())},function(t,e){var n=/^(?:(?![^:@]+:[^:@\/]*@)(http|https|ws|wss):\/\/)?((?:(([^:@]*)(?::([^:@]*))?)?@)?((?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}|[^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/,r=["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"];t.exports=function(t){var e=t,o=t.indexOf("["),i=t.indexOf("]");o!=-1&&i!=-1&&(t=t.substring(0,o)+t.substring(o,i).replace(/:/g,";")+t.substring(i,t.length));for(var s=n.exec(t||""),a={},c=14;c--;)a[r[c]]=s[c]||"";return o!=-1&&i!=-1&&(a.source=e,a.host=a.host.substring(1,a.host.length-1).replace(/;/g,":"),a.authority=a.authority.replace("[","").replace("]","").replace(/;/g,":"),a.ipv6uri=!0),a}},function(t,e,n){(function(r){function o(){return!("undefined"==typeof window||!window.process||"renderer"!==window.process.type)||("undefined"==typeof navigator||!navigator.userAgent||!navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/))&&("undefined"!=typeof document&&document.documentElement&&document.documentElement.style&&document.documentElement.style.WebkitAppearance||"undefined"!=typeof window&&window.console&&(window.console.firebug||window.console.exception&&window.console.table)||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31||"undefined"!=typeof navigator&&navigator.userAgent&&navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/))}function i(t){var n=this.useColors;if(t[0]=(n?"%c":"")+this.namespace+(n?" %c":" ")+t[0]+(n?"%c ":" ")+"+"+e.humanize(this.diff),n){var r="color: "+this.color;t.splice(1,0,r,"color: inherit");var o=0,i=0;t[0].replace(/%[a-zA-Z%]/g,function(t){"%%"!==t&&(o++,"%c"===t&&(i=o))}),t.splice(i,0,r)}}function s(){return"object"==typeof console&&console.log&&Function.prototype.apply.call(console.log,console,arguments)}function a(t){try{null==t?e.storage.removeItem("debug"):e.storage.debug=t}catch(n){}}function c(){var t;try{t=e.storage.debug}catch(n){}return!t&&"undefined"!=typeof r&&"env"in r&&(t=r.env.DEBUG),t}function u(){try{return window.localStorage}catch(t){}}e=t.exports=n(5),e.log=s,e.formatArgs=i,e.save=a,e.load=c,e.useColors=o,e.storage="undefined"!=typeof chrome&&"undefined"!=typeof chrome.storage?chrome.storage.local:u(),e.colors=["#0000CC","#0000FF","#0033CC","#0033FF","#0066CC","#0066FF","#0099CC","#0099FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#3300CC","#3300FF","#3333CC","#3333FF","#3366CC","#3366FF","#3399CC","#3399FF","#33CC00","#33CC33","#33CC66","#33CC99","#33CCCC","#33CCFF","#6600CC","#6600FF","#6633CC","#6633FF","#66CC00","#66CC33","#9900CC","#9900FF","#9933CC","#9933FF","#99CC00","#99CC33","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF","#CC6600","#CC6633","#CC9900","#CC9933","#CCCC00","#CCCC33","#FF0000","#FF0033","#FF0066","#FF0099","#FF00CC","#FF00FF","#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#FF6600","#FF6633","#FF9900","#FF9933","#FFCC00","#FFCC33"],e.formatters.j=function(t){try{return JSON.stringify(t)}catch(e){return"[UnexpectedJSONParseError]: "+e.message}},e.enable(c())}).call(e,n(4))},function(t,e){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(t){if(p===setTimeout)return setTimeout(t,0);if((p===n||!p)&&setTimeout)return p=setTimeout,setTimeout(t,0);try{return p(t,0)}catch(e){try{return p.call(null,t,0)}catch(e){return p.call(this,t,0)}}}function i(t){if(h===clearTimeout)return clearTimeout(t);if((h===r||!h)&&clearTimeout)return h=clearTimeout,clearTimeout(t);try{return h(t)}catch(e){try{return h.call(null,t)}catch(e){return h.call(this,t)}}}function s(){y&&l&&(y=!1,l.length?d=l.concat(d):m=-1,d.length&&a())}function a(){if(!y){var t=o(s);y=!0;for(var e=d.length;e;){for(l=d,d=[];++mInternal error occurred while capturing the screen.
", type: 'popup', width: screen.width / 2, height: 170 }); return; } chrome.browserAction.setTitle({ title: 'Connecting to WebSockets server.' }); chrome.browserAction.disable(); addStreamStopListener(stream, function() { setDefaults(); }); // as it is reported that if you drag chrome screen's status-bar // and scroll up/down the screen-viewer page. // chrome auto-stops the screen without firing any 'onended' event. // chrome also hides screen status bar. chrome.windows.create({ url: chrome.extension.getURL('_generated_background_page.html'), type: 'popup', focused: false, width: 1, height: 1, top: parseInt(screen.height), left: parseInt(screen.width) }, function(win) { var background_page_id = win.id; setTimeout(function() { // chrome.windows.remove(background_page_id); }, 3000); }); shareStreamUsingRTCMultiConnection(stream); chrome.browserAction.setIcon({ path: 'images/pause22.png' }); videoPlayer = document.createElement('video'); videoPlayer.muted = true; videoPlayer.volume = 0; videoPlayer.autoplay = true; videoPlayer.srcObject = stream; videoPlayer.play(); } } // RTCMultiConnection - www.RTCMultiConnection.org var connection; var popup_id; var videoPlayer; function setBadgeText(text) { /* chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] }); */ chrome.browserAction.setBadgeText({ text: text + '' }); chrome.browserAction.setTitle({ title: text + ' users are viewing your screen!' }); } function setDefaults() { chrome.browserAction.setIcon({ path: 'images/tabCapture22.png' }); chrome.browserAction.setTitle({ title: 'Share this tab!' }); chrome.browserAction.setBadgeText({ text: '' }); if (connection) { try { connection.close(); connection.closeSocket(); connection.attachStreams.forEach(function(stream) { stream.getTracks().forEach(function(track) { track.stop(); }); }); connection.attachStreams = []; } catch(e) {} connection = null; } if(videoPlayer) { videoPlayer.srcObject = null; videoPlayer = null; } chrome.runtime.reload(); } function addStreamStopListener(stream, callback) { stream.addEventListener('ended', function() { callback(); callback = function() {}; }, false); stream.addEventListener('inactive', function() { callback(); callback = function() {}; }, false); stream.getTracks().forEach(function(track) { track.addEventListener('ended', function() { callback(); callback = function() {}; }, false); track.addEventListener('inactive', function() { callback(); callback = function() {}; }, false); }); } ================================================ FILE: ConcatenateBlobs/ConcatenateBlobs.js ================================================ // Last time updated at May 23, 2015, 08:32:23 // Latest file can be found here: https://cdn.webrtc-experiment.com/ConcatenateBlobs.js // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // Source Code - https://github.com/muaz-khan/ConcatenateBlobs // Demo - https://www.WebRTC-Experiment.com/ConcatenateBlobs/ // ___________________ // ConcatenateBlobs.js // Simply pass array of blobs. // This javascript library will concatenate all blobs in single "Blob" object. (function() { function ConcatenateBlobs (blobs, type, callback) { var buffers = []; var index = 0; function readAsArrayBuffer() { if (!blobs[index]) { return concatenateBuffers(); } var reader = new FileReader(); reader.onload = function(event) { buffers.push(event.target.result); index++; readAsArrayBuffer(); }; reader.readAsArrayBuffer(blobs[index]); } readAsArrayBuffer(); function concatenateBuffers() { var byteLength = 0; buffers.forEach(function(buffer) { byteLength += buffer.byteLength; }); var tmp = new Uint16Array(byteLength); var lastOffset = 0; buffers.forEach(function(buffer) { // BYTES_PER_ELEMENT == 2 for Uint16Array var reusableByteLength = buffer.byteLength; if (reusableByteLength % 2 != 0) { buffer = buffer.slice(0, reusableByteLength - 1) } tmp.set(new Uint16Array(buffer), lastOffset); lastOffset += reusableByteLength; }); var blob = new Blob([tmp.buffer], { type: type }); callback(blob); } } if(typeof modules !== 'undefined') { modules.export = ConcatenateBlobs; } if(typeof window !== 'undefined') { window.ConcatenateBlobs = ConcatenateBlobs; } })(); ================================================ FILE: ConcatenateBlobs/README.md ================================================ ## [ConcatenateBlobs.js](https://github.com/muaz-khan/ConcatenateBlobs) [](https://npmjs.org/package/concatenateblobs) [](https://npmjs.org/package/concatenateblobs) Demo: https://www.WebRTC-Experiment.com/ConcatenateBlobs/ > Simply pass array of blobs. > This javascript library will concatenate all blobs in single "Blob" object. It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost. ``` npm install concatenateblobs # to use in nodejs var ConcatenateBlobs = require('concatenateblobs'); ConcatenateBlobs(array_of_blobs, blob_type, function(resultingBlob) { console.log(resultingBlob); }); ``` To use it: ```htm ``` ## 1. Link The Library ``` https://cdn.webrtc-experiment.com/ConcatenateBlobs.js // or https://www.webrtc-experiment.com/ConcatenateBlobs.js ``` ## 2. Use it ```javascript // 2nd argument is type of "resulting-blob" ConcatenateBlobs([arrayOfBlobs], 'audio/wav', function(resultingBlob) { POST_to_Server(resultingBlob); // or preview locally localVideo.src = URL.createObjectURL(resultingBlob); }); ``` ## Credits * [Muaz Khan](http://www.MuazKhan.com/) ## License [ConcatenateBlobs.js](https://github.com/muaz-khan/ConcatenateBlobs) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/). ================================================ FILE: ConcatenateBlobs/index.html ================================================ ConcatenateBlobs | JavaScript - Source Code
You can record multiple blobs; then click "concatenateBlobs" button to concatenate all recorded blobs in single Blob. The resulting "single" Blob can be either played-back locally or pushed to server.
0 blobs recorded. To concatenate all, click right-side button.
How to use?
// https://www.webrtc-experiment.com/ConcatenateBlobs.js // or: npm install concatenateblobs // 2nd argument is type of "resulting-blob" ConcatenateBlobs([arrayOfBlobs], 'audio/wav', function(resultingBlob) { POST_to_Server(resultingBlob); // or preview locally localVideo.src = URL.createObjectURL(resultingBlob); });================================================ FILE: ConcatenateBlobs/package.json ================================================ { "name": "concatenateblobs", "preferGlobal": true, "version": "1.0.3", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", "url": "http://www.muazkhan.com/" }, "description": "Simply pass array of blobs. This javascript library will concatenate all blobs in single Blob object.", "scripts": { "start": "node ConcatenateBlobs.js" }, "main": "./ConcatenateBlobs.js", "repository": { "type": "git", "url": "https://github.com/muaz-khan/ConcatenateBlobs.git" }, "keywords": [ "concatenateblobs", "library", "javascript", "chrome", "firefox", "opera", "ie", "internet-explorer", "android", "concatenate-blobs", "concatenateblobs.js", "mergeblobs", "merge-blobs", "javascript-library", "muaz", "muaz-khan" ], "analyze": false, "license": "MIT", "readmeFilename": "README.md", "bugs": { "url": "https://github.com/muaz-khan/ConcatenateBlobs/issues", "email": "muazkh@gmail.com" }, "homepage": "https://www.webrtc-experiment.com/ConcatenateBlobs/", "_id": "concatenateblobs@", "_from": "concatenateblobs@" } ================================================ FILE: Conversation.js/AndroidRTC/index.html ================================================
AndroidRTC: Runs top over Conversation.js!
Click to enable:
') }); }); // "signaler" object is defined in "common-signaling.js" // this method connects users to signaling-channel // so that user can call/search/invite any other user // also, other users can search him. signaler.connect(user); if (getFromLocalStorage('username')) { user.username = localStorage.getItem('username'); } else putIntoLocalStorage('username', user.username); user.on('conversation-opened', function(conversation) { conversation.emit('message', 'Hey ' + conversation.targetuser + ', conversation has been opened between you and ' + user.username + '.'); conversation.on('message', function(event) { appendConversation({ username: event.username, message: event.data }); messageSound.play(); }); conversation.on('stream', function(stream) { user.emit('--log', 'stream: ' + stream.streamid); conversation.peer.body.insertBefore(stream.mediaElement, conversation.peer.body.firstChild); btnSettings.style.display = 'none'; mediaPanel.style.display = 'block'; }); conversation.on('add-file', function(file) { appendConversation({ username: 'File', message: file.sender + ' added a file: "' + file.name + '". ', callback: function(parent) { parent.id = file.uuid; parent.querySelector('#download').onclick = function() { file.download(); disableBoth(); }; parent.querySelector('#cancel').onclick = function() { file.cancel(); disableBoth(); }; function disableBoth() { parent.querySelector('#download').disabled = true; parent.querySelector('#cancel').disabled = true; } } }); }); conversation.on('file-downloaded', function(file) { var parent = document.getElementById(file.uuid); if (!parent) return; parent.querySelector('.message').innerHTML = file.sender + ' shared a file which is downloaded in the application: "' + file.name + '". '; parent.querySelector('#save-to-disk').onclick = function() { file.savetodisk(); this.disabled = true; }; }); conversation.on('file-cancelled', function(file) { appendConversation({ username: 'Cancelled', message: conversation.targetuser + ' cancelled your file: "' + file.name + '".' }); }); conversation.on('file-sent', function(file) { appendConversation({ username: 'Sent', message: conversation.targetuser + ' received your file: "' + file.name + '".' }); }); conversation.on('file-progress', function(progress) { var parent = document.getElementById(progress.uuid); if (!parent || !parent.querySelector('#download')) return; parent.querySelector('#download').innerHTML = 'File progress percentage: ' + progress.percentage; }); }); // button used to search & invite a user btnSearchUser.onclick = function() { if (isWhiteSpace(inputSearchFriends.value)) return; user.emit('search', inputSearchFriends.value); inputSearchFriends.value = ''; }; inputSearchFriends.onkeyup = function(e) { if (e.keyCode == 13) btnSearchUser.onclick(); }; // this event is fired if a user is detected by search-agent. user.on('search', function(result) { appendConversation({ username: 'System', message: result.username + ' is online. Inviting him for chat.' }); // currently the only method to open conversation // between two users user.openconversationwith(result.username); }); btnSendChatMessage.onclick = function() { if (isWhiteSpace(chatInputBox.value)) return; user.peers.emit('message', chatInputBox.value); appendConversation({ username: user.username, message: chatInputBox.value }); chatInputBox.value = ''; }; chatInputBox.onkeyup = function(e) { if (e.keyCode != 13) return; btnSendChatMessage.onclick(); }; var mediaPanel = document.querySelector('.media-panel'); btnSettings.onclick = function() { btnSettings.style.display = 'none'; mediaPanel.style.display = 'block'; }; document.querySelector('#hide-section').onclick = function() { btnSettings.style.display = 'inline'; mediaPanel.style.display = 'none'; }; var btnEnableMicrophone = document.querySelector('.microphone'); btnEnableMicrophone.onclick = function() { btnEnableMicrophone.style.display = 'none'; user.peers.emit('enable', 'microphone'); }; var btnEnableCamera = document.querySelector('.camera'); btnEnableCamera.onclick = function() { btnEnableCamera.style.display = 'none'; user.peers.emit('enable', 'camera'); }; var btnShareFiles = document.querySelector('.share-files'); btnShareFiles.onclick = function() { var fileSelector = new FileSelector(); fileSelector.selectSingleFile(function(file) { user.peers.emit('add-file', file); }); }; function isWhiteSpace(str) { return str.replace(/^\s+|\s+$/g, '').length <= 0; } function appendConversation(args) { var conversation = document.createElement('div'); conversation.className = 'conversation'; var activistName = document.createElement('div'); activistName.className = 'activist-name'; conversation.appendChild(activistName); var symbol = document.createElement('div'); symbol.className = 'symbol'; symbol.innerHTML = args.username.split('')[0].toUpperCase(); activistName.appendChild(symbol); var fullName = document.createElement('div'); fullName.className = 'full-name'; fullName.innerHTML = args.username; activistName.appendChild(fullName); var message = document.createElement('div'); message.className = 'message'; message.innerHTML = args.message; conversation.appendChild(message); var messageDate = document.createElement('div'); messageDate.className = 'message-date'; messageDate.innerHTML = getCurrentTime(); message.appendChild(messageDate); conversationPanel.insertBefore(conversation, conversationPanel.firstChild); if (args.callback) args.callback(conversation); } function getCurrentTime() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); if (hours.toString().length == 1) hours = '0' + hours; if (minutes.toString().length == 1) minutes = '0' + minutes; if (seconds.toString().length == 1) seconds = '0' + seconds; return hours + ':' + minutes + ':' + seconds; } }, false); ================================================ FILE: Conversation.js/AndroidRTC/styles/ui-styles.css ================================================ @font-face { font-family: 'Myriad'; src: url('../fonts/MyriadPro-Light.otf') format("opentype"); font-weight:400; } * { margin:0; padding: 0; color: black; font-family:Myriad, Arial, Verdana; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -moz-user-drag: none; -o-user-drag: none; -ms-user-drag: none; user-drag: none; } textarea, input, .message { -webkit-user-select: initial; -moz-user-select: initial; -o-user-select: initial; -ms-user-select: initial; user-select: initial; } body { background: white; } header { background: rgb(245, 243, 243); border-bottom: 1px solid rgb(77, 72, 72); } .logo { width: 100px; height: 100px; vertical-align: middle; } .search-box { border: 1px solid rgb(158, 157, 157); display: inline-block; vertical-align: middle; width: 50%; overflow: hidden; background: white; } .search-box input { border:0; padding: 4px 4px; outline: none; font-size: 30px; background: transparent; color: black; width: 100%; } .icon { background-repeat:no-repeat; background-position: center center; width: 48px; height: 48px; vertical-align: middle; background-color: rgb(233, 231, 231); border: 1px solid rgb(151, 147, 147); } .icon:hover { background-color: rgb(233, 231, 201); } .icon:active { background-color: rgb(233, 231, 191); } .search-user { background-image: url('../images/search-user.png'); position: absolute; margin-top: 26px; margin-left: -47px; } .setttings { background-image: url('../images/settings.png'); } .microphone { background-image: url('../images/microphone.png'); } .camera { background-image: url('../images/camera.png'); } .share-files { background-image: url('../images/share-files.png'); } .conversation-panel { border: 1px solid rgb(158, 157, 157); margin: 10px; } .conversation { border-top: 1px solid rgb(158, 157, 157); margin-top: -1px; } .activist-name { display: inline-block; border-right: 1px solid rgb(158, 157, 157); vertical-align: middle; text-align: center; padding: 8px 4px; width: 70px; overflow: hidden; border-top: 1px solid rgb(158, 157, 157); margin-top: -1px; } .activist-name .symbol { font-size: 30px; font-weight: bolder; text-decoration: underline; } .activist-name .full-name { } .conversation .message { display: inline-block; padding: 8px 4px; vertical-align: top; max-width: 90%; border-left: 1px solid rgb(158, 157, 157); margin-left: -1px; padding-left: 10px; } .conversation .message button { font-size: 13px; padding: 0 7px; height: 16px; cursor: pointer; background: rgb(253, 253, 255); border: 1px solid rgb(226, 43, 43); border-radius: 2px; margin: 0 5px; } .conversation .message button[disabled] { cursor: default; background: transparent; border: 1px solid rgb(219, 208, 208); border-radius: 0; color: rgb(219, 208, 208); } .conversation .message input { color: black; border: 1px solid rgb(139, 131, 131); background: white; padding: 0 5px; } .conversation .message-date { font-size: 12px; color: gray; margin-top: 5px; } footer { position: fixed; bottom: 0; width: 100%; border: 1px solid rgb(158, 157, 157); background: white; border: 1px solid rgb(77, 72, 72); } .chat-input { border-right: 1px solid rgb(158, 157, 157); display: inline-block; vertical-align: middle; width: 85%; overflow: hidden; } .chat-input textarea { border:0; padding: 4px 4px; outline: none; font-size: 20px; background: transparent; resize: none; width: 99%; } footer button { background-image: url('../images/send-message.png'); } .slogan { position: absolute; margin-top: 8px; font-size: 14px; font-style: italic; height: 16px; overflow: hidden; width: 250px; } .media-panel { margin-left: 10%; display: none; margin-bottom: 1em; } .media-panel #hide-section { width: auto; padding: 0 7px; background: rgb(243, 80, 80); border: 1px solid rgb(162, 12, 12); height: 23px; color: white; cursor: pointer; border-radius: 3px } .media-panel video { width: 22%; } @media all and (max-width: 650px) { .conversation .message { max-width: 80%; } .chat-input { width: 90%; } .search-box { width: 45%; } } @media all and (max-width: 500px) { .conversation .message { max-width: 70%; } .chat-input { width: 80%; } .search-box { width: 35%; } } @media all and (max-width: 330px) { .conversation .message { max-width: 60%; } .chat-input { width: 70%; } .search-box { width: 30%; } } @media all and (max-width: 270px) { .conversation .message { max-width: 50%; } .chat-input { width: 50%; } .search-box { width: 25%; } } @media all and (max-width: 240px) { .conversation .message { max-width: 40%; } .chat-input { width: 40%; } .search-box { width: 20%; } } @media all and (max-width: 200px) { .conversation .message { max-width: 30%; } .chat-input { width: 30%; } .search-box { width: 15%; } } ================================================ FILE: Conversation.js/README.md ================================================ ## [Conversation.js](https://github.com/muaz-khan/Conversation.js) runs top over [RTCMultiConnection.js](http://www.RTCMultiConnection.org/) [](https://npmjs.org/package/conversationjs) [](https://npmjs.org/package/conversationjs) Conversation.js is inspired by skype; and it provides simple events-like API to manage conversations, enable/disable media devices; add/download files; and do anything supported by Skype. It allows you open data conversation between two or more users using their user-ids. It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost. ``` npm install conversationjs ``` To use it: ```htm ``` ## [Demos](https://www.webrtc-experiment.com/Conversationjs/) using [Conversation.js](https://github.com/muaz-khan/Conversation.js) ## Gif Presentation * https://cdn.webrtc-experiment.com/images/AndroidRTC.gif ## Link the library ```html ``` = ## Open simple conversation between two users ```javascript var websocket = new WebSocket('ws://domain:port/'); // initializing constructor var signaler = new Signaler(); // whatever sent from conversation.js signaler.on('message', function(message) { // here, you received message from conversation.js // send message over WebSocket connection websocket.send(JSON.stringify(message)); }); // your websocket listener that subscribes // for all messages broadcasted from WebSockets connection websocket.onmessage = function(event) { var message = JSON.parse(event.data); // here, you received a message from websocket server // pass message to conversation.js signaler.emit('message', message); }); var user = new User(); // connect user to signaler signaler.connect(user); // invoke this method to open conversation with any user user.openconversationwith('target-username'); // this event is fired when conversation is opened user.on('conversation-opened', function (conversation) { // conversation.targetuser // emit a message to target user // conversation.emit('message', 'hello there'); conversation.on('message', function (event) { console.log(event.username, event.data); }); // enable your microphone and tell target user about it; he can // also enable his microphone or he can simply listen your voice! // conversation.emit('enable', 'microphone'); conversation.on('media-enabled', function (media) { // media.type == 'audio' || 'video' || 'screen' // media.hasmicrophone == true || null // media.hascamera == true || null // media.hasscreen == true || null // media.sender == 'string' media.emit('join-with', 'microphone'); }); }); ``` ## How to use socket.io? ```javascript var socket = io.connect(); // initializing constructor var signaler = new Signaler(); // whatever sent from conversation.js signaler.on('message', function(message) { // here, you received message from conversation.js // pass/emit message to node.js socket.emit('message', message); }); // your socket.io listener that subscribes // for all messages broadcasted from Node.js socket.on('message', function(message) { // here, you received a message from node.js server // pass message to conversation.js signaler.emit('message', message); }); // connect user to signaler signaler.connect(user); ``` ## How to use WebSockets? ```javascript var websocket = new WebSocket('ws://domain:port/'); // initializing constructor var signaler = new Signaler(); // whatever sent from conversation.js signaler.on('message', function(message) { // here, you received message from conversation.js // send message over WebSocket connection websocket.send(JSON.stringify(message)); }); // your websocket listener that subscribes // for all messages broadcasted from WebSockets connection websocket.onmessage = function(event) { var message = JSON.parse(event.data); // here, you received a message from websocket server // pass message to conversation.js signaler.emit('message', message); }); // connect user to signaler signaler.connect(user); ``` ## How to set defaults? "defaults" are default properties, objects and methods that are applied to RTCMultiConnection object. See list of all such properties here: http://www.rtcmulticonnection.org/docs/ ```javascript user.defaults = { log: true, // for production use only. trickleIce: true, // for SIP/XMPP and XHR getExternalIceServers: false, // ice-servers from xirsys.com leaveOnPageUnload: true, iceServers: [{ url: 'stun:stun.l.google.com:19302' }], iceProtocols: { tcp: true, udp: true }, candidates: { host: true, // local/host candidates reflexive: true, // STUN candidates relay: true // TURN candidates }, autoReDialOnFailure: false, // renegotiation will not work if it is true body: document.body || document.documentElement }; ``` ## How to accept/reject friend requests? ```javascript user.on('friend-request', function (request) { if (window.confirm('Do you want to accept friend-request made by ' + request.sender + '?')) { request.accept(); } else { request.reject(); } }); ``` ## How to check friend-request status? ```javascript user.on('request-status', function (request) { if (request.status == 'accepted') { alert(request.sender + ' accepted your request.'); } if (request.status == 'rejected') { alert(request.sender + ' rejected your request.'); } }); ``` ## How to emit events to multiple users? ```javascript document.querySelector('#chat-message').onchange = function (event) { user.peers.emit('message', this.value); }; document.querySelector('#enable-microphone').onclick = function () { user.peers.emit('enable', 'microphone'); }; document.querySelector('#enable-camera').onclick = function () { user.peers.emit('enable', 'camera'); }; document.querySelector('#enable-screen').onclick = function () { user.peers.emit('enable', 'screen'); }; ``` ## How to share files? ```javascript document.querySelector('input[type=file]').onchange = function () { user.peers.emit('add-file', this.files); }; ``` ## How to check if target user added file? ```javascript conversation.on('add-file', function (file) { file.download(); // or file.cancel(); }); ``` ## How to check file-download progress? ```javascript conversation.on('file-progress', function (progress) { console.log('percentage %', progress.percentage); // progress.file.name // progress.sender }); ``` ## How to save downloaded file to disk? ```javascript conversation.on('file-downloaded', function (file) { // file.sender file.savetodisk(); }); ``` ## How to check if file is successfully sent? ```javascript conversation.on('file-sent', function (file) { // file.sender console.log(file.name, 'sent.'); }); ``` ## How to check if target user refused to receive your file? ```javascript conversation.on('file-cancelled', function (file) { // file.sender console.log(file.name, 'cancelled.'); }); ``` ## Credits [Muaz Khan](https://github.com/muaz-khan): 1. Personal Webpage: http://www.muazkhan.com 2. Email: muazkh@gmail.com 3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb 4. Google+: https://plus.google.com/+WebRTC-Experiment 5. Facebook: https://www.facebook.com/WebRTC ## License [Conversation.js](https://github.com/muaz-khan/Conversation.js) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan). ================================================ FILE: Conversation.js/conversation.js ================================================ // Last time updated at Sep 15, 2014, 08:32:23 // Latest file can be found here: https://cdn.webrtc-experiment.com/conversation.js // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // _______________ // Conversation.js /* -. Signaler object added. See below for how to use it. var signaler = new Signaler(); signaler.on('message', function(message) { socket.send(message); }); socket.on('message', function(message) { signaler.emit('message', message); }); var user = new User(); signaler.connect(user); */ (function() { window.Signaler = function() { var signaler = this; var users = []; signaler.connect = function(user) { user.signaler = signaler; user.emit('--signaler-connected'); users.push(user); }; signaler.send = function(data) { signaler.emit('--message', data); }; signaler.events = {}; signaler.on = function(event, callback) { signaler.events[event] = callback; }; signaler.emit = function() { if (!arguments[0]) throw 'At least one argument is mandatory.'; var internalevent = arguments[0].indexOf('--') == 0; if (!internalevent) { if (arguments[0] == 'message') { var message = arguments[1]; users.forEach(function(user) { user.onsignalingmessage(message); }); } return; } if (internalevent) { arguments[0] = arguments[0].replace('--', ''); } if (!signaler.events[arguments[0]]) { var warning = 'Event name "' + arguments[0] + '" doesn\'t exists.'; if (arguments[1]) warning += ' Values: ' + JSON.stringify(arguments[1], null, '\t'); console.warn(warning); } else signaler.events[arguments[0]](arguments[1], arguments[2], arguments[3], arguments[4]); }; }; window.User = function(_defaults) { var user = this; user.randomstring = function() { // suggested by @rvulpescu from #154 if (window.crypto && crypto.getRandomValues && navigator.userAgent.indexOf('Safari') == -1) { var a = window.crypto.getRandomValues(new Uint32Array(3)), token = ''; for (var i = 0, l = a.length; i < l; i++) { token += a[i].toString(36); } return token; } else { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } }; user.defaults = {}; user.username = user.randomstring(); user.status = 'online'; user.openconversationwith = function(targetuser) { var conversation = new Conversation(user, targetuser); // check who is online user.emit('signal', { whoisonline: true, responsefor: targetuser }); }; user.onmessagecallbacks = {}; user.onsignalingmessage = function(message) { if (message.isrtcmulticonnectioninnermessage && user.onmessagecallbacks[message.channel]) { return user.onmessagecallbacks[message.channel](message.message); } if (message.searchuser) { if (user.status === 'online') { user.emit('signal', { useronline: true, responsefor: message.sender }); } return; } if (message.useronline && message.responsefor == user.username) { user.emit('--search', { username: message.sender }); return; } if (message.whoisonline && message.responsefor == user.username && user.status == 'online') { user.emit('--friend-request', { accept: function() { if (!user.peers[message.sender]) { var randomchannel = user.randomstring(); user.emit('signal', { iamonline: true, responsefor: message.sender, randomchannel: randomchannel }); var conversation = new Conversation(user, message.sender); conversation.addnewrtcmulticonnectionpeer({ targetuser: message.sender, channel: randomchannel }); } user.emit('signal', { requestaccepted: true, sender: user.username, responsefor: message.sender }); }, reject: function() { user.emit('signal', { requestrejected: true, sender: user.username, responsefor: message.sender }); }, sender: message.sender }); } if (message.requestaccepted && message.responsefor == user.username) { user.emit('--request-status', { status: 'accepted', sender: message.sender }); } if (message.requestrejected && message.responsefor == user.username) { user.emit('--request-status', { status: 'accepted', sender: message.sender }); } if (message.iamonline && message.responsefor == user.username) { if (!user.peers[message.sender]) { user.conversations[message.sender].addnewrtcmulticonnectionpeer({ targetuser: message.sender, channel: message.randomchannel, isInitiator: true }); } } if (message.sessionDescription && message.responsefor == user.username) { user.peers[message.sender].join(message.sessionDescription); } } // reference to all RTCMultiConnection peers user.peers = { emit: function(eventName, value) { for (var conversation in user.conversations) { user.conversations[conversation].emit(eventName, value); } }, length: 0 }; // reference to all Conversation objects user.conversations = {}; // reference to all local media streams user.localstreams = {}; user.events = {}; user.on = function(event, callback) { user.events[event] = callback; }; user.emit = function() { if (!arguments[0]) throw 'At least one argument is mandatory.'; var internalevent = arguments[0].indexOf('--') == 0; if (!internalevent) { if (arguments[0] == 'search') { user.emit('signal', { searchuser: arguments[1] }); } if (arguments[0] == 'signal') { var data = arguments[1]; data.sender = user.username; user.signaler.emit('--message', data); } return; } if (internalevent) { arguments[0] = arguments[0].replace('--', ''); if (arguments[0] == 'log' && user.defaults.log == false) return; } if (!user.events[arguments[0]]) { var warning = 'Event name "' + arguments[0] + '" doesn\'t exists.'; if (arguments[1]) warning += ' Values: ' + JSON.stringify(arguments[1], null, '\t'); console.warn(warning); } else user.events[arguments[0]](arguments[1], arguments[2], arguments[3], arguments[4]); }; // defaults user.on('request-status', function(request) { user.emit('--log', request.sender + ' ' + request.status + ' your request.'); }); user.on('friend-request', function(request) { request.accept(); }); user.on('signaler-connected', function() { user.emit('--log', 'Signaling medium is ready for pub/sub.'); }); user.on('log', function(message) { console.log(message); }); for (var data in _defaults || {}) { user.defaults[data] = _defaults[data]; } if (_defaults) { user.emit('signaler', 'start'); } }; function Conversation(user, targetuser) { var conversation = this; function sendmessage(data) { conversation.peer.send(data); } function enablemicrophone() { if (user.localstreams.microphone) return; conversation.peer.captureUserMedia(function(stream) { user.localstreams.microphone = stream; conversation.peer.peers[targetuser].peer.connection.addStream(stream); conversation.peer.send({ signalingmessage: true, hasmicrophone: true, streamavailable: true, sender: user.username, type: 'audio' }); }, { audio: true }); } function enablecamera() { if (user.localstreams.camera) return; conversation.peer.captureUserMedia(function(stream) { user.localstreams.camera = stream; conversation.peer.peers[targetuser].peer.connection.addStream(stream); conversation.peer.send({ signalingmessage: true, hascamera: true, streamavailable: true, sender: user.username, type: 'video' }); }, { audio: true, video: true }); } function enablescreen() { if (user.localstreams.screen) return; conversation.peer.captureUserMedia(function(stream) { user.localstreams.screen = stream; conversation.peer.peers[targetuser].peer.connection.addStream(stream); conversation.peer.send({ signalingmessage: true, hasscreen: true, streamavailable: true, sender: user.username, type: 'screen' }); }, { screen: true }); }; conversation.attachie = { files: {}, messages: {} }; conversation.addnewrtcmulticonnectionpeer = function(args) { var connection = new RTCMultiConnection(args.channel); for (var d in user.defaults) { if (typeof connection[d] !== 'undefined' /* && typeof connection[d] !== 'function' */ ) { connection[d] = user.defaults[d]; } } // workaround for RTCMultiConnection-v1.8 or older if (user.defaults.log == false) { connection.skipLogs(); } connection.userid = user.username; // v1.9 and onwards supports "onlog" event. connection.onlog = function(message) { user.emit('--log', JSON.stringify(message, null, '\t')); }; connection.session = { data: true }; connection.onopen = function() { conversation.targetuser = args.targetuser; user.emit('--conversation-opened', conversation); }; connection.onmessage = function(event) { if (event.data.signalingmessage) { var data = event.data; if (data.streamavailable) { data.emit = function(first, second) { if (first == 'join-with' && second == 'nothing') { preview(); } if (first == 'join-with' && second == 'microphone') { joinwithmicrophone(); } if (first == 'join-with' && second == 'camera') { joinwithcamera(); } if (first == 'join-with' && second == 'screen') { joinwithscreen(); } }; function preview() { connection.send({ signalingmessage: true, shareoneway: true, hasmicrophone: !!data.hasmicrophone, hascamera: !!data.hascamera, hasscreen: !!data.hasscreen }); } function joinwithmicrophone() { conversation.peer.peers[targetuser].addStream({ audio: true, oneway: true }); } function joinwithcamera() { conversation.peer.peers[targetuser].addStream({ audio: true, video: true, oneway: true }); } function joinwithscreen() { conversation.peer.peers[targetuser].addStream({ screen: true, oneway: true }); } conversation.emit('--media-enabled', event.data); } if (data.shareoneway) { if (data.hasmicrophone) { if (!user.localstreams.microphone) throw 'You have not allowed microphone.'; connection.renegotiate(); } if (data.hascamera) { if (!user.localstreams.camera) throw 'You have not allowed camera.'; connection.renegotiate(); } if (data.hasscreen) { if (!user.localstreams.screen) throw 'You have not allowed screen.'; connection.renegotiate(); } } if (data.addedfile) { var filesinfo = data.filesinfo; if (filesinfo.size && filesinfo.type) { filesinfo = eventHanlders(filesinfo); conversation.emit('--add-file', filesinfo); } else { for (var file in filesinfo) { filesinfo[file] = eventHanlders(filesinfo[file]); conversation.emit('--add-file', filesinfo[file]); } } function eventHanlders(file) { file.sender = targetuser; file.download = function() { conversation.peer.send({ signalingmessage: true, download: true, sender: user.username, file: { size: file.size, type: file.type, name: file.name, lastModifiedDate: file.lastModifiedDate, uuid: file.uuid } }); }; file.cancel = function() { conversation.peer.send({ signalingmessage: true, download: false, sender: user.username, file: { size: file.size, type: file.type, name: file.name, lastModifiedDate: file.lastModifiedDate, uuid: file.uuid } }); }; return file; } } if (data.file) { if (data.download) { var file = conversation.attachie.files[data.file.name]; if ((file.item && file.length && file[0] && file[0].lastModifiedDate) || file.forEach) { Array.prototype.slice.call(file).forEach(function(f) { conversation.peer.send(f); }); } else conversation.peer.send(file); } else { var file = conversation.attachie.files[data.file.name]; conversation.emit('--file-cancelled', file); } } } else { event.username = conversation.targetuser; conversation.emit('--message', event); } }; // overriding "openSignalingChannel" method connection.openSignalingChannel = function(config) { var channel = config.channel || this.channel; user.onmessagecallbacks[channel] = config.onmessage; if (config.onopen) setTimeout(config.onopen, 1000); // directly returning socket object using "return" statement return { send: function(message) { user.emit('signal', { message: message, isrtcmulticonnectioninnermessage: true, channel: channel }); }, channel: channel }; }; // todo: renegotiation doesn't work if trickleIce=false // need to fix it. // connection.trickleIce = false; connection.sdpConstraints.mandatory = { OfferToReceiveAudio: true, OfferToReceiveVideo: true }; connection.autoSaveToDisk = false; connection.onFileEnd = function(file) { if (conversation.attachie.files[file.name]) { conversation.emit('--file-sent', file); return; } file.savetodisk = function(filename) { connection.saveToDisk(file, filename || file.name || file.type); }; file.sender = file.userid; conversation.emit('--file-downloaded', file); }; connection.onFileProgress = function(chunk) { var progress = { percentage: Math.round((chunk.currentPosition / chunk.maxChunks) * 100), uuid: chunk.uuid, file: chunk, sender: chunk.userid }; if (progress.percentage > 100) progress.percentage = 100; conversation.emit('--file-progress', progress); }; connection.onFileStart = function() {}; connection.onstreamid = function(event) { conversation.emit('--stream-clue', event); }; connection.onstream = function(event) { conversation.emit('--stream', event); }; connection.onstreamended = function(event) { conversation.emit('--stream-ended', event); }; if (args.isInitiator) { connection.open({ dontTransmit: true }); } user.peers[args.targetuser] = connection; user.peers.length++; connection.onleave = function() { user.peers.length--; }; user.emit('signal', { joinRoom: true, responsefor: args.targetuser, sessionDescription: connection.sessionDescription }); conversation.peer = connection; } function addfile(file) { var filesinfo = {}; // seems array of files if ((file.item && file.length && file[0] && file[0].lastModifiedDate) || file.forEach) { Array.prototype.slice.call(file).forEach(function(f) { if (!f.uuid) f.uuid = user.randomstring(); filesinfo[file.name] = { size: f.size, type: f.type, name: f.name, lastModifiedDate: f.lastModifiedDate, uuid: f.uuid }; conversation.attachie.files[f.name] = f; }); } else { if (!file.uuid) file.uuid = user.randomstring(); filesinfo[file.name] = { size: file.size, type: file.type, name: file.name, lastModifiedDate: file.lastModifiedDate, uuid: file.uuid }; conversation.attachie.files[file.name] = file; } conversation.peer.send({ addedfile: true, filesinfo: filesinfo, signalingmessage: true, sender: user.username }); } // custom events conversation.events = {}; conversation.on = function(event, callback) { conversation.events[event] = callback; }; conversation.emit = function() { if (!arguments[0]) throw 'At least one argument is mandatory.'; var internalevent = arguments[0].indexOf('--') == 0; if (!internalevent) { if (arguments[0] == 'message') { sendmessage(arguments[1]); } if (arguments[0] == 'add-file' && arguments[1]) { addfile(arguments[1]); } if (arguments[0] == 'enable') { if (arguments[1] == 'microphone') { enablemicrophone(); } if (arguments[1] == 'camera') { enablecamera(); } if (arguments[1] == 'screen') { enablescreen(); } } if (arguments[0] == 'end') { conversation.peer.close(); user.emit('--ended'); } return; } if (internalevent) { arguments[0] = arguments[0].replace('--', ''); } if (!conversation.events[arguments[0]]) { var warning = 'Event name "' + arguments[0] + '" doesn\'t exists.'; if (arguments[1]) warning += ' Values: ' + JSON.stringify(arguments[1], null, '\t'); console.warn(warning); } else conversation.events[arguments[0]](arguments[1], arguments[2], arguments[3], arguments[4]); }; conversation.on('add-file', function(file) { file.download(); }); conversation.on('file-downloaded', function(file) { file.savetodisk(); }); conversation.on('media-enabled', function(media) { if (media.hasmicrophone) { media.emit('join-with', 'microphone'); } if (media.hascamera) { media.emit('join-with', 'camera'); } if (media.hasscreen) { media.emit('join-with', 'nothing'); } }); conversation.on('stream-clue', function(stream) { user.emit('--log', 'stream-clue: ' + stream.streamid); }); conversation.on('stream', function(stream) { user.emit('--log', 'stream: ' + stream.streamid); conversation.peer.body.insertBefore(stream.mediaElement, conversation.peer.body.firstChild); }); conversation.on('stream-ended', function(stream) { user.emit('--log', 'stream-ended: ' + stream.streamid); if (stream.mediaElement && stream.mediaElement.parentNode) { stream.mediaElement.parentNode.removeChild(stream.mediaElement); } }); user.conversations[targetuser] = conversation; } })(); ================================================ FILE: Conversation.js/demos/common-signaling.js ================================================ var SIGNALING_SERVER = 'wss://webrtcweb.com:9449/'; var channel = window.RMCDefaultChannel; var websocket = new WebSocket(SIGNALING_SERVER); websocket.push = websocket.send; websocket.send = function(data) { websocket.push(JSON.stringify({ channel: channel, data: data })); }; var signaler = new Signaler(); signaler.on('message', function(data) { websocket.send(data); }); websocket.onmessage = function(event) { var data = JSON.parse(event.data); signaler.emit('message', data); }; websocket.onopen = function(){ console.info('WebSocket connection is opened'); websocket.send({ channel: channel }); }; ================================================ FILE: Conversation.js/demos/common-styles.css ================================================ * { -webkit-user-select: none; -o-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; font-family: Calibri; font-family: 'Segoe UI Light', 'Segoe UI'; font-size: 1.1em; font-weight: normal; } html { background: #eee; } body { font-size: 1.2em; line-height: 1.2em; margin: 0; } input[type=text], input[type=search] { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #CCCCCC; border-radius: 0 0 5px 5px; border-top: 0; font: 300 18px/40px'light', inherit; height: 40px; letter-spacing: 1px; margin-bottom: 4px; padding: 5px 10px; width: 100%; } #output { background: none repeat scroll 0 0 #F9F9F9; border: 1px solid #CCCCCC; border-radius: 5px 5px 0 0; font: 300 18px/40px'light', 'Helvetica Neue', Arial, Helvetica, sans-serif; height: 400px; letter-spacing: 1px; margin-bottom: 0; overflow: scroll; padding: 5px 10px; } #output div { border-bottom: 1px solid #CCCCCC; } section.name { float: left; overflow: hidden; padding-left: 2em; padding-right: 1em; text-align: right; width: 7em; height: 35px; } section.message { border-left: 1px solid #CCCCCC; margin-left: 10em; overflow: hidden; padding-left: 1em; } input, .message { -webkit-user-select: initial; -o-user-select: initial; -ms-user-select: initial; -moz-user-select: initial; user-select: initial; } button[disabled], input[disabled] { background: rgba(216, 205, 205, 0.2); border: 1px solid rgb(233, 224, 224); } ================================================ FILE: Conversation.js/demos/cross-language-chat.html ================================================
Text-Translation (Multi-Lingual) using Conversation.js
================================================ FILE: Conversation.js/demos/search-user.html ================================================ Search Users using Conversation.js
================================================ FILE: Conversation.js/package.json ================================================ { "name": "conversationjs", "preferGlobal": true, "version": "1.0.0", "author": { "name": "Muaz Khan", "email": "muazkh@gmail.com", "url": "http://www.muazkhan.com/" }, "description": "Conversation.js is inspired by skype; and it provides simple events-like API to manage conversations, enable/disable media devices; add/download files; and do anything supported by Skype.", "scripts": { "start": "node conversation.js" }, "main": "./conversation.js", "repository": { "type": "git", "url": "https://github.com/muaz-khan/Conversation.git" }, "keywords": [ "webrtc", "conversation", "conversation.js", "conversationjs", "rtcmulticonnection", "webrtc-library", "library", "javascript", "chrome", "firefox", "opera", "ie", "internet-explorer", "android", "rtcweb", "rtcmulticonnection.js", "multirtc", "webrtc-experiment", "javascript-library", "muaz", "muaz-khan" ], "analyze": false, "license": "MIT", "readmeFilename": "README.md", "bugs": { "url": "https://github.com/muaz-khan/Conversation/issues", "email": "muazkh@gmail.com" }, "homepage": "https://www.webrtc-experiment.com/Conversationjs/", "_id": "conversationjs@1.0.0", "_from": "conversationjs@" } ================================================ FILE: Conversation.js/server.js ================================================ // http://127.0.0.1:9001 // http://localhost:9001 var server = require('http'), url = require('url'), path = require('path'), fs = require('fs'); function serverHandler(request, response) { var uri = url.parse(request.url).pathname, filename = path.join(process.cwd(), uri); fs.exists(filename, function(exists) { if (!exists) { response.writeHead(404, { 'Content-Type': 'text/plain' }); response.write('404 Not Found: ' + filename + '\n'); response.end(); return; } if (filename.indexOf('favicon.ico') !== -1) { return; } var isWin = !!process.platform.match(/^win/); if (fs.statSync(filename).isDirectory() && !isWin) { filename += '/index.html'; } else if (fs.statSync(filename).isDirectory() && !!isWin) { filename += '\\index.html'; } fs.readFile(filename, 'binary', function(err, file) { if (err) { response.writeHead(500, { 'Content-Type': 'text/plain' }); response.write(err + '\n'); response.end(); return; } var contentType; if (filename.indexOf('.html') !== -1) { contentType = 'text/html'; } if (filename.indexOf('.js') !== -1) { contentType = 'application/javascript'; } if (contentType) { response.writeHead(200, { 'Content-Type': contentType }); } else response.writeHead(200); response.write(file, 'binary'); response.end(); }); }); } var app; app = server.createServer(serverHandler); app = app.listen(process.env.PORT || 9001, process.env.IP || "0.0.0.0", function() { var addr = app.address(); console.log("Server listening at", addr.address + ":" + addr.port); }); ================================================ FILE: DataChannel/.gitignore ================================================ # Node node_modules # bower bower_components ================================================ FILE: DataChannel/.jshintrc ================================================ { "browser": true, "camelcase": true, "curly": true, "devel": true, "eqeqeq": true, "forin": false, "globalstrict": true, "quotmark": "single", "undef": true, "globals": { "DataChannel": true, "io": true } } ================================================ FILE: DataChannel/.npmignore ================================================ node_modules lib-cov npm-debug.log ================================================ FILE: DataChannel/.travis.yml ================================================ language: node_js node_js: - "0.11" install: npm install before_script: - npm install grunt-cli - npm install grunt - grunt matrix: fast_finish: true ================================================ FILE: DataChannel/DataChannel.js ================================================ 'use strict'; // Last time updated: 2017-07-29 4:31:53 PM UTC // __________________ // DataChannel v1.0.0 // Open-Sourced: https://github.com/muaz-khan/DataChannel // -------------------------------------------------- // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // -------------------------------------------------- (function() { window.DataChannel = function(channel, extras) { if (channel) { this.automatic = true; } this.channel = channel || location.href.replace(/\/|:|#|%|\.|\[|\]/g, ''); extras = extras || {}; var self = this; var dataConnector; var fileReceiver; var textReceiver; this.onmessage = function(message, userid) { console.debug(userid, 'sent message:', message); }; this.channels = {}; this.onopen = function(userid) { console.debug(userid, 'is connected with you.'); }; this.onclose = function(event) { console.error('data channel closed:', event); }; this.onerror = function(event) { console.error('data channel error:', event); }; // by default; received file will be auto-saved to disk this.autoSaveToDisk = true; this.onFileReceived = function(fileName) { console.debug('File <', fileName, '> received successfully.'); }; this.onFileSent = function(file) { console.debug('File <', file.name, '> sent successfully.'); }; this.onFileProgress = function(packets) { console.debug('<', packets.remaining, '> items remaining.'); }; function prepareInit(callback) { for (var extra in extras) { self[extra] = extras[extra]; } self.direction = self.direction || 'many-to-many'; if (self.userid) { window.userid = self.userid; } if (!self.openSignalingChannel) { if (typeof self.transmitRoomOnce === 'undefined') { self.transmitRoomOnce = true; } // socket.io over node.js: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md self.openSignalingChannel = function(config) { config = config || {}; channel = config.channel || self.channel || 'default-channel'; var socket = new window.Firebase('https://' + (self.firebase || 'webrtc-experiment') + '.firebaseIO.com/' + channel); socket.channel = channel; socket.on('child_added', function(data) { config.onmessage(data.val()); }); socket.send = function(data) { this.push(data); }; if (!self.socket) { self.socket = socket; } if (channel !== self.channel || (self.isInitiator && channel === self.channel)) { socket.onDisconnect().remove(); } if (config.onopen) { setTimeout(config.onopen, 1); } return socket; }; if (!window.Firebase) { var script = document.createElement('script'); script.src = 'https://cdn.webrtc-experiment.com/firebase.js'; script.onload = callback; document.documentElement.appendChild(script); } else { callback(); } } else { callback(); } } function init() { if (self.config) { return; } self.config = { ondatachannel: function(room) { if (!dataConnector) { self.room = room; return; } var tempRoom = { id: room.roomToken, owner: room.broadcaster }; if (self.ondatachannel) { return self.ondatachannel(tempRoom); } if (self.joinedARoom) { return; } self.joinedARoom = true; self.join(tempRoom); }, onopen: function(userid, _channel) { self.onopen(userid, _channel); self.channels[userid] = { channel: _channel, send: function(data) { self.send(data, this.channel); } }; }, onmessage: function(data, userid) { if (IsDataChannelSupported && !data.size) { data = JSON.parse(data); } if (!IsDataChannelSupported) { if (data.userid === window.userid) { return; } data = data.message; } if (data.type === 'text') { textReceiver.receive(data, self.onmessage, userid); } else if (typeof data.maxChunks !== 'undefined') { fileReceiver.receive(data, self); } else { self.onmessage(data, userid); } }, onclose: function(event) { var myChannels = self.channels; var closedChannel = event.currentTarget; for (var userid in myChannels) { if (closedChannel === myChannels[userid].channel) { delete myChannels[userid]; } } self.onclose(event); }, openSignalingChannel: self.openSignalingChannel }; dataConnector = IsDataChannelSupported ? new DataConnector(self, self.config) : new SocketConnector(self.channel, self.config); fileReceiver = new FileReceiver(self); textReceiver = new TextReceiver(self); if (self.room) { self.config.ondatachannel(self.room); } } this.open = function(_channel) { self.joinedARoom = true; if (self.socket) { self.socket.onDisconnect().remove(); } else { self.isInitiator = true; } if (_channel) { self.channel = _channel; } prepareInit(function() { init(); if (IsDataChannelSupported) { dataConnector.createRoom(_channel); } }); }; this.connect = function(_channel) { if (_channel) { self.channel = _channel; } prepareInit(init); }; // manually join a room this.join = function(room) { if (!room.id || !room.owner) { throw 'Invalid room info passed.'; } if (!dataConnector) { init(); } if (!dataConnector.joinRoom) { return; } dataConnector.joinRoom({ roomToken: room.id, joinUser: room.owner }); }; this.send = function(data, _channel) { if (!data) { throw 'No file, data or text message to share.'; } if (typeof data.size !== 'undefined' && typeof data.type !== 'undefined') { FileSender.send({ file: data, channel: dataConnector, onFileSent: function(file) { self.onFileSent(file); }, onFileProgress: function(packets, uuid) { self.onFileProgress(packets, uuid); }, _channel: _channel, root: self }); return; } TextSender.send({ text: data, channel: dataConnector, _channel: _channel, root: self }); }; this.onleave = function(userid) { console.debug(userid, 'left!'); }; this.leave = this.eject = function(userid) { dataConnector.leave(userid, self.autoCloseEntireSession); }; this.openNewSession = function(isOpenNewSession, isNonFirebaseClient) { if (isOpenNewSession) { if (self.isNewSessionOpened) { return; } self.isNewSessionOpened = true; if (!self.joinedARoom) { self.open(); } } if (!isOpenNewSession || isNonFirebaseClient) { self.connect(); } if (!isNonFirebaseClient) { return; } // for non-firebase clients setTimeout(function() { self.openNewSession(true); }, 5000); }; if (typeof this.preferSCTP === 'undefined') { this.preferSCTP = isFirefox || chromeVersion >= 32 ? true : false; } if (typeof this.chunkSize === 'undefined') { this.chunkSize = isFirefox || chromeVersion >= 32 ? 13 * 1000 : 1000; // 1000 chars for RTP and 13000 chars for SCTP } if (typeof this.chunkInterval === 'undefined') { this.chunkInterval = isFirefox || chromeVersion >= 32 ? 100 : 500; // 500ms for RTP and 100ms for SCTP } if (self.automatic) { if (window.Firebase) { console.debug('checking presence of the room..'); new window.Firebase('https://' + (extras.firebase || self.firebase || 'muazkh') + '.firebaseIO.com/' + self.channel).once('value', function(data) { console.debug('room is present?', data.val() !== null); self.openNewSession(data.val() === null); }); } else { self.openNewSession(false, true); } } }; function DataConnector(root, config) { var self = {}; var that = this; self.userToken = (root.userid = root.userid || uniqueToken()).toString(); self.sockets = []; self.socketObjects = {}; var channels = '--'; var isbroadcaster = false; var isGetNewRoom = true; var rtcDataChannels = []; function newPrivateSocket(_config) { var socketConfig = { channel: _config.channel, onmessage: socketResponse, onopen: function() { if (isofferer && !peer) { initPeer(); } _config.socketIndex = socket.index = self.sockets.length; self.socketObjects[socketConfig.channel] = socket; self.sockets[_config.socketIndex] = socket; } }; socketConfig.callback = function(_socket) { socket = _socket; socketConfig.onopen(); }; var socket = root.openSignalingChannel(socketConfig); var isofferer = _config.isofferer; var gotstream; var inner = {}; var peer; var peerConfig = { onICE: function(candidate) { if (!socket) { return setTimeout(function() { peerConfig.onICE(candidate); }, 2000); } socket.send({ userToken: self.userToken, candidate: { sdpMLineIndex: candidate.sdpMLineIndex, candidate: JSON.stringify(candidate.candidate) } }); }, onopen: onChannelOpened, onmessage: function(event) { config.onmessage(event.data, _config.userid); }, onclose: config.onclose, onerror: root.onerror, preferSCTP: root.preferSCTP }; function initPeer(offerSDP) { if (root.direction === 'one-to-one' && window.isFirstConnectionOpened) { return; } if (!offerSDP) { peerConfig.onOfferSDP = sendsdp; } else { peerConfig.offerSDP = offerSDP; peerConfig.onAnswerSDP = sendsdp; } peer = new RTCPeerConnection(peerConfig); } function onChannelOpened(channel) { channel.peer = peer.peer; rtcDataChannels.push(channel); config.onopen(_config.userid, channel); if (root.direction === 'many-to-many' && isbroadcaster && channels.split('--').length > 3 && defaultSocket) { defaultSocket.send({ newParticipant: socket.channel, userToken: self.userToken }); } window.isFirstConnectionOpened = gotstream = true; } function sendsdp(sdp) { sdp = JSON.stringify(sdp); var part = parseInt(sdp.length / 3); var firstPart = sdp.slice(0, part), secondPart = sdp.slice(part, sdp.length - 1), thirdPart = ''; if (sdp.length > part + part) { secondPart = sdp.slice(part, part + part); thirdPart = sdp.slice(part + part, sdp.length); } socket.send({ userToken: self.userToken, firstPart: firstPart }); socket.send({ userToken: self.userToken, secondPart: secondPart }); socket.send({ userToken: self.userToken, thirdPart: thirdPart }); } function socketResponse(response) { if (response.userToken === self.userToken) { return; } if (response.firstPart || response.secondPart || response.thirdPart) { if (response.firstPart) { // sdp sender's user id passed over "onopen" method _config.userid = response.userToken; inner.firstPart = response.firstPart; if (inner.secondPart && inner.thirdPart) { selfInvoker(); } } if (response.secondPart) { inner.secondPart = response.secondPart; if (inner.firstPart && inner.thirdPart) { selfInvoker(); } } if (response.thirdPart) { inner.thirdPart = response.thirdPart; if (inner.firstPart && inner.secondPart) { selfInvoker(); } } } if (response.candidate && !gotstream && peer) { if (!inner.firstPart || !inner.secondPart || !inner.thirdPart) { return setTimeout(function() { socketResponse(response); }, 400); } peer.addICE({ sdpMLineIndex: response.candidate.sdpMLineIndex, candidate: JSON.parse(response.candidate.candidate) }); console.debug('ice candidate', response.candidate.candidate); } if (response.left) { if (peer && peer.peer) { peer.peer.close(); peer.peer = null; } if (response.closeEntireSession) { leaveChannels(); } else if (socket) { socket.send({ left: true, userToken: self.userToken }); socket = null; } root.onleave(response.userToken); } if (response.playRoleOfBroadcaster) { setTimeout(function() { self.roomToken = response.roomToken; root.open(self.roomToken); self.sockets = swap(self.sockets); }, 600); } } var invokedOnce = false; function selfInvoker() { if (invokedOnce) { return; } invokedOnce = true; inner.sdp = JSON.parse(inner.firstPart + inner.secondPart + inner.thirdPart); if (isofferer) { peer.addAnswerSDP(inner.sdp); } else { initPeer(inner.sdp); } console.debug('sdp', inner.sdp.sdp); } } function onNewParticipant(channel) { if (!channel || channels.indexOf(channel) !== -1 || channel === self.userToken) { return; } channels += channel + '--'; var newChannel = uniqueToken(); newPrivateSocket({ channel: newChannel, closeSocket: true }); if (!defaultSocket) { return; } defaultSocket.send({ participant: true, userToken: self.userToken, joinUser: channel, channel: newChannel }); } function uniqueToken() { return (Math.round(Math.random() * 60535) + 5000000).toString(); } function leaveChannels(channel) { var alert = { left: true, userToken: self.userToken }; var socket; // if room initiator is leaving the room; close the entire session if (isbroadcaster) { if (root.autoCloseEntireSession) { alert.closeEntireSession = true; } else { self.sockets[0].send({ playRoleOfBroadcaster: true, userToken: self.userToken, roomToken: self.roomToken }); } } if (!channel) { // closing all sockets var sockets = self.sockets, length = sockets.length; for (var i = 0; i < length; i++) { socket = sockets[i]; if (socket) { socket.send(alert); if (self.socketObjects[socket.channel]) { delete self.socketObjects[socket.channel]; } delete sockets[i]; } } that.left = true; } // eject a specific user! if (channel) { socket = self.socketObjects[channel]; if (socket) { socket.send(alert); if (self.sockets[socket.index]) { delete self.sockets[socket.index]; } delete self.socketObjects[channel]; } } self.sockets = swap(self.sockets); } window.addEventListener('beforeunload', function() { leaveChannels(); }, false); window.addEventListener('keydown', function(e) { if (e.keyCode === 116) { leaveChannels(); } }, false); var defaultSocket = root.openSignalingChannel({ onmessage: function(response) { if (response.userToken === self.userToken) { return; } if (isGetNewRoom && response.roomToken && response.broadcaster) { config.ondatachannel(response); } if (response.newParticipant) { onNewParticipant(response.newParticipant); } if (response.userToken && response.joinUser === self.userToken && response.participant && channels.indexOf(response.userToken) === -1) { channels += response.userToken + '--'; console.debug('Data connection is being opened between you and', response.userToken || response.channel); newPrivateSocket({ isofferer: true, channel: response.channel || response.userToken, closeSocket: true }); } }, callback: function(socket) { defaultSocket = socket; } }); return { createRoom: function(roomToken) { self.roomToken = (roomToken || uniqueToken()).toString(); isbroadcaster = true; isGetNewRoom = false; (function transmit() { if (defaultSocket) { defaultSocket.send({ roomToken: self.roomToken, broadcaster: self.userToken }); } if (!root.transmitRoomOnce && !that.leaving) { if (root.direction === 'one-to-one') { if (!window.isFirstConnectionOpened) { setTimeout(transmit, 3000); } } else { setTimeout(transmit, 3000); } } })(); }, joinRoom: function(_config) { self.roomToken = _config.roomToken; isGetNewRoom = false; newPrivateSocket({ channel: self.userToken }); defaultSocket.send({ participant: true, userToken: self.userToken, joinUser: _config.joinUser }); }, send: function(message, _channel) { var _channels = rtcDataChannels; var data; var length = _channels.length; if (!length) { return; } data = JSON.stringify(message); if (_channel) { if (_channel.readyState === 'open') { _channel.send(data); } return; } for (var i = 0; i < length; i++) { if (_channels[i].readyState === 'open') { _channels[i].send(data); } } }, leave: function(userid, autoCloseEntireSession) { if (autoCloseEntireSession) { root.autoCloseEntireSession = true; } leaveChannels(userid); if (!userid) { self.joinedARoom = isbroadcaster = false; isGetNewRoom = true; } } }; } var moz = !!navigator.mozGetUserMedia; var IsDataChannelSupported = !((moz && !navigator.mozGetUserMedia) || (!moz && !navigator.webkitGetUserMedia)); function getRandomString() { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '-'); } var userid = getRandomString(); var isMobileDevice = navigator.userAgent.match(/Android|iPhone|iPad|iPod|BlackBerry|IEMobile/i); var isChrome = !!navigator.webkitGetUserMedia; var isFirefox = !!navigator.mozGetUserMedia; var chromeVersion = 50; if (isChrome) { chromeVersion = !!navigator.mozGetUserMedia ? 0 : parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]); } function swap(arr) { var swapped = []; var length = arr.length; for (var i = 0; i < length; i++) { if (arr[i]) { swapped.push(arr[i]); } } return swapped; } function listenEventHandler(eventName, eventHandler) { window.removeEventListener(eventName, eventHandler); window.addEventListener(eventName, eventHandler, false); } // IceServersHandler.js var IceServersHandler = (function() { function getIceServers(connection) { var iceServers = []; iceServers.push(getSTUNObj('stun:stun.l.google.com:19302')); iceServers.push(getTURNObj('stun:webrtcweb.com:7788', 'muazkh', 'muazkh')); // coTURN iceServers.push(getTURNObj('turn:webrtcweb.com:7788', 'muazkh', 'muazkh')); // coTURN iceServers.push(getTURNObj('turn:webrtcweb.com:8877', 'muazkh', 'muazkh')); // coTURN iceServers.push(getTURNObj('turns:webrtcweb.com:7788', 'muazkh', 'muazkh')); // coTURN iceServers.push(getTURNObj('turns:webrtcweb.com:8877', 'muazkh', 'muazkh')); // coTURN // iceServers.push(getTURNObj('turn:webrtcweb.com:3344', 'muazkh', 'muazkh')); // resiprocate // iceServers.push(getTURNObj('turn:webrtcweb.com:4433', 'muazkh', 'muazkh')); // resiprocate // check if restund is still active: http://webrtcweb.com:4050/ iceServers.push(getTURNObj('stun:webrtcweb.com:4455', 'muazkh', 'muazkh')); // restund iceServers.push(getTURNObj('turn:webrtcweb.com:4455', 'muazkh', 'muazkh')); // restund iceServers.push(getTURNObj('turn:webrtcweb.com:5544?transport=tcp', 'muazkh', 'muazkh')); // restund return iceServers; } function getSTUNObj(stunStr) { var urlsParam = 'urls'; if (typeof isPluginRTC !== 'undefined') { urlsParam = 'url'; } var obj = {}; obj[urlsParam] = stunStr; return obj; } function getTURNObj(turnStr, username, credential) { var urlsParam = 'urls'; if (typeof isPluginRTC !== 'undefined') { urlsParam = 'url'; } var obj = { username: username, credential: credential }; obj[urlsParam] = turnStr; return obj; } return { getIceServers: getIceServers }; })(); function RTCPeerConnection(options) { var w = window; var PeerConnection = w.mozRTCPeerConnection || w.webkitRTCPeerConnection; var SessionDescription = w.mozRTCSessionDescription || w.RTCSessionDescription; var IceCandidate = w.mozRTCIceCandidate || w.RTCIceCandidate; var iceServers = { iceServers: IceServersHandler.getIceServers() }; var optional = { optional: [] }; if (!navigator.onLine) { iceServers = null; console.warn('No internet connection detected. No STUN/TURN server is used to make sure local/host candidates are used for peers connection.'); } var peerConnection = new PeerConnection(iceServers, optional); openOffererChannel(); peerConnection.onicecandidate = onicecandidate; function onicecandidate(event) { if (!event.candidate || !peerConnection) { return; } if (options.onICE) { options.onICE(event.candidate); } } var constraints = options.constraints || { optional: [], mandatory: { OfferToReceiveAudio: false, OfferToReceiveVideo: false } }; function onSdpError(e) { var message = JSON.stringify(e, null, '\t'); if (message.indexOf('RTP/SAVPF Expects at least 4 fields') !== -1) { message = 'It seems that you are trying to interop RTP-datachannels with SCTP. It is not supported!'; } console.error('onSdpError:', message); } function onSdpSuccess() {} function createOffer() { if (!options.onOfferSDP) { return; } peerConnection.createOffer(function(sessionDescription) { peerConnection.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, onSdpError, constraints); } function createAnswer() { if (!options.onAnswerSDP) { return; } options.offerSDP = new SessionDescription(options.offerSDP); peerConnection.setRemoteDescription(options.offerSDP, onSdpSuccess, onSdpError); peerConnection.createAnswer(function(sessionDescription) { peerConnection.setLocalDescription(sessionDescription); options.onAnswerSDP(sessionDescription); }, onSdpError, constraints); } if (!moz) { createOffer(); createAnswer(); } var channel; function openOffererChannel() { if (moz && !options.onOfferSDP) { return; } if (!moz && !options.onOfferSDP) { return; } _openOffererChannel(); if (moz) { createOffer(); } } function _openOffererChannel() { // protocol: 'text/chat', preset: true, stream: 16 // maxRetransmits:0 && ordered:false var dataChannelDict = {}; console.debug('dataChannelDict', dataChannelDict); channel = peerConnection.createDataChannel('channel', dataChannelDict); setChannelEvents(); } function setChannelEvents() { channel.onmessage = options.onmessage; channel.onopen = function() { options.onopen(channel); }; channel.onclose = options.onclose; channel.onerror = options.onerror; } if (options.onAnswerSDP && moz && options.onmessage) { openAnswererChannel(); } if (!moz && !options.onOfferSDP) { openAnswererChannel(); } function openAnswererChannel() { peerConnection.ondatachannel = function(event) { channel = event.channel; setChannelEvents(); }; if (moz) { createAnswer(); } } function useless() {} return { addAnswerSDP: function(sdp) { sdp = new SessionDescription(sdp); peerConnection.setRemoteDescription(sdp, onSdpSuccess, onSdpError); }, addICE: function(candidate) { peerConnection.addIceCandidate(new IceCandidate({ sdpMLineIndex: candidate.sdpMLineIndex, candidate: candidate.candidate })); }, peer: peerConnection, channel: channel, sendData: function(message) { if (!channel) { return; } channel.send(message); } }; } var FileConverter = { DataURLToBlob: function(dataURL, fileType, callback) { function processInWebWorker() { var blob = URL.createObjectURL(new Blob(['function getBlob(_dataURL, _fileType) {var binary = atob(_dataURL.substr(_dataURL.indexOf(",") + 1)),i = binary.length,view = new Uint8Array(i);while (i--) {view[i] = binary.charCodeAt(i);};postMessage(new Blob([view], {type: _fileType}));};this.onmessage = function (e) {var data = JSON.parse(e.data); getBlob(data.dataURL, data.fileType);}'], { type: 'application/javascript' })); var worker = new Worker(blob); URL.revokeObjectURL(blob); return worker; } if (!!window.Worker && !isMobileDevice) { var webWorker = processInWebWorker(); webWorker.onmessage = function(event) { callback(event.data); }; webWorker.postMessage(JSON.stringify({ dataURL: dataURL, fileType: fileType })); } else { var binary = atob(dataURL.substr(dataURL.indexOf(',') + 1)), i = binary.length, view = new Uint8Array(i); while (i--) { view[i] = binary.charCodeAt(i); } callback(new Blob([view])); } } }; function FileReceiver(root) { var content = {}; var packets = {}; var numberOfPackets = {}; function receive(data) { var uuid = data.uuid; if (typeof data.packets !== 'undefined') { numberOfPackets[uuid] = packets[uuid] = parseInt(data.packets); } if (root.onFileProgress) { root.onFileProgress({ remaining: packets[uuid]--, length: numberOfPackets[uuid], received: numberOfPackets[uuid] - packets[uuid], maxChunks: numberOfPackets[uuid], uuid: uuid, currentPosition: numberOfPackets[uuid] - packets[uuid] }, uuid); } if (!content[uuid]) { content[uuid] = []; } content[uuid].push(data.message); if (data.last) { var dataURL = content[uuid].join(''); FileConverter.DataURLToBlob(dataURL, data.fileType, function(blob) { blob.uuid = uuid; blob.name = data.name; // blob.type = data.fileType; blob.extra = data.extra || {}; blob.url = (window.URL || window.webkitURL).createObjectURL(blob); if (root.autoSaveToDisk) { FileSaver.SaveToDisk(blob.url, data.name); } if (root.onFileReceived) { root.onFileReceived(blob); } delete content[uuid]; }); } } return { receive: receive }; } var FileSaver = { SaveToDisk: function(fileUrl, fileName) { var hyperlink = document.createElement('a'); hyperlink.href = fileUrl; hyperlink.target = '_blank'; hyperlink.download = fileName || fileUrl; var mouseEvent = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); hyperlink.dispatchEvent(mouseEvent); (window.URL || window.webkitURL).revokeObjectURL(hyperlink.href); } }; var FileSender = { send: function(config) { var root = config.root; var channel = config.channel; var privateChannel = config._channel; var file = config.file; if (!config.file) { console.error('You must attach/select a file.'); return; } // max chunk sending limit on chrome is 64k // max chunk receiving limit on firefox is 16k var packetSize = 15 * 1000; if (root.chunkSize) { packetSize = root.chunkSize; } var textToTransfer = ''; var numberOfPackets = 0; var packets = 0; file.uuid = getRandomString(); function processInWebWorker() { var blob = URL.createObjectURL(new Blob(['function readFile(_file) {postMessage(new FileReaderSync().readAsDataURL(_file));};this.onmessage = function (e) {readFile(e.data);}'], { type: 'application/javascript' })); var worker = new Worker(blob); URL.revokeObjectURL(blob); return worker; } if (!!window.Worker && !isMobileDevice) { var webWorker = processInWebWorker(); webWorker.onmessage = function(event) { onReadAsDataURL(event.data); }; webWorker.postMessage(file); } else { var reader = new FileReader(); reader.onload = function(e) { onReadAsDataURL(e.target.result); }; reader.readAsDataURL(file); } function onReadAsDataURL(dataURL, text) { var data = { type: 'file', uuid: file.uuid, maxChunks: numberOfPackets, currentPosition: numberOfPackets - packets, name: file.name, fileType: file.type, size: file.size }; if (dataURL) { text = dataURL; numberOfPackets = packets = data.packets = parseInt(text.length / packetSize); file.maxChunks = data.maxChunks = numberOfPackets; data.currentPosition = numberOfPackets - packets; if (root.onFileSent) { root.onFileSent(file); } } if (root.onFileProgress) { root.onFileProgress({ remaining: packets--, length: numberOfPackets, sent: numberOfPackets - packets, maxChunks: numberOfPackets, uuid: file.uuid, currentPosition: numberOfPackets - packets }, file.uuid); } if (text.length > packetSize) { data.message = text.slice(0, packetSize); } else { data.message = text; data.last = true; data.name = file.name; file.url = URL.createObjectURL(file); root.onFileSent(file, file.uuid); } channel.send(data, privateChannel); textToTransfer = text.slice(data.message.length); if (textToTransfer.length) { setTimeout(function() { onReadAsDataURL(null, textToTransfer); }, root.chunkInterval || 100); } } } }; function SocketConnector(_channel, config) { var socket = config.openSignalingChannel({ channel: _channel, onopen: config.onopen, onmessage: config.onmessage, callback: function(_socket) { socket = _socket; } }); return { send: function(message) { if (!socket) { return; } socket.send({ userid: userid, message: message }); } }; } function TextReceiver() { var content = {}; function receive(data, onmessage, userid) { // uuid is used to uniquely identify sending instance var uuid = data.uuid; if (!content[uuid]) { content[uuid] = []; } content[uuid].push(data.message); if (data.last) { var message = content[uuid].join(''); if (data.isobject) { message = JSON.parse(message); } // latency detection var receivingTime = new Date().getTime(); var latency = receivingTime - data.sendingTime; onmessage(message, userid, latency); delete content[uuid]; } } return { receive: receive }; } var TextSender = { send: function(config) { var root = config.root; var channel = config.channel; var _channel = config._channel; var initialText = config.text; var packetSize = root.chunkSize || 1000; var textToTransfer = ''; var isobject = false; if (typeof initialText !== 'string') { isobject = true; initialText = JSON.stringify(initialText); } // uuid is used to uniquely identify sending instance var uuid = getRandomString(); var sendingTime = new Date().getTime(); sendText(initialText); function sendText(textMessage, text) { var data = { type: 'text', uuid: uuid, sendingTime: sendingTime }; if (textMessage) { text = textMessage; data.packets = parseInt(text.length / packetSize); } if (text.length > packetSize) { data.message = text.slice(0, packetSize); } else { data.message = text; data.last = true; data.isobject = isobject; } channel.send(data, _channel); textToTransfer = text.slice(data.message.length); if (textToTransfer.length) { setTimeout(function() { sendText(null, textToTransfer); }, root.chunkInterval || 100); } } } }; })(); ================================================ FILE: DataChannel/Gruntfile.js ================================================ 'use strict'; module.exports = function(grunt) { require('load-grunt-tasks')(grunt, { pattern: 'grunt-*', config: 'package.json', scope: 'devDependencies' }); var versionNumber = grunt.file.readJSON('package.json').version; var banner = '\'use strict\';\n\n'; banner += '// Last time updated: <%= grunt.template.today("UTC:yyyy-mm-dd h:MM:ss TT Z") %>\n\n'; banner += '// __________________\n'; banner += '// DataChannel v' + versionNumber + '\n\n'; banner += '// Open-Sourced: https://github.com/muaz-khan/DataChannel\n\n'; banner += '// --------------------------------------------------\n'; banner += '// Muaz Khan - www.MuazKhan.com\n'; banner += '// MIT License - www.WebRTC-Experiment.com/licence\n'; banner += '// --------------------------------------------------\n\n'; // configure project grunt.initConfig({ // make node configurations available pkg: grunt.file.readJSON('package.json'), concat: { options: { stripBanners: true, separator: '\n', banner: banner }, dist: { src: [ 'dev/head.js', 'dev/DataChannel.js', 'dev/DataConnector.js', 'dev/globals.js', // 'dev/externalIceServers.js', 'dev/IceServersHandler.js', 'dev/RTCPeerConnection.js', 'dev/FileConverter.js', 'dev/FileReceiver.js', 'dev/FileSaver.js', 'dev/FileSender.js', 'dev/SocketConnector.js', 'dev/TextReceiver.js', 'dev/TextSender.js', 'dev/tail.js' ], dest: 'DataChannel.js', }, }, htmlhint: { html1: { src: [ './*.html' ], options: { 'tag-pair': true } } }, jshint: { options: { ignores: [], // use default .jshintrc files jshintrc: true }, files: ['DataChannel.js'] }, uglify: { options: { mangle: false, banner: banner }, my_target: { files: { 'DataChannel.min.js': ['DataChannel.js'] } } }, jsbeautifier: { files: [ 'dev/*.js', 'Gruntfile.js', 'DataChannel.js' ], options: { js: { braceStyle: "collapse", breakChainedMethods: false, e4x: false, evalCode: false, indentChar: " ", indentLevel: 0, indentSize: 4, indentWithTabs: false, jslintHappy: false, keepArrayIndentation: false, keepFunctionIndentation: false, maxPreserveNewlines: 10, preserveNewlines: true, spaceBeforeConditional: true, spaceInParen: false, unescapeStrings: false, wrapLineLength: 0 }, html: { braceStyle: "collapse", indentChar: " ", indentScripts: "keep", indentSize: 4, maxPreserveNewlines: 10, preserveNewlines: true, unformatted: ["a", "sub", "sup", "b", "i", "u"], wrapLineLength: 0 }, css: { indentChar: " ", indentSize: 4 } } }, bump: { options: { files: ['package.json', 'bower.json'], updateConfigs: [], commit: true, commitMessage: 'v%VERSION%', commitFiles: ['package.json', 'bower.json'], createTag: true, tagName: '%VERSION%', tagMessage: '%VERSION%', push: false, pushTo: 'upstream', gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' } } }); // enable plugins // set default tasks to run when grunt is called without parameters // http://gruntjs.com/api/grunt.task grunt.registerTask('default', ['concat', 'jsbeautifier', 'htmlhint', 'jshint', 'uglify']); }; ================================================ FILE: DataChannel/README.md ================================================ # [DataChannel.js](https://github.com/muaz-khan/DataChannel) : A JavaScript wrapper library for RTCDataChannel APIs / [Demos](https://www.webrtc-experiment.com/#DataChannel) [](https://npmjs.org/package/datachannel) [](https://npmjs.org/package/datachannel) [](https://travis-ci.org/muaz-khan/DataChannel) ``` npm install datachannel # or bower install datachannel ``` DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more. If you want all DataChannel.js functionalities along with media streaming and runtime additions/deletions then [RTCMultiConnection.js](http://www.rtcmulticonnection.org/) is a good chose with similar APIs/syntax. * [DataChanel.js and Reliable Signaling](https://github.com/muaz-khan/Reliable-Signaler/tree/master/datachannel-client) ## Features 1. Direct messages — to any user using their `user-id` 2. Eject/Reject any user — using their `user-id` 3. Leave any room (i.e. data session) or close entire session using `leave` method 4. File size is limitless! 5. Text message length is limitless! 6. Size of data is also limitless! 7. Fallback to socket.io/websockets/etc. 8. Users' presence detection using `onleave` 9. Latency detection 10. Multi-longest strings/files concurrent 11. File queue support added. Previously shared files will be auto transmitted to each new peer. ## [Demos using DataChannel.js](https://www.webrtc-experiment.com/#DataChannel) 1. [DataChannel basic demo](https://www.webrtc-experiment.com/DataChannel/) 2. [Auto Session Establishment and Users presence detection](https://www.webrtc-experiment.com/DataChannel/auto-session-establishment.html) 3. [Text Chat using Pusher and DataChannel.js](http://webrtc-chat-demo.pusher.io/) ## Try a Quick Demo (Text Chat) ```html``` ## First Step: Link the library ```html ``` ## Last Step: Start using it! ```javascript var channel = new DataChannel('[optional] channel-name'); channel.send(file || data || 'text-message'); ``` ## open/connect data channels ```javascript // to create/open a new channel channel.open('channel-name'); // if someone already created a channel; to join it: use "connect" method channel.connect('channel-name'); ``` ## `onopen` and `onmessage` If you're familiar with WebSockets; these two methods works in the exact same way: ```javascript channel.onopen = function(userid) { } channel.onmessage = function(message, userid, latency) { } ``` `user-ids` can be used to send **direct messages** or to **eject/leave** any user: ## `ondatachannel` Allows you show list of all available data channels to the user; and let him choose which one to join: ```javascript channel.ondatachannel = function(data_channel) { channel.join(data_channel); // or channel.join({ id: data_channel.id, owner: data_channel.owner }); // id: unique identifier for the session // owner: unique identifier for the session initiator }; ``` ## Use custom user-ids ```javascript channel.userid = 'predefined-userid'; ``` Remember; custom defined `user-id` must be unique username. ## Direct messages ```javascript channel.channels[userid].send(file || data || 'text message'); ``` ## Eject/Reject users using their `user-ids` ```javascript channel.eject(userid); // throw a user out of your room! ``` ## Close/Leave the entire room ```javascript channel.leave(); // close your own entire data session ``` ## Detect users' presence ```javascript channel.onleave = function(userid) { }; ``` ## Auto Close Entire Session When room initiator leaves; you can enforce auto-closing of the entire session. By default: it is `false`: ```javascript channel.autoCloseEntireSession = true; ``` It means that session will be kept active all the time; even if initiator leaves the session. You can set `autoCloseEntireSession` before calling `leave` method; which will enforce closing of the entire session: ```javascript channel.autoCloseEntireSession = true; channel.leave(); // closing entire session ``` ## `uuid` for files You can get `uuid` for each file (being sent) like this: ```javascript channel.send(file); var uuid = file.uuid; // "file"-Dot-uuid ``` ## To Share files ```javascript var progressHelper = {}; // to make sure file-saver dialog is not invoked. channel.autoSaveToDisk = false; channel.onFileProgress = function (chunk, uuid) { var helper = progressHelper[chunk.uuid]; helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max; updateLabel(helper.progress, helper.label); }; channel.onFileStart = function (file) { var div = document.createElement('div'); div.title = file.name; div.innerHTML = ' '; appendDIV(div, fileProgress); progressHelper[file.uuid] = { div: div, progress: div.querySelector('progress'), label: div.querySelector('label') }; progressHelper[file.uuid].progress.max = file.maxChunks; }; channel.onFileSent = function (file) { progressHelper[file.uuid].div.innerHTML = '' + file.name + ''; }; channel.onFileReceived = function (fileName, file) { progressHelper[file.uuid].div.innerHTML = '' + file.name + ''; }; function updateLabel(progress, label) { if (progress.position == -1) return; var position = +progress.position.toFixed(2).split('.')[1] || 100; label.innerHTML = position + '%'; } ``` ## File Queue File Queue support added to make sure newly connected users gets all previously shared files. You can see list of previously shared files: ```javascript console.log( channel.fileQueue ); ``` ## Auto-Save file to Disk By default; `autoSaveToDisk` is set to `true`. When it is `true`; it will save file to disk as soon as it is received. To prevent auto-saving feature; just set it `false`: ```javascript channel.autoSaveToDisk = false; // prevent auto-saving! channel.onFileReceived = function (fileName, file) { // file.url // file.uuid hyperlink.href = file.url; }; ``` ## Latency Detection ```javascript channel.onmessage = function(message, userid, latency) { console.log('latency:', latency, 'milliseconds'); }; ``` ## Concurrent Transmission You can send multiple files concurrently; or multiple longer text messages: ```javascript // individually channel.send(fileNumber1); channel.send(fileNumber2); channel.send(fileNumber3); // or as an array channel.send([fileNumber1, fileNumber2, fileNumber3]); channel.send('longer string-1'); channel.send('longer string-2'); channel.send('longer string-3'); ``` ## Errors Handling ```javascript // error to open data ports channel.onerror = function(event) {} // data ports suddenly dropped channel.onclose = function(event) {} ``` ## Data session direction Default direction is `many-to-many`. ```javascript channel.direction = 'one-to-one'; channel.direction = 'one-to-many'; channel.direction = 'many-to-many'; ``` = For signaling; please check following page: https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md Remember, you can use any signaling implementation that exists out there without modifying any single line! Just skip below code and open [above link](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/Signaling.md)! ## Resources 1. Video Presentation for `openSignalingChannel`: https://vimeo.com/91780227 2. Documentation for `openSignalingChannel`: http://www.rtcmulticonnection.org/docs/openSignalingChannel/ ## Use [your own socket.io for signaling](https://github.com/muaz-khan/WebRTC-Experiment/blob/master/socketio-over-nodejs) ```javascript dataChannel.openSignalingChannel = function(config) { var channel = config.channel || this.channel || 'default-channel'; var socket = io.connect('/?channel=' + channel); socket.channel = channel; socket.on('connect', function () { if (config.callback) config.callback(socket); }); socket.send = function (message) { socket.emit('message', { sender: dataChannel.userid, data : message }); }; socket.on('message', config.onmessage); }; ``` ## Use Pusher for signaling A demo & tutorial available here: http://pusher.com/tutorials/webrtc_chat Another link: http://www.rtcmulticonnection.org/docs/openSignalingChannel/#pusher-signaling ## Other Signaling resources * [DataChanel.js and Reliable Signaling](https://github.com/muaz-khan/Reliable-Signaler/tree/master/datachannel-client) 1. [XHR for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#xhr-signaling) 2. [WebSync for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#websync-signaling) 3. [SignalR for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#signalr-signaling) 4. [Pusher for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#pusher-signaling) 5. [Firebase for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#firebase-signaling) 6. [PubNub for Signaling](http://www.rtcmulticonnection.org/docs/openSignalingChannel/#pubnub-signaling) ## `transmitRoomOnce` `transmitRoomOnce` is preferred when using Firebase for signaling. It saves bandwidth and asks DataChannel.js library to not repeatedly transmit room details. ```javascript channel.transmitRoomOnce = true; ``` ## Browser Support [DataChannel.js](https://github.com/muaz-khan/DataChannel) works fine on following browsers: | Browser | Support | | ------------- |:-------------| | Firefox | [Stable](http://www.mozilla.org/en-US/firefox/new/) / [Aurora](http://www.mozilla.org/en-US/firefox/aurora/) / [Nightly](http://nightly.mozilla.org/) | | Google Chrome | [Stable](https://www.google.com/intl/en_uk/chrome/browser/) / [Canary](https://www.google.com/intl/en/chrome/browser/canary.html) / [Beta](https://www.google.com/intl/en/chrome/browser/beta.html) / [Dev](https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula) | | Android | [Chrome Beta](https://play.google.com/store/apps/details?id=com.chrome.beta&hl=en) | ## License [DataChannel.js](https://github.com/muaz-khan/DataChannel) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com). ================================================ FILE: DataChannel/auto-session-establishment.html ================================================
Auto Session Establishment using DataChannel.js
HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?
This demo does NOT works anymore. Please check this one instead:
https://www.webrtc-experiment.com/DataChannel/
Text Chat |
Share Files |
Getting started with WebRTC DataChannel
<script src="https://cdn.webrtc-experiment.com/DataChannel.js"></script>
<script>
var channel = new DataChannel('default-channel');
// to send text/data or file
channel.send(file || data || 'text');
</script>
Features:
- Send file directly — of any size
- Send text-message of any length
- Send data directly
- Simplest syntax ever! Same like WebSockets.
- Supports fallback to socket.io/websockets/etc.
- Auto users' presence detection
- Allows you eject any user; or close your entire data session
Send direct messages!
In many-to-many data session; you can share direct messages or files between specific users:
channel.channels[userid].send(file || data || 'text message');
Detect users' presence
To be alerted if a user leaves your room:
channel.onleave = function(userid) {
// remove that user's photo/image using his user-id
};
Manually eject a user or close your data session
channel.leave(userid); // throw a user out of your room! channel.leave(); // close your own entire data session
Following things will happen if you are a room owner and you tried to close your data session using channel.leave():
- The entire data session (i.e. all peers, sockets and data ports) will be closed. (from each and every user's side)
- All participants will be alerted about room owner's (i.e. yours) action. They'll unable to send any single message over same room because everything is closed!
Note
: DataChannel.js will never "auto" reinitiate the data session.Additional:
<script>
// to be alerted when data ports get open
channel.onopen = function(userid) {
// user.photo.id = userid; ---- see "onleave" and "leave" above ↑
// direct messages!
channel.channels[userid].send(file || data || 'text message');
}
// to be alerted when data ports get new message
channel.onmessage = function(message, userid) {
// send direct message to same user using his user-id
channel.channels[userid].send('cool!');
}
// show progress bar!
channel.onFileProgress = function (packets) {
// packets.remaining
// packets.sent
// packets.received
// packets.length
};
// on file successfully sent
channel.onFileSent = function (file) {
// file.name
// file.size
};
// on file successfully received
channel.onFileReceived = function (fileName) {};
</script>
Errors Handling
<script>
// error to open data ports
channel.onerror = function(event) {}
// data ports suddenly dropped
channel.onclose = function(event) {}
</script>
Use your own socket.io for signaling
<script>
// by default socket.io is used for signaling; you can override it
var channel = new DataChannel('default-channel', {
openSignalingChannel: function(config) {
var socket = io.connect('http://your-site:8888');
socket.channel = config.channel || this.channel || 'default-channel';
socket.on('message', config.onmessage);
socket.send = function (data) {
socket.emit('message', data);
};
if (config.onopen) setTimeout(config.onopen, 1);
return socket;
}
});
</script>
Feedback
DataChannel.js » A WebRTC Library for Data Sharing
HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?
Open New DataChannel Connection
Text Chat |
Share Files |
DataChannel.js Features:
- Direct messages — to any user using his `user-id`
- Eject/Reject any user — using his `user-id`
- Leave any room (i.e. data session) or close entire session using `leave` method
- File size is limitless!
- Text message length is limitless!
- Size of data is also limitless!
- Fallback to socket.io/websockets/etc.
- Users' presence detection using `onleave`
- Latency detection
- Multi-longest strings/files concurrent transmission
How to use DataChannel.js?
<script src="https://cdn.webrtc-experiment.com/DataChannel.js"> </script>
<input type="text" id="chat-input" disabled
style="font-size: 2em; width: 98%;"><br />
<div id="chat-output"></div>
<script>
var chatOutput = document.getElementById('chat-output');
var chatInput = document.getElementById('chat-input');
chatInput.onkeypress = function(e) {
if (e.keyCode != 13) return;
channel.send(this.value);
chatOutput.innerHTML = 'Me: ' + this.value + '<hr />'
+ chatOutput.innerHTML;
this.value = '';
};
</script>
<script>
var channel = new DataChannel('Session Unique Identifier');
channel.onopen = function(userid) {
chatInput.disabled = false;
chatInput.value = 'Hi, ' + userid;
chatInput.focus();
};
channel.onmessage = function(message, userid) {
chatOutput.innerHTML = userid + ': ' + message + '<hr />'
+ chatOutput.innerHTML;
};
channel.onleave = function(userid) {
chatOutput.innerHTML = userid + ' Left.<hr />'
+ chatOutput.innerHTML;
};
</script>
Use your own socket.io for signaling
<script>
// by default socket.io is used for signaling; you can override it
channel.openSignalingChannel = function(config) {
var socket = io.connect('http://your-site:8888');
socket.channel = config.channel || this.channel || 'default-channel';
socket.on('message', config.onmessage);
socket.send = function (data) {
socket.emit('message', data);
};
if (config.onopen) setTimeout(config.onopen, 1);
return socket;
}
</script>
Feedback
File Sharing + Text Chat using WebRTC DataChannel
HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?
Open Data Channel
or join:
Text Chat |
Share Files |
Getting started with WebRTC DataChannel
<script src="https://cdn.webrtc-experiment.com/DataChannel.js"></script>
<script>
var channel = new DataChannel();
// to create/open a new channel
channel.open('channel-name');
// to send text/data or file
channel.send(file || data || 'text');
// if soemone already created a channel; to join it: use "connect" method
channel.connect('channel-name');
</script>
Remember, A-to-Z, everything is optional! You can set channel-name in constructor or in
open/connect methods. It is your choice!
Features:
- Send file directly — of any size
- Send text-message of any length
- Send data directly
- Simplest syntax ever! Same like WebSockets.
- Supports fallback to socket.io/websockets/etc.
- Auto users' presence detection
- Allows you eject any user; or close your entire data session
Additional:
<script>
// to be alerted on data ports get open
channel.onopen = function(userid) {}
// to be alerted on data ports get new message
channel.onmessage = function(message, userid) {}
// by default; connection is [many-to-many]; you can use following directions
channel.direction = 'one-to-one';
channel.direction = 'one-to-many';
channel.direction = 'many-to-many'; // --- it is default
// show progress bar!
channel.onFileProgress = function (packets) {
// packets.remaining
// packets.sent
// packets.received
// packets.length
};
// on file successfully sent
channel.onFileSent = function (file) {
// file.name
// file.size
};
// on file successfully received
channel.onFileReceived = function (fileName) {};
</script>
Errors Handling
<script>
// error to open data ports
channel.onerror = function(event) {}
// data ports suddenly dropped
channel.onclose = function(event) {}
</script>
Use your own socket.io for signaling
<script>
// by default socket.io is used for signaling; you can override it
channel.openSignalingChannel = function(config) {
var socket = io.connect('http://your-site:8888');
socket.channel = config.channel || this.channel || 'default-channel';
socket.on('message', config.onmessage);
socket.send = function (data) {
socket.emit('message', data);
};
if (config.onopen) setTimeout(config.onopen, 1);
return socket;
}
</script>
Feedback
DetectRTC.js
# DetectRTC | Is WebRTC Supported In Your Browser?
[](https://npmjs.org/package/detectrtc) [](https://npmjs.org/package/detectrtc) [](https://travis-ci.org/muaz-khan/DetectRTC) 
### Live Demo: https://www.webrtc-experiment.com/DetectRTC/
```javascript
if (DetectRTC.isWebRTCSupported === false) {
alert('Please use Chrome or Firefox.');
}
if (DetectRTC.hasWebcam === false) {
alert('Please install an external webcam device.');
}
if (DetectRTC.hasMicrophone === false) {
alert('Please install an external microphone device.');
}
if (DetectRTC.hasSpeakers === false && (DetectRTC.browser.name === 'Chrome' || DetectRTC.browser.name === 'Edge')) {
alert('Oops, your system can not play audios.');
}
```
## What is this?
A tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc.
## Free?
It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost.
## Tests?
* https://travis-ci.org/muaz-khan/DetectRTC
## Releases?
* https://github.com/muaz-khan/DetectRTC/releases
## How to install?
```
npm install detectrtc --production
# or via "bower"
bower install detectrtc
```
# Proposed NEW API
```javascript
DetectRTC.isSetSinkIdSupported // (implemented)
DetectRTC.isRTPSenderReplaceTracksSupported // (implemented)
DetectRTC.isORTCSupported // (implemented)
DetectRTC.isRemoteStreamProcessingSupported // (implemented)
DetectRTC.isWebsiteHasWebcamPermissions // (implemented)
DetectRTC.isWebsiteHasMicrophonePermissions // (implemented)
DetectRTC.audioInputDevices // (implemented)
DetectRTC.audioOutputDevices // (implemented)
DetectRTC.videoInputDevices // (implemented)
// Below API are NOT implemented yet
DetectRTC.browser.googSupportedFlags.googDAEEchoCancellation
DetecRTC.browser.googSupportedFlags.echoCancellation
DetectRTC.isMediaHintsSupportsNewSyntax
```
# LocalHost
```sh
node server.js
# or
npm start
# and open:
http://127.0.0.1:9001
# or
http://localhost:9001
```
# NPM
```javascript
var DetectRTC = require('detectrtc');
console.log(DetectRTC.browser);
DetectRTC.load(function() {
console.log(DetectRTC);
});
```
* Live NPM test: https://tonicdev.com/npm/detectrtc
Or try `npm-test.js`:
```sh
cd node_modules
cd detectrtc
# npm test
# or
node npm-test.js
```
# How to link the script?
```html
```
You can even link specific versions:
```html
```
# How to use it?
```javascript
// for node.js users
var DetectRTC = require('detectrtc');
// non-nodejs users can skip above line
// below code will work for all users
DetectRTC.load(function() {
DetectRTC.hasWebcam; // (has webcam device!)
DetectRTC.hasMicrophone; // (has microphone device!)
DetectRTC.hasSpeakers; // (has speakers!)
DetectRTC.isScreenCapturingSupported; // Chrome, Firefox, Opera, Edge and Android
DetectRTC.isSctpDataChannelsSupported;
DetectRTC.isRtpDataChannelsSupported;
DetectRTC.isAudioContextSupported;
DetectRTC.isWebRTCSupported;
DetectRTC.isDesktopCapturingSupported;
DetectRTC.isMobileDevice;
DetectRTC.isWebSocketsSupported;
DetectRTC.isWebSocketsBlocked;
DetectRTC.checkWebSocketsSupport(callback);
DetectRTC.isWebsiteHasWebcamPermissions; // getUserMedia allowed for HTTPs domain in Chrome?
DetectRTC.isWebsiteHasMicrophonePermissions; // getUserMedia allowed for HTTPs domain in Chrome?
DetectRTC.audioInputDevices; // microphones
DetectRTC.audioOutputDevices; // speakers
DetectRTC.videoInputDevices; // cameras
DetectRTC.osName;
DetectRTC.osVersion;
DetectRTC.browser.name === 'Edge' || 'Chrome' || 'Firefox';
DetectRTC.browser.version;
DetectRTC.browser.isChrome;
DetectRTC.browser.isFirefox;
DetectRTC.browser.isOpera;
DetectRTC.browser.isIE;
DetectRTC.browser.isSafari;
DetectRTC.browser.isEdge;
DetectRTC.browser.isPrivateBrowsing; // incognito or private modes
DetectRTC.isCanvasSupportsStreamCapturing;
DetectRTC.isVideoSupportsStreamCapturing;
DetectRTC.DetectLocalIPAddress(callback);
});
```
# `DetectRTC.version`
DetectRTC is supporting `version` property since `1.4.0`.
```javascript
if(DetectRTC.version === '1.4.0') {
alert('We are using DetectRTC version 1.4.0');
}
```
# Why `load` method?
If you're not detecting audio/video input/output devices then you can skip this method.
`DetectRTC.load` simply makes sure that all devices are captured and valid result is set for relevant properties.
# How to fix devices' labels?
You need to check for `device.isCustomLabel` boolean. If this boolean is `true` then assume that DetectRTC given a custom label to the device.
You must getUserMedia request whenever you find `isCustomLabel===true`. getUserMedia request will return valid device labels.
```javascript
if (DetectRTC.MediaDevices[0] && DetectRTC.MediaDevices[0].isCustomLabel) {
// it seems that we did not make getUserMedia request yet
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function(stream) {
var video;
try {
video = document.createElement('video');
video.muted = true;
video.src = URL.createObjectURL(stream);
video.style.display = 'none';
(document.body || document.documentElement).appendChild(vide);
} catch (e) {}
DetectRTC.load(function() {
DetectRTC.videoInputDevices.forEach(function(device, idx) {
// ------------------------------
// now you get valid label here
console.log(device.label);
// ------------------------------
});
// release camera
stream.getTracks().forEach(function(track) {
track.stop();
});
if (video && video.parentNode) {
video.parentNode.removeChild(video);
}
});
});
} else {
DetectRTC.videoInputDevices.forEach(function(device, idx) {
console.log(device.label);
});
}
```
# How to select specific camera?
Demo: [https://jsfiddle.net/cf90az9q/](https://jsfiddle.net/cf90az9q/)
```html
```
For further tricks & usages:
* https://www.webrtc-experiment.com/webrtcpedia/#modify-streams
# Rules to Contribute
```sh
mkdir DetectRTC
cd DetectRTC
git clone git://github.com/muaz-khan/DetectRTC.git ./
# install grunt for code style verifications
npm install grunt-cli
# install all dependencies
npm install --save-dev
# verify your changes
# npm test # or "grunt"
grunt
# Success? Make a pull request!
```
# Github
* https://github.com/muaz-khan/DetectRTC
# Tests powered by
**Check tests here:** https://travis-ci.org/muaz-khan/DetectRTC
# License
[DetectRTC.js](https://github.com/muaz-khan/DetectRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
================================================
FILE: DetectRTC/bower.json
================================================
{
"name": "detectrtc",
"version": "1.4.0",
"authors": [
{
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
"homepage": "https://muazkhan.com/"
},
{
"name": "Kenneth Miles",
"email": "tommymcguiver@gmail.com"
}
],
"homepage": "https://github.com/muaz-khan/DetectRTC",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/DetectRTC.git"
},
"description": "A tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc.",
"main": "DetectRTC.js",
"keywords": [
"webrtc",
"detectrtc",
"features-detection"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules"
]
}
================================================
FILE: DetectRTC/dev/CheckDeviceSupport.js
================================================
var MediaDevices = [];
var audioInputDevices = [];
var audioOutputDevices = [];
var videoInputDevices = [];
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
// Firefox 38+ seems having support of enumerateDevices
// Thanks @xdumaine/enumerateDevices
navigator.enumerateDevices = function(callback) {
var enumerateDevices = navigator.mediaDevices.enumerateDevices();
if (enumerateDevices && enumerateDevices.then) {
navigator.mediaDevices.enumerateDevices().then(callback).catch(function() {
callback([]);
});
} else {
callback([]);
}
};
}
// Media Devices detection
var canEnumerate = false;
/*global MediaStreamTrack:true */
if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) {
canEnumerate = true;
} else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) {
canEnumerate = true;
}
var hasMicrophone = false;
var hasSpeakers = false;
var hasWebcam = false;
var isWebsiteHasMicrophonePermissions = false;
var isWebsiteHasWebcamPermissions = false;
// http://dev.w3.org/2011/webrtc/editor/getusermedia.html#mediadevices
function checkDeviceSupport(callback) {
if (!canEnumerate) {
if (callback) {
callback();
}
return;
}
if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
}
if (!navigator.enumerateDevices && navigator.enumerateDevices) {
navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
}
if (!navigator.enumerateDevices) {
if (callback) {
callback();
}
return;
}
MediaDevices = [];
audioInputDevices = [];
audioOutputDevices = [];
videoInputDevices = [];
hasMicrophone = false;
hasSpeakers = false;
hasWebcam = false;
isWebsiteHasMicrophonePermissions = false;
isWebsiteHasWebcamPermissions = false;
// to prevent duplication
var alreadyUsedDevices = {};
navigator.enumerateDevices(function(devices) {
MediaDevices = [];
audioInputDevices = [];
audioOutputDevices = [];
videoInputDevices = [];
devices.forEach(function(_device) {
var device = {};
for (var d in _device) {
try {
if (typeof _device[d] !== 'function') {
device[d] = _device[d];
}
} catch (e) {}
}
if (alreadyUsedDevices[device.deviceId + device.label + device.kind]) {
return;
}
// if it is MediaStreamTrack.getSources
if (device.kind === 'audio') {
device.kind = 'audioinput';
}
if (device.kind === 'video') {
device.kind = 'videoinput';
}
if (!device.deviceId) {
device.deviceId = device.id;
}
if (!device.id) {
device.id = device.deviceId;
}
if (!device.label) {
device.isCustomLabel = true;
if (device.kind === 'videoinput') {
device.label = 'Camera ' + (videoInputDevices.length + 1);
} else if (device.kind === 'audioinput') {
device.label = 'Microphone ' + (audioInputDevices.length + 1);
} else if (device.kind === 'audiooutput') {
device.label = 'Speaker ' + (audioOutputDevices.length + 1);
} else {
device.label = 'Please invoke getUserMedia once.';
}
if (typeof DetectRTC !== 'undefined' && DetectRTC.browser.isChrome && DetectRTC.browser.version >= 46 && !/^(https:|chrome-extension:)$/g.test(location.protocol || '')) {
if (typeof document !== 'undefined' && typeof document.domain === 'string' && document.domain.search && document.domain.search(/localhost|127.0./g) === -1) {
device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
}
}
} else {
// Firefox on Android still returns empty label
if (device.kind === 'videoinput' && !isWebsiteHasWebcamPermissions) {
isWebsiteHasWebcamPermissions = true;
}
if (device.kind === 'audioinput' && !isWebsiteHasMicrophonePermissions) {
isWebsiteHasMicrophonePermissions = true;
}
}
if (device.kind === 'audioinput') {
hasMicrophone = true;
if (audioInputDevices.indexOf(device) === -1) {
audioInputDevices.push(device);
}
}
if (device.kind === 'audiooutput') {
hasSpeakers = true;
if (audioOutputDevices.indexOf(device) === -1) {
audioOutputDevices.push(device);
}
}
if (device.kind === 'videoinput') {
hasWebcam = true;
if (videoInputDevices.indexOf(device) === -1) {
videoInputDevices.push(device);
}
}
// there is no 'videoouput' in the spec.
MediaDevices.push(device);
alreadyUsedDevices[device.deviceId + device.label + device.kind] = device;
});
if (typeof DetectRTC !== 'undefined') {
// to sync latest outputs
DetectRTC.MediaDevices = MediaDevices;
DetectRTC.hasMicrophone = hasMicrophone;
DetectRTC.hasSpeakers = hasSpeakers;
DetectRTC.hasWebcam = hasWebcam;
DetectRTC.isWebsiteHasWebcamPermissions = isWebsiteHasWebcamPermissions;
DetectRTC.isWebsiteHasMicrophonePermissions = isWebsiteHasMicrophonePermissions;
DetectRTC.audioInputDevices = audioInputDevices;
DetectRTC.audioOutputDevices = audioOutputDevices;
DetectRTC.videoInputDevices = videoInputDevices;
}
if (callback) {
callback();
}
});
}
================================================
FILE: DetectRTC/dev/DetectLocalIPAddress.js
================================================
var regexIpv4Local = /^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/,
regexIpv4 = /([0-9]{1,3}(\.[0-9]{1,3}){3})/,
regexIpv6 = /[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7}/;
// via: https://github.com/diafygi/webrtc-ips
function DetectLocalIPAddress(callback, stream) {
if (!DetectRTC.isWebRTCSupported) {
return;
}
var isPublic = true,
isIpv4 = true;
getIPs(function(ip) {
if (!ip) {
callback(); // Pass nothing to tell that ICE-gathering-ended
} else if (ip.match(regexIpv4Local)) {
isPublic = false;
callback('Local: ' + ip, isPublic, isIpv4);
} else if (ip.match(regexIpv6)) { //via https://ourcodeworld.com/articles/read/257/how-to-get-the-client-ip-address-with-javascript-only
isIpv4 = false;
callback('Public: ' + ip, isPublic, isIpv4);
} else {
callback('Public: ' + ip, isPublic, isIpv4);
}
}, stream);
}
function getIPs(callback, stream) {
if (typeof document === 'undefined' || typeof document.getElementById !== 'function') {
return;
}
var ipDuplicates = {};
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
if (!RTCPeerConnection) {
var iframe = document.getElementById('iframe');
if (!iframe) {
return;
}
var win = iframe.contentWindow;
RTCPeerConnection = win.RTCPeerConnection || win.mozRTCPeerConnection || win.webkitRTCPeerConnection;
}
if (!RTCPeerConnection) {
return;
}
var peerConfig = null;
if (DetectRTC.browser === 'Chrome' && DetectRTC.browser.version < 58) {
// todo: add support for older Opera
peerConfig = {
optional: [{
RtpDataChannels: true
}]
};
}
var servers = {
iceServers: [{
urls: 'stun:stun.l.google.com:19302'
}]
};
var pc = new RTCPeerConnection(servers, peerConfig);
if (stream) {
if (pc.addStream) {
pc.addStream(stream);
} else if (pc.addTrack && stream.getTracks()[0]) {
pc.addTrack(stream.getTracks()[0], stream);
}
}
function handleCandidate(candidate) {
if (!candidate) {
callback(); // Pass nothing to tell that ICE-gathering-ended
return;
}
var match = regexIpv4.exec(candidate);
if (!match) {
return;
}
var ipAddress = match[1];
var isPublic = (candidate.match(regexIpv4Local)),
isIpv4 = true;
if (ipDuplicates[ipAddress] === undefined) {
callback(ipAddress, isPublic, isIpv4);
}
ipDuplicates[ipAddress] = true;
}
// listen for candidate events
pc.onicecandidate = function(event) {
if (event.candidate && event.candidate.candidate) {
handleCandidate(event.candidate.candidate);
} else {
handleCandidate(); // Pass nothing to tell that ICE-gathering-ended
}
};
// create data channel
if (!stream) {
try {
pc.createDataChannel('sctp', {});
} catch (e) {}
}
// create an offer sdp
if (DetectRTC.isPromisesSupported) {
pc.createOffer().then(function(result) {
pc.setLocalDescription(result).then(afterCreateOffer);
});
} else {
pc.createOffer(function(result) {
pc.setLocalDescription(result, afterCreateOffer, function() {});
}, function() {});
}
function afterCreateOffer() {
var lines = pc.localDescription.sdp.split('\n');
lines.forEach(function(line) {
if (line && line.indexOf('a=candidate:') === 0) {
handleCandidate(line);
}
});
}
}
================================================
FILE: DetectRTC/dev/DetectRTC.js
================================================
var DetectRTC = window.DetectRTC || {};
// ----------
// DetectRTC.browser.name || DetectRTC.browser.version || DetectRTC.browser.fullVersion
DetectRTC.browser = getBrowserInfo();
detectPrivateMode(function(isPrivateBrowsing) {
DetectRTC.browser.isPrivateBrowsing = !!isPrivateBrowsing;
});
// DetectRTC.isChrome || DetectRTC.isFirefox || DetectRTC.isEdge
DetectRTC.browser['is' + DetectRTC.browser.name] = true;
// -----------
DetectRTC.osName = osName;
DetectRTC.osVersion = osVersion;
var isNodeWebkit = typeof process === 'object' && typeof process.versions === 'object' && process.versions['node-webkit'];
// --------- Detect if system supports WebRTC 1.0 or WebRTC 1.1.
var isWebRTCSupported = false;
['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection', 'RTCIceGatherer'].forEach(function(item) {
if (isWebRTCSupported) {
return;
}
if (item in window) {
isWebRTCSupported = true;
}
});
DetectRTC.isWebRTCSupported = isWebRTCSupported;
//-------
DetectRTC.isORTCSupported = typeof RTCIceGatherer !== 'undefined';
// --------- Detect if system supports screen capturing API
var isScreenCapturingSupported = false;
if (DetectRTC.browser.isChrome && DetectRTC.browser.version >= 35) {
isScreenCapturingSupported = true;
} else if (DetectRTC.browser.isFirefox && DetectRTC.browser.version >= 34) {
isScreenCapturingSupported = true;
} else if (DetectRTC.browser.isEdge && DetectRTC.browser.version >= 17) {
isScreenCapturingSupported = true;
} else if (DetectRTC.osName === 'Android' && DetectRTC.browser.isChrome) {
isScreenCapturingSupported = true;
}
if (!!navigator.getDisplayMedia || (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia)) {
isScreenCapturingSupported = true;
}
if (!/^(https:|chrome-extension:)$/g.test(location.protocol || '')) {
var isNonLocalHost = typeof document !== 'undefined' && typeof document.domain === 'string' && document.domain.search && document.domain.search(/localhost|127.0./g) === -1;
if (isNonLocalHost && (DetectRTC.browser.isChrome || DetectRTC.browser.isEdge || DetectRTC.browser.isOpera)) {
isScreenCapturingSupported = false;
} else if (DetectRTC.browser.isFirefox) {
isScreenCapturingSupported = false;
}
}
DetectRTC.isScreenCapturingSupported = isScreenCapturingSupported;
// --------- Detect if WebAudio API are supported
var webAudio = {
isSupported: false,
isCreateMediaStreamSourceSupported: false
};
['AudioContext', 'webkitAudioContext', 'mozAudioContext', 'msAudioContext'].forEach(function(item) {
if (webAudio.isSupported) {
return;
}
if (item in window) {
webAudio.isSupported = true;
if (window[item] && 'createMediaStreamSource' in window[item].prototype) {
webAudio.isCreateMediaStreamSourceSupported = true;
}
}
});
DetectRTC.isAudioContextSupported = webAudio.isSupported;
DetectRTC.isCreateMediaStreamSourceSupported = webAudio.isCreateMediaStreamSourceSupported;
// ---------- Detect if SCTP/RTP channels are supported.
var isRtpDataChannelsSupported = false;
if (DetectRTC.browser.isChrome && DetectRTC.browser.version > 31) {
isRtpDataChannelsSupported = true;
}
DetectRTC.isRtpDataChannelsSupported = isRtpDataChannelsSupported;
var isSCTPSupportd = false;
if (DetectRTC.browser.isFirefox && DetectRTC.browser.version > 28) {
isSCTPSupportd = true;
} else if (DetectRTC.browser.isChrome && DetectRTC.browser.version > 25) {
isSCTPSupportd = true;
} else if (DetectRTC.browser.isOpera && DetectRTC.browser.version >= 11) {
isSCTPSupportd = true;
}
DetectRTC.isSctpDataChannelsSupported = isSCTPSupportd;
// ---------
DetectRTC.isMobileDevice = isMobileDevice; // "isMobileDevice" boolean is defined in "getBrowserInfo.js"
// ------
var isGetUserMediaSupported = false;
if (navigator.getUserMedia) {
isGetUserMediaSupported = true;
} else if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
isGetUserMediaSupported = true;
}
if (DetectRTC.browser.isChrome && DetectRTC.browser.version >= 46 && !/^(https:|chrome-extension:)$/g.test(location.protocol || '')) {
if (typeof document !== 'undefined' && typeof document.domain === 'string' && document.domain.search && document.domain.search(/localhost|127.0./g) === -1) {
isGetUserMediaSupported = 'Requires HTTPs';
}
}
if (DetectRTC.osName === 'Nodejs') {
isGetUserMediaSupported = false;
}
DetectRTC.isGetUserMediaSupported = isGetUserMediaSupported;
var displayResolution = '';
if (screen.width) {
var width = (screen.width) ? screen.width : '';
var height = (screen.height) ? screen.height : '';
displayResolution += '' + width + ' x ' + height;
}
DetectRTC.displayResolution = displayResolution;
function getAspectRatio(w, h) {
function gcd(a, b) {
return (b == 0) ? a : gcd(b, a % b);
}
var r = gcd(w, h);
return (w / r) / (h / r);
}
DetectRTC.displayAspectRatio = getAspectRatio(screen.width, screen.height).toFixed(2);
// ----------
DetectRTC.isCanvasSupportsStreamCapturing = isCanvasSupportsStreamCapturing;
DetectRTC.isVideoSupportsStreamCapturing = isVideoSupportsStreamCapturing;
if (DetectRTC.browser.name == 'Chrome' && DetectRTC.browser.version >= 53) {
if (!DetectRTC.isCanvasSupportsStreamCapturing) {
DetectRTC.isCanvasSupportsStreamCapturing = 'Requires chrome flag: enable-experimental-web-platform-features';
}
if (!DetectRTC.isVideoSupportsStreamCapturing) {
DetectRTC.isVideoSupportsStreamCapturing = 'Requires chrome flag: enable-experimental-web-platform-features';
}
}
// ------
DetectRTC.DetectLocalIPAddress = DetectLocalIPAddress;
DetectRTC.isWebSocketsSupported = 'WebSocket' in window && 2 === window.WebSocket.CLOSING;
DetectRTC.isWebSocketsBlocked = !DetectRTC.isWebSocketsSupported;
if (DetectRTC.osName === 'Nodejs') {
DetectRTC.isWebSocketsSupported = true;
DetectRTC.isWebSocketsBlocked = false;
}
DetectRTC.checkWebSocketsSupport = function(callback) {
callback = callback || function() {};
try {
var starttime;
var websocket = new WebSocket('wss://echo.websocket.org:443/');
websocket.onopen = function() {
DetectRTC.isWebSocketsBlocked = false;
starttime = (new Date).getTime();
websocket.send('ping');
};
websocket.onmessage = function() {
DetectRTC.WebsocketLatency = (new Date).getTime() - starttime + 'ms';
callback();
websocket.close();
websocket = null;
};
websocket.onerror = function() {
DetectRTC.isWebSocketsBlocked = true;
callback();
};
} catch (e) {
DetectRTC.isWebSocketsBlocked = true;
callback();
}
};
// -------
DetectRTC.load = function(callback) {
callback = callback || function() {};
checkDeviceSupport(callback);
};
// check for microphone/camera support!
if (typeof checkDeviceSupport === 'function') {
// checkDeviceSupport();
}
if (typeof MediaDevices !== 'undefined') {
DetectRTC.MediaDevices = MediaDevices;
} else {
DetectRTC.MediaDevices = [];
}
DetectRTC.hasMicrophone = hasMicrophone;
DetectRTC.hasSpeakers = hasSpeakers;
DetectRTC.hasWebcam = hasWebcam;
DetectRTC.isWebsiteHasWebcamPermissions = isWebsiteHasWebcamPermissions;
DetectRTC.isWebsiteHasMicrophonePermissions = isWebsiteHasMicrophonePermissions;
DetectRTC.audioInputDevices = audioInputDevices;
DetectRTC.audioOutputDevices = audioOutputDevices;
DetectRTC.videoInputDevices = videoInputDevices;
// ------
var isSetSinkIdSupported = false;
if (typeof document !== 'undefined' && typeof document.createElement === 'function' && 'setSinkId' in document.createElement('video')) {
isSetSinkIdSupported = true;
}
DetectRTC.isSetSinkIdSupported = isSetSinkIdSupported;
// -----
var isRTPSenderReplaceTracksSupported = false;
if (DetectRTC.browser.isFirefox && typeof mozRTCPeerConnection !== 'undefined' /*&& DetectRTC.browser.version > 39*/ ) {
/*global mozRTCPeerConnection:true */
if ('getSenders' in mozRTCPeerConnection.prototype) {
isRTPSenderReplaceTracksSupported = true;
}
} else if (DetectRTC.browser.isChrome && typeof webkitRTCPeerConnection !== 'undefined') {
/*global webkitRTCPeerConnection:true */
if ('getSenders' in webkitRTCPeerConnection.prototype) {
isRTPSenderReplaceTracksSupported = true;
}
}
DetectRTC.isRTPSenderReplaceTracksSupported = isRTPSenderReplaceTracksSupported;
//------
var isRemoteStreamProcessingSupported = false;
if (DetectRTC.browser.isFirefox && DetectRTC.browser.version > 38) {
isRemoteStreamProcessingSupported = true;
}
DetectRTC.isRemoteStreamProcessingSupported = isRemoteStreamProcessingSupported;
//-------
var isApplyConstraintsSupported = false;
/*global MediaStreamTrack:true */
if (typeof MediaStreamTrack !== 'undefined' && 'applyConstraints' in MediaStreamTrack.prototype) {
isApplyConstraintsSupported = true;
}
DetectRTC.isApplyConstraintsSupported = isApplyConstraintsSupported;
//-------
var isMultiMonitorScreenCapturingSupported = false;
if (DetectRTC.browser.isFirefox && DetectRTC.browser.version >= 43) {
// version 43 merely supports platforms for multi-monitors
// version 44 will support exact multi-monitor selection i.e. you can select any monitor for screen capturing.
isMultiMonitorScreenCapturingSupported = true;
}
DetectRTC.isMultiMonitorScreenCapturingSupported = isMultiMonitorScreenCapturingSupported;
DetectRTC.isPromisesSupported = !!('Promise' in window);
// version is generated by "grunt"
DetectRTC.version = '@@version';
================================================
FILE: DetectRTC/dev/Objects.js
================================================
if (typeof DetectRTC === 'undefined') {
window.DetectRTC = {};
}
var MediaStream = window.MediaStream;
if (typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined') {
MediaStream = webkitMediaStream;
}
if (typeof MediaStream !== 'undefined' && typeof MediaStream === 'function') {
DetectRTC.MediaStream = Object.keys(MediaStream.prototype);
} else DetectRTC.MediaStream = false;
if (typeof MediaStreamTrack !== 'undefined') {
DetectRTC.MediaStreamTrack = Object.keys(MediaStreamTrack.prototype);
} else DetectRTC.MediaStreamTrack = false;
var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
if (typeof RTCPeerConnection !== 'undefined') {
DetectRTC.RTCPeerConnection = Object.keys(RTCPeerConnection.prototype);
} else DetectRTC.RTCPeerConnection = false;
================================================
FILE: DetectRTC/dev/common.js
================================================
var browserFakeUserAgent = 'Fake/5.0 (FakeOS) AppleWebKit/123 (KHTML, like Gecko) Fake/12.3.4567.89 Fake/123.45';
var isNodejs = typeof process === 'object' && typeof process.versions === 'object' && process.versions.node && /*node-process*/ !process.browser;
if (isNodejs) {
var version = process.versions.node.toString().replace('v', '');
browserFakeUserAgent = 'Nodejs/' + version + ' (NodeOS) AppleWebKit/' + version + ' (KHTML, like Gecko) Nodejs/' + version + ' Nodejs/' + version
}
(function(that) {
if (typeof window !== 'undefined') {
return;
}
if (typeof window === 'undefined' && typeof global !== 'undefined') {
global.navigator = {
userAgent: browserFakeUserAgent,
getUserMedia: function() {}
};
/*global window:true */
that.window = global;
} else if (typeof window === 'undefined') {
// window = this;
}
if (typeof location === 'undefined') {
/*global location:true */
that.location = {
protocol: 'file:',
href: '',
hash: ''
};
}
if (typeof screen === 'undefined') {
/*global screen:true */
that.screen = {
width: 0,
height: 0
};
}
})(typeof global !== 'undefined' ? global : window);
/*global navigator:true */
var navigator = window.navigator;
if (typeof navigator !== 'undefined') {
if (typeof navigator.webkitGetUserMedia !== 'undefined') {
navigator.getUserMedia = navigator.webkitGetUserMedia;
}
if (typeof navigator.mozGetUserMedia !== 'undefined') {
navigator.getUserMedia = navigator.mozGetUserMedia;
}
} else {
navigator = {
getUserMedia: function() {},
userAgent: browserFakeUserAgent
};
}
================================================
FILE: DetectRTC/dev/detectCaptureStream.js
================================================
var isCanvasSupportsStreamCapturing = false;
var isVideoSupportsStreamCapturing = false;
['captureStream', 'mozCaptureStream', 'webkitCaptureStream'].forEach(function(item) {
if (typeof document === 'undefined' || typeof document.createElement !== 'function') {
return;
}
if (!isCanvasSupportsStreamCapturing && item in document.createElement('canvas')) {
isCanvasSupportsStreamCapturing = true;
}
if (!isVideoSupportsStreamCapturing && item in document.createElement('video')) {
isVideoSupportsStreamCapturing = true;
}
});
================================================
FILE: DetectRTC/dev/detectDesktopOS.js
================================================
// via: http://jsfiddle.net/ChristianL/AVyND/
function detectDesktopOS() {
var unknown = '-';
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var os = unknown;
var clientStrings = [{
s: 'Chrome OS',
r: /CrOS/
}, {
s: 'Windows 10',
r: /(Windows 10.0|Windows NT 10.0)/
}, {
s: 'Windows 8.1',
r: /(Windows 8.1|Windows NT 6.3)/
}, {
s: 'Windows 8',
r: /(Windows 8|Windows NT 6.2)/
}, {
s: 'Windows 7',
r: /(Windows 7|Windows NT 6.1)/
}, {
s: 'Windows Vista',
r: /Windows NT 6.0/
}, {
s: 'Windows Server 2003',
r: /Windows NT 5.2/
}, {
s: 'Windows XP',
r: /(Windows NT 5.1|Windows XP)/
}, {
s: 'Windows 2000',
r: /(Windows NT 5.0|Windows 2000)/
}, {
s: 'Windows ME',
r: /(Win 9x 4.90|Windows ME)/
}, {
s: 'Windows 98',
r: /(Windows 98|Win98)/
}, {
s: 'Windows 95',
r: /(Windows 95|Win95|Windows_95)/
}, {
s: 'Windows NT 4.0',
r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/
}, {
s: 'Windows CE',
r: /Windows CE/
}, {
s: 'Windows 3.11',
r: /Win16/
}, {
s: 'Android',
r: /Android/
}, {
s: 'Open BSD',
r: /OpenBSD/
}, {
s: 'Sun OS',
r: /SunOS/
}, {
s: 'Linux',
r: /(Linux|X11)/
}, {
s: 'iOS',
r: /(iPhone|iPad|iPod)/
}, {
s: 'Mac OS X',
r: /Mac OS X/
}, {
s: 'Mac OS',
r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/
}, {
s: 'QNX',
r: /QNX/
}, {
s: 'UNIX',
r: /UNIX/
}, {
s: 'BeOS',
r: /BeOS/
}, {
s: 'OS/2',
r: /OS\/2/
}, {
s: 'Search Bot',
r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/
}];
for (var i = 0, cs; cs = clientStrings[i]; i++) {
if (cs.r.test(nAgt)) {
os = cs.s;
break;
}
}
var osVersion = unknown;
if (/Windows/.test(os)) {
if (/Windows (.*)/.test(os)) {
osVersion = /Windows (.*)/.exec(os)[1];
}
os = 'Windows';
}
switch (os) {
case 'Mac OS X':
if (/Mac OS X (10[\.\_\d]+)/.test(nAgt)) {
osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
}
break;
case 'Android':
if (/Android ([\.\_\d]+)/.test(nAgt)) {
osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
}
break;
case 'iOS':
if (/OS (\d+)_(\d+)_?(\d+)?/.test(nAgt)) {
osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
}
break;
}
return {
osName: os,
osVersion: osVersion
};
}
================================================
FILE: DetectRTC/dev/detectOSName.js
================================================
var osName = 'Unknown OS';
var osVersion = 'Unknown OS Version';
function getAndroidVersion(ua) {
ua = (ua || navigator.userAgent).toLowerCase();
var match = ua.match(/android\s([0-9\.]*)/);
return match ? match[1] : false;
}
var osInfo = detectDesktopOS();
if (osInfo && osInfo.osName && osInfo.osName != '-') {
osName = osInfo.osName;
osVersion = osInfo.osVersion;
} else if (isMobile.any()) {
osName = isMobile.getOsName();
if (osName == 'Android') {
osVersion = getAndroidVersion();
}
}
var isNodejs = typeof process === 'object' && typeof process.versions === 'object' && process.versions.node;
if (osName === 'Unknown OS' && isNodejs) {
osName = 'Nodejs';
osVersion = process.versions.node.toString().replace('v', '');
}
================================================
FILE: DetectRTC/dev/detectPrivateBrowsing.js
================================================
// via: https://gist.github.com/cou929/7973956
function retry(isDone, next) {
var currentTrial = 0,
maxRetry = 50,
interval = 10,
isTimeout = false;
var id = window.setInterval(
function() {
if (isDone()) {
window.clearInterval(id);
next(isTimeout);
}
if (currentTrial++ > maxRetry) {
window.clearInterval(id);
isTimeout = true;
next(isTimeout);
}
},
10
);
}
function isIE10OrLater(userAgent) {
var ua = userAgent.toLowerCase();
if (ua.indexOf('msie') === 0 && ua.indexOf('trident') === 0) {
return false;
}
var match = /(?:msie|rv:)\s?([\d\.]+)/.exec(ua);
if (match && parseInt(match[1], 10) >= 10) {
return true;
}
return false;
}
function detectPrivateMode(callback) {
var isPrivate;
try {
if (window.webkitRequestFileSystem) {
window.webkitRequestFileSystem(
window.TEMPORARY, 1,
function() {
isPrivate = false;
},
function(e) {
isPrivate = true;
}
);
} else if (window.indexedDB && /Firefox/.test(window.navigator.userAgent)) {
var db;
try {
db = window.indexedDB.open('test');
db.onerror = function() {
return true;
};
} catch (e) {
isPrivate = true;
}
if (typeof isPrivate === 'undefined') {
retry(
function isDone() {
return db.readyState === 'done' ? true : false;
},
function next(isTimeout) {
if (!isTimeout) {
isPrivate = db.result ? false : true;
}
}
);
}
} else if (isIE10OrLater(window.navigator.userAgent)) {
isPrivate = false;
try {
if (!window.indexedDB) {
isPrivate = true;
}
} catch (e) {
isPrivate = true;
}
} else if (window.localStorage && /Safari/.test(window.navigator.userAgent)) {
try {
window.localStorage.setItem('test', 1);
} catch (e) {
isPrivate = true;
}
if (typeof isPrivate === 'undefined') {
isPrivate = false;
window.localStorage.removeItem('test');
}
}
} catch (e) {
isPrivate = false;
}
retry(
function isDone() {
return typeof isPrivate !== 'undefined' ? true : false;
},
function next(isTimeout) {
callback(isPrivate);
}
);
}
================================================
FILE: DetectRTC/dev/getBrowserInfo.js
================================================
var isMobileDevice = !!(/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(navigator.userAgent || ''));
var isEdge = navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob);
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 && ('netscape' in window) && / rv:/.test(navigator.userAgent);
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var isChrome = !!window.chrome && !isOpera;
var isIE = typeof document !== 'undefined' && !!document.documentMode && !isEdge;
// this one can also be used:
// https://www.websocket.org/js/stuff.js (DetectBrowser.js)
function getBrowserInfo() {
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = '' + parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion, 10);
var nameOffset, verOffset, ix;
// In Opera, the true version is after 'Opera' or after 'Version'
if (isOpera) {
browserName = 'Opera';
try {
fullVersion = navigator.userAgent.split('OPR/')[1].split(' ')[0];
majorVersion = fullVersion.split('.')[0];
} catch (e) {
fullVersion = '0.0.0.0';
majorVersion = 0;
}
}
// In MSIE version <=10, the true version is after 'MSIE' in userAgent
// In IE 11, look for the string after 'rv:'
else if (isIE) {
verOffset = nAgt.indexOf('rv:');
if (verOffset > 0) { //IE 11
fullVersion = nAgt.substring(verOffset + 3);
} else { //IE 10 or earlier
verOffset = nAgt.indexOf('MSIE');
fullVersion = nAgt.substring(verOffset + 5);
}
browserName = 'IE';
}
// In Chrome, the true version is after 'Chrome'
else if (isChrome) {
verOffset = nAgt.indexOf('Chrome');
browserName = 'Chrome';
fullVersion = nAgt.substring(verOffset + 7);
}
// In Safari, the true version is after 'Safari' or after 'Version'
else if (isSafari) {
// both and safri and chrome has same userAgent
if (nAgt.indexOf('CriOS') !== -1) {
verOffset = nAgt.indexOf('CriOS');
browserName = 'Chrome';
fullVersion = nAgt.substring(verOffset + 6);
} else if (nAgt.indexOf('FxiOS') !== -1) {
verOffset = nAgt.indexOf('FxiOS');
browserName = 'Firefox';
fullVersion = nAgt.substring(verOffset + 6);
} else {
verOffset = nAgt.indexOf('Safari');
browserName = 'Safari';
fullVersion = nAgt.substring(verOffset + 7);
if ((verOffset = nAgt.indexOf('Version')) !== -1) {
fullVersion = nAgt.substring(verOffset + 8);
}
if (navigator.userAgent.indexOf('Version/') !== -1) {
fullVersion = navigator.userAgent.split('Version/')[1].split(' ')[0];
}
}
}
// In Firefox, the true version is after 'Firefox'
else if (isFirefox) {
verOffset = nAgt.indexOf('Firefox');
browserName = 'Firefox';
fullVersion = nAgt.substring(verOffset + 8);
}
// In most other browsers, 'name/version' is at the end of userAgent
else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
browserName = nAgt.substring(nameOffset, verOffset);
fullVersion = nAgt.substring(verOffset + 1);
if (browserName.toLowerCase() === browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
if (isEdge) {
browserName = 'Edge';
fullVersion = navigator.userAgent.split('Edge/')[1];
// fullVersion = parseInt(navigator.userAgent.match(/Edge\/(\d+).(\d+)$/)[2], 10).toString();
}
// trim the fullVersion string at semicolon/space/bracket if present
if ((ix = fullVersion.search(/[; \)]/)) !== -1) {
fullVersion = fullVersion.substring(0, ix);
}
majorVersion = parseInt('' + fullVersion, 10);
if (isNaN(majorVersion)) {
fullVersion = '' + parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion, 10);
}
return {
fullVersion: fullVersion,
version: majorVersion,
name: browserName,
isPrivateBrowsing: false
};
}
================================================
FILE: DetectRTC/dev/head.js
================================================
(function() {
================================================
FILE: DetectRTC/dev/isMobile.js
================================================
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry|BB10/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
},
getOsName: function() {
var osName = 'Unknown OS';
if (isMobile.Android()) {
osName = 'Android';
}
if (isMobile.BlackBerry()) {
osName = 'BlackBerry';
}
if (isMobile.iOS()) {
osName = 'iOS';
}
if (isMobile.Opera()) {
osName = 'Opera Mini';
}
if (isMobile.Windows()) {
osName = 'Windows';
}
return osName;
}
};
================================================
FILE: DetectRTC/dev/tail.js
================================================
window.DetectRTC = DetectRTC;
if (typeof module !== 'undefined' /* && !!module.exports*/ ) {
module.exports = DetectRTC;
}
if (typeof define === 'function' && define.amd) {
define('DetectRTC', [], function() {
return DetectRTC;
});
}
})();
================================================
FILE: DetectRTC/index.html
================================================
DetectRTC | Is WebRTC Supported In Your Browser?
DetectRTC!
DetectRTC Issues
Latest Updates
How to use DetectRTC?
<script src="https://www.webrtc-experiment.com/DetectRTC.js"></script> <script> // OR otherwise use NPM var DetectRTC = require('detectrtc'); </script>
DetectRTC.load(function() {
DetectRTC.hasWebcam (has webcam device!)
DetectRTC.hasMicrophone (has microphone device!)
DetectRTC.hasSpeakers (has speakers!)
DetectRTC.isScreenCapturingSupported
DetectRTC.isSctpDataChannelsSupported
DetectRTC.isRtpDataChannelsSupported
DetectRTC.isAudioContextSupported
DetectRTC.isWebRTCSupported
DetectRTC.isDesktopCapturingSupported
DetectRTC.isMobileDevice
DetectRTC.isWebSocketsSupported
DetectRTC.isWebSocketsBlocked
DetectRTC.checkWebSocketsSupport(callback)
DetectRTC.isWebsiteHasWebcamPermissions // getUserMedia allowed for HTTPs domain in Chrome?
DetectRTC.isWebsiteHasMicrophonePermissions // getUserMedia allowed for HTTPs domain in Chrome?
DetectRTC.audioInputDevices // microphones
DetectRTC.audioOutputDevices // speakers
DetectRTC.videoInputDevices // cameras
DetectRTC.osName
DetectRTC.osVersion
DetectRTC.browser.name === 'Edge' || 'Chrome' || 'Firefox'
DetectRTC.browser.version
DetectRTC.browser.isChrome
DetectRTC.browser.isFirefox
DetectRTC.browser.isOpera
DetectRTC.browser.isIE
DetectRTC.browser.isSafari
DetectRTC.browser.isEdge
DetectRTC.browser.isPrivateBrowsing // incognito or private modes
DetectRTC.isCanvasSupportsStreamCapturing
DetectRTC.isVideoSupportsStreamCapturing
DetectRTC.DetectLocalIPAddress(callback)
});
Select & Change Cameras using DetectRTC
================================================ FILE: DetectRTC/simple-demos/simple-demo.html ================================================ ================================================ FILE: DetectRTC/test/CheckDeviceSupport.js ================================================ describe('DetectRTC', function() { it('dev/CheckDeviceSupport', function() { console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'dev/CheckDeviceSupport.js'); browser.driver.get('https://www.webrtc-experiment.com/DetectRTC/tests/CheckDeviceSupport.html').then(function() { var audioInputDevices = 0; var audioOutputDevices = 0; var videoInputDevices = 0; browser.driver.findElement(by.id('audioInputDevices')).getText().then(function(value) { audioInputDevices = value; }); browser.driver.findElement(by.id('audioOutputDevices')).getText().then(function(value) { audioOutputDevices = value; }); browser.driver.findElement(by.id('videoInputDevices')).getText().then(function(value) { videoInputDevices = value; }); browser.wait(function() { console.log('audioInputDevices: ' + audioInputDevices); console.log('audioOutputDevices: ' + audioOutputDevices); console.log('videoInputDevices: ' + videoInputDevices); return true; }, 1000, 'CheckDeviceSupport did not return valid information.'); }); }); }); ================================================ FILE: DetectRTC/test/DetectRTC.js ================================================ describe('DetectRTC', function() { it('DetectRTC compiled using grunt', function() { console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'DetectRTC.js'); browser.driver.get('https://www.webrtc-experiment.com/DetectRTC/tests/DetectRTC.html').then(function() { var booleans = {}; var failed = {}; ['hasWebcam', 'hasMicrophone', 'hasSpeakers', 'isApplyConstraintsSupported', 'isAudioContextSupported', 'isCanvasSupportsStreamCapturing', 'isCreateMediaStreamSourceSupported', 'isGetUserMediaSupported', 'isMobileDevice', 'isMultiMonitorScreenCapturingSupported', 'isORTCSupported', 'isPromisesSupported', 'isRTPSenderReplaceTracksSupported', 'isRemoteStreamProcessingSupported', 'isRtpDataChannelsSupported', 'isScreenCapturingSupported', 'isSctpDataChannelsSupported', 'isSetSinkIdSupported', 'isVideoSupportsStreamCapturing', 'isWebRTCSupported', 'isWebSocketsBlocked', 'isWebSocketsSupported', 'isWebsiteHasMicrophonePermissions', 'isWebsiteHasWebcamPermissions' ].forEach(function(prop) { browser.driver.findElement(by.id(prop)).getText().then(function(value) { if (!value.toString().length) { failed[prop] = true; return; } if (typeof value !== 'boolean') { if (value === 'true') { value = true; } else if (value === 'false') { value = false; } else { value = value; } } booleans[prop] = value; }); }); browser.wait(function() { Object.keys(booleans).forEach(function(key) { console.log(key + ': ' + booleans[key]); }); if (Object.keys(failed).length) { Object.keys(failed).forEach(function(key) { console.error(key + ': test failed.'); }); throw new Error(Object.keys(failed).length + ' tests failed.'); } return true; }, 1000, 'DetectRTC did not return valid information.'); }); }); }); ================================================ FILE: DetectRTC/test/browserstack.config.js ================================================ exports.config = { specs: [ './getBrowserInfo.js', './detectOSName.js', './CheckDeviceSupport.js', './DetectRTC.js' ], seleniumAddress: 'http://hub-cloud.browserstack.com/wd/hub', multiCapabilities: [] }; ['Chrome' /*, 'Firefox'*/ ].forEach(function(browserName) { var browserInfo = getDefaultBrowserInfo(browserName); [ /*'OS X',*/ 'Windows'].forEach(function(os) { browserInfo.os = os; exports.config.multiCapabilities.push(browserInfo); }); }); function getDefaultBrowserInfo(browserName) { return { browserName: browserName, build: 'DetectRTC', name: 'DetectRTC_Tests', 'browserstack.user': process.env.BROWSERSTACK_USERNAME, 'browserstack.key': process.env.BROWSERSTACK_KEY, 'browserstack.debug': 'true' }; } // android /* var androidInfo = getDefaultBrowserInfo('android'); androidInfo.device = 'Samsung Galaxy S5'; androidInfo.platform = 'ANDROID'; exports.config.multiCapabilities.push(androidInfo); */ ================================================ FILE: DetectRTC/test/detectOSName.js ================================================ describe('DetectRTC', function() { it('dev/detectOSName + dev/isMobile + dev/detectDesktopOS', function() { console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'dev/detectOSName.js'); console.log('\x1b[31m%s\x1b[0m ', 'dev/isMobile.js'); console.log('\x1b[31m%s\x1b[0m ', 'dev/detectDesktopOS.js'); browser.driver.get('https://www.webrtc-experiment.com/DetectRTC/tests/detectOSName.html').then(function() { var osName = ''; var osVersion = 0; browser.driver.findElement(by.id('osName')).getText().then(function(value) { osName = value; }); browser.driver.findElement(by.id('osVersion')).getText().then(function(value) { osVersion = value; }); browser.wait(function() { console.log('osName: ' + osName); console.log('osVersion: ' + osVersion); if (osName === 'Unknown OS') { throw new Error('Invalid OS version: ' + osName); } if (!osVersion.toString().length || osVersion === 'Unknown OS Version') { throw new Error('Invalid OS version: ' + osVersion); } return true; }, 1000, 'detectOSName did not return valid information.'); }); }); }); ================================================ FILE: DetectRTC/test/getBrowserInfo.js ================================================ function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } describe('DetectRTC', function() { it('dev/getBrowserInfo + dev/detectPrivateBrowsing', function() { console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'dev/getBrowserInfo.js'); console.log('\x1b[31m%s\x1b[0m ', 'dev/detectPrivateBrowsing.js'); browser.driver.get('https://www.webrtc-experiment.com/DetectRTC/tests/getBrowserInfo.html').then(function() { var browserName = ''; var browserVersion = 0; var browserFullVersion = 0; var isPrivateBrowsing = 0; var failed = {}; browser.driver.findElement(by.id('browserName')).getText().then(function(value) { if (!value.toString().length) { failed['browserName'] = true; return; } browserName = value; }); browser.driver.findElement(by.id('browserVersion')).getText().then(function(value) { if (!value.toString().length) { failed['browserVersion'] = true; return; } browserVersion = value; }); browser.driver.findElement(by.id('browserFullVersion')).getText().then(function(value) { if (!value.toString().length) { failed['browserFullVersion'] = true; return; } browserFullVersion = value; }); browser.driver.findElement(by.id('isPrivateBrowsing')).getText().then(function(value) { if (!value.toString().length) { failed['isPrivateBrowsing'] = true; return; } if (typeof value !== 'boolean') { if (value === 'true') { value = true; } else if (value === 'false') { value = false; } else { value = value; } } isPrivateBrowsing = value; }); browser.wait(function() { console.log('browserName: ' + browserName); console.log('browserVersion: ' + browserVersion); console.log('browserFullVersion: ' + browserFullVersion); console.log('isPrivateBrowsing: ' + isPrivateBrowsing); if (Object.keys(failed).length) { Object.keys(failed).forEach(function(key) { console.error(key + ': test failed.'); }); throw new Error(Object.keys(failed).length + ' tests failed.'); } // a few manual validations var browserNameLooksGood = false; var expectedNames = ['Chrome', 'Firefox', 'Opera', 'Edge', 'IE', 'Safari']; for (var i = 0; i < expectedNames.length; i++) { if (browserName === expectedNames[i]) { browserNameLooksGood = true; } } if (browserNameLooksGood === false) { throw new Error('Invalid browser name: ' + browserName); } if (!browserVersion.toString().length || isNumeric(browserVersion) === false) { throw new Error('Invalid browser version: ' + browserVersion); } if (!browserFullVersion.toString().length) { throw new Error('Invalid browser full version: ' + browserFullVersion); } if (typeof isPrivateBrowsing !== 'boolean') { throw new Error('Invalid "isPrivateBrowsing" value: ' + isPrivateBrowsing); } return true; }, 1000, 'dev/getBrowserInfo.js did not return valid information.'); }); }); }); ================================================ FILE: DetectRTC/test/html-test-files/CheckDeviceSupport.html ================================================ audioInputDevices:
audioOutputDevices:
videoInputDevices: ================================================ FILE: DetectRTC/test/html-test-files/DetectRTC.html ================================================ ================================================ FILE: DetectRTC/test/html-test-files/detectOSName.html ================================================ osName:
osVersion: ================================================ FILE: DetectRTC/test/html-test-files/getBrowserInfo.html ================================================ browserName:
browserVersion:
browserFullVersion:
isPrivateBrowsing: ================================================ FILE: FileBufferReader/.gitignore ================================================ node_modules bower_components make-tar.sh *.tar.gz lib-cov .*.swp ._* .DS_Store .git .hg .npmrc .lock-wscript .svn .wafpickle-* config.gypi CVS npm-debug.log rmc-debug.log ================================================ FILE: FileBufferReader/.npmignore ================================================ # ignore everything * # but not these files... !FileBufferReader.js !FileBufferReader.min.js !package.json !bower.json !README.md ================================================ FILE: FileBufferReader/.travis.yml ================================================ language: node_js node_js: - "0.11" install: npm install before_script: - npm install grunt-cli@0.1.13 -g - npm install grunt@0.4.5 - grunt after_failure: npm install && grunt matrix: fast_finish: true ================================================ FILE: FileBufferReader/FileBufferReader.js ================================================ // Last time updated: 2017-08-27 5:48:35 AM UTC // ________________ // FileBufferReader // Open-Sourced: https://github.com/muaz-khan/FileBufferReader // -------------------------------------------------- // Muaz Khan - www.MuazKhan.com // MIT License - www.WebRTC-Experiment.com/licence // -------------------------------------------------- 'use strict'; (function() { function FileBufferReader() { var fbr = this; var fbrHelper = new FileBufferReaderHelper(); fbr.chunks = {}; fbr.users = {}; fbr.readAsArrayBuffer = function(file, callback, extra) { var options = { file: file, earlyCallback: function(chunk) { callback(fbrClone(chunk, { currentPosition: -1 })); }, extra: extra || { userid: 0 } }; if (file.extra && Object.keys(file.extra).length) { Object.keys(file.extra).forEach(function(key) { options.extra[key] = file.extra[key]; }); } fbrHelper.readAsArrayBuffer(fbr, options); }; fbr.getNextChunk = function(fileUUID, callback, userid) { var currentPosition; if (typeof fileUUID.currentPosition !== 'undefined') { currentPosition = fileUUID.currentPosition; fileUUID = fileUUID.uuid; } var allFileChunks = fbr.chunks[fileUUID]; if (!allFileChunks) { return; } if (typeof userid !== 'undefined') { if (!fbr.users[userid + '']) { fbr.users[userid + ''] = { fileUUID: fileUUID, userid: userid, currentPosition: -1 }; } if (typeof currentPosition !== 'undefined') { fbr.users[userid + ''].currentPosition = currentPosition; } fbr.users[userid + ''].currentPosition++; currentPosition = fbr.users[userid + ''].currentPosition; } else { if (typeof currentPosition !== 'undefined') { fbr.chunks[fileUUID].currentPosition = currentPosition; } fbr.chunks[fileUUID].currentPosition++; currentPosition = fbr.chunks[fileUUID].currentPosition; } var nextChunk = allFileChunks[currentPosition]; if (!nextChunk) { delete fbr.chunks[fileUUID]; fbr.convertToArrayBuffer({ chunkMissing: true, currentPosition: currentPosition, uuid: fileUUID }, callback); return; } nextChunk = fbrClone(nextChunk); if (typeof userid !== 'undefined') { nextChunk.remoteUserId = userid + ''; } if (!!nextChunk.start) { fbr.onBegin(nextChunk); } if (!!nextChunk.end) { fbr.onEnd(nextChunk); } fbr.onProgress(nextChunk); fbr.convertToArrayBuffer(nextChunk, function(buffer) { if (nextChunk.currentPosition == nextChunk.maxChunks) { callback(buffer, true); return; } callback(buffer, false); }); }; var fbReceiver = new FileBufferReceiver(fbr); fbr.addChunk = function(chunk, callback) { if (!chunk) { return; } fbReceiver.receive(chunk, function(chunk) { fbr.convertToArrayBuffer({ readyForNextChunk: true, currentPosition: chunk.currentPosition, uuid: chunk.uuid }, callback); }); }; fbr.chunkMissing = function(chunk) { delete fbReceiver.chunks[chunk.uuid]; delete fbReceiver.chunksWaiters[chunk.uuid]; }; fbr.onBegin = function() {}; fbr.onEnd = function() {}; fbr.onProgress = function() {}; fbr.convertToObject = FileConverter.ConvertToObject; fbr.convertToArrayBuffer = FileConverter.ConvertToArrayBuffer // for backward compatibility----it is redundant. fbr.setMultipleUsers = function() {}; // extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned function fbrClone(from, to) { if (from == null || typeof from != "object") return from; if (from.constructor != Object && from.constructor != Array) return from; if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function || from.constructor == String || from.constructor == Number || from.constructor == Boolean) return new from.constructor(from); to = to || new from.constructor(); for (var name in from) { to[name] = typeof to[name] == "undefined" ? fbrClone(from[name], null) : to[name]; } return to; } } function FileBufferReaderHelper() { var fbrHelper = this; function processInWebWorker(_function) { var blob = URL.createObjectURL(new Blob([_function.toString(), 'this.onmessage = function (e) {' + _function.name + '(e.data);}' ], { type: 'application/javascript' })); var worker = new Worker(blob); return worker; } fbrHelper.readAsArrayBuffer = function(fbr, options) { var earlyCallback = options.earlyCallback; delete options.earlyCallback; function processChunk(chunk) { if (!fbr.chunks[chunk.uuid]) { fbr.chunks[chunk.uuid] = { currentPosition: -1 }; } options.extra = options.extra || { userid: 0 }; chunk.userid = options.userid || options.extra.userid || 0; chunk.extra = options.extra; fbr.chunks[chunk.uuid][chunk.currentPosition] = chunk; if (chunk.end && earlyCallback) { earlyCallback(chunk.uuid); earlyCallback = null; } // for huge files if ((chunk.maxChunks > 200 && chunk.currentPosition == 200) && earlyCallback) { earlyCallback(chunk.uuid); earlyCallback = null; } } if (false && typeof Worker !== 'undefined') { var webWorker = processInWebWorker(fileReaderWrapper); webWorker.onmessage = function(event) { processChunk(event.data); }; webWorker.postMessage(options); } else { fileReaderWrapper(options, processChunk); } }; function fileReaderWrapper(options, callback) { callback = callback || function(chunk) { postMessage(chunk); }; var file = options.file; if (!file.uuid) { file.uuid = (Math.random() * 100).toString().replace(/\./g, ''); } var chunkSize = options.chunkSize || 15 * 1000; if (options.extra && options.extra.chunkSize) { chunkSize = options.extra.chunkSize; } var sliceId = 0; var cacheSize = chunkSize; var chunksPerSlice = Math.floor(Math.min(100000000, cacheSize) / chunkSize); var sliceSize = chunksPerSlice * chunkSize; var maxChunks = Math.ceil(file.size / chunkSize); file.maxChunks = maxChunks; var numOfChunksInSlice; var currentPosition = 0; var hasEntireFile; var chunks = []; callback({ currentPosition: currentPosition, uuid: file.uuid, maxChunks: maxChunks, size: file.size, name: file.name, type: file.type, lastModifiedDate: (file.lastModifiedDate || new Date()).toString(), start: true }); var blob, reader = new FileReader(); reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { addChunks(file.name, evt.target.result, function() { sliceId++; if ((sliceId + 1) * sliceSize < file.size) { blob = file.slice(sliceId * sliceSize, (sliceId + 1) * sliceSize); reader.readAsArrayBuffer(blob); } else if (sliceId * sliceSize < file.size) { blob = file.slice(sliceId * sliceSize, file.size); reader.readAsArrayBuffer(blob); } else { file.url = URL.createObjectURL(file); callback({ currentPosition: currentPosition, uuid: file.uuid, maxChunks: maxChunks, size: file.size, name: file.name, lastModifiedDate: (file.lastModifiedDate || new Date()).toString(), url: URL.createObjectURL(file), type: file.type, end: true }); } }); } }; currentPosition += 1; blob = file.slice(sliceId * sliceSize, (sliceId + 1) * sliceSize); reader.readAsArrayBuffer(blob); function addChunks(fileName, binarySlice, addChunkCallback) { numOfChunksInSlice = Math.ceil(binarySlice.byteLength / chunkSize); for (var i = 0; i < numOfChunksInSlice; i++) { var start = i * chunkSize; chunks[currentPosition] = binarySlice.slice(start, Math.min(start + chunkSize, binarySlice.byteLength)); callback({ uuid: file.uuid, buffer: chunks[currentPosition], currentPosition: currentPosition, maxChunks: maxChunks, size: file.size, name: file.name, lastModifiedDate: (file.lastModifiedDate || new Date()).toString(), type: file.type }); currentPosition++; } if (currentPosition == maxChunks) { hasEntireFile = true; } addChunkCallback(); } } } function FileSelector() { var selector = this; var noFileSelectedCallback = function() {}; selector.selectSingleFile = function(callback, failure) { if (failure) { noFileSelectedCallback = failure; } selectFile(callback); }; selector.selectMultipleFiles = function(callback, failure) { if (failure) { noFileSelectedCallback = failure; } selectFile(callback, true); }; selector.selectDirectory = function(callback, failure) { if (failure) { noFileSelectedCallback = failure; } selectFile(callback, true, true); }; selector.accept = '*.*'; function selectFile(callback, multiple, directory) { callback = callback || function() {}; var file = document.createElement('input'); file.type = 'file'; if (multiple) { file.multiple = true; } if (directory) { file.webkitdirectory = true; } file.accept = selector.accept; file.onclick = function() { file.clickStarted = true; }; document.body.onfocus = function() { setTimeout(function() { if (!file.clickStarted) return; file.clickStarted = false; if (!file.value) { noFileSelectedCallback(); } }, 500); }; file.onchange = function() { if (multiple) { if (!file.files.length) { console.error('No file selected.'); return; } var arr = []; Array.from(file.files).forEach(function(file) { file.url = file.webkitRelativePath; arr.push(file); }); callback(arr); return; } if (!file.files[0]) { console.error('No file selected.'); return; } callback(file.files[0]); file.parentNode.removeChild(file); }; file.style.display = 'none'; (document.body || document.documentElement).appendChild(file); fireClickEvent(file); } function getValidFileName(fileName) { if (!fileName) { fileName = 'file' + (new Date).toISOString().replace(/:|\.|-/g, '') } var a = fileName; a = a.replace(/^.*[\\\/]([^\\\/]*)$/i, "$1"); a = a.replace(/\s/g, "_"); a = a.replace(/,/g, ''); a = a.toLowerCase(); return a; } function fireClickEvent(element) { if (typeof element.click === 'function') { element.click(); return; } if (typeof element.change === 'function') { element.change(); return; } if (typeof document.createEvent('Event') !== 'undefined') { var event = document.createEvent('Event'); if (typeof event.initEvent === 'function' && typeof element.dispatchEvent === 'function') { event.initEvent('click', true, true); element.dispatchEvent(event); return; } } var event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); element.dispatchEvent(event); } } function FileBufferReceiver(fbr) { var fbReceiver = this; fbReceiver.chunks = {}; fbReceiver.chunksWaiters = {}; function receive(chunk, callback) { if (!chunk.uuid) { fbr.convertToObject(chunk, function(object) { receive(object); }); return; } if (chunk.start && !fbReceiver.chunks[chunk.uuid]) { fbReceiver.chunks[chunk.uuid] = {}; if (fbr.onBegin) fbr.onBegin(chunk); } if (!chunk.end && chunk.buffer) { fbReceiver.chunks[chunk.uuid][chunk.currentPosition] = chunk.buffer; } if (chunk.end) { var chunksObject = fbReceiver.chunks[chunk.uuid]; var chunksArray = []; Object.keys(chunksObject).forEach(function(item, idx) { chunksArray.push(chunksObject[item]); }); var blob = new Blob(chunksArray, { type: chunk.type }); blob = merge(blob, chunk); blob.url = URL.createObjectURL(blob); blob.uuid = chunk.uuid; if (!blob.size) console.error('Something went wrong. Blob Size is 0.'); if (fbr.onEnd) fbr.onEnd(blob); // clear system memory delete fbReceiver.chunks[chunk.uuid]; delete fbReceiver.chunksWaiters[chunk.uuid]; } if (chunk.buffer && fbr.onProgress) fbr.onProgress(chunk); if (!chunk.end) { callback(chunk); fbReceiver.chunksWaiters[chunk.uuid] = function() { function looper() { if (!chunk.buffer) { return; } if (!fbReceiver.chunks[chunk.uuid]) { return; } if (chunk.currentPosition != chunk.maxChunks && !fbReceiver.chunks[chunk.uuid][chunk.currentPosition]) { callback(chunk); setTimeout(looper, 5000); } } setTimeout(looper, 5000); }; fbReceiver.chunksWaiters[chunk.uuid](); } } fbReceiver.receive = receive; } var FileConverter = { ConvertToArrayBuffer: function(object, callback) { binarize.pack(object, function(dataView) { callback(dataView.buffer); }); }, ConvertToObject: function(buffer, callback) { binarize.unpack(buffer, callback); } }; function merge(mergein, mergeto) { if (!mergein) mergein = {}; if (!mergeto) return mergein; for (var item in mergeto) { try { mergein[item] = mergeto[item]; } catch (e) {} } return mergein; } var debug = false; var BIG_ENDIAN = false, LITTLE_ENDIAN = true, TYPE_LENGTH = Uint8Array.BYTES_PER_ELEMENT, LENGTH_LENGTH = Uint16Array.BYTES_PER_ELEMENT, BYTES_LENGTH = Uint32Array.BYTES_PER_ELEMENT; var Types = { NULL: 0, UNDEFINED: 1, STRING: 2, NUMBER: 3, BOOLEAN: 4, ARRAY: 5, OBJECT: 6, INT8ARRAY: 7, INT16ARRAY: 8, INT32ARRAY: 9, UINT8ARRAY: 10, UINT16ARRAY: 11, UINT32ARRAY: 12, FLOAT32ARRAY: 13, FLOAT64ARRAY: 14, ARRAYBUFFER: 15, BLOB: 16, FILE: 16, BUFFER: 17 // Special type for node.js }; if (debug) { var TypeNames = [ 'NULL', 'UNDEFINED', 'STRING', 'NUMBER', 'BOOLEAN', 'ARRAY', 'OBJECT', 'INT8ARRAY', 'INT16ARRAY', 'INT32ARRAY', 'UINT8ARRAY', 'UINT16ARRAY', 'UINT32ARRAY', 'FLOAT32ARRAY', 'FLOAT64ARRAY', 'ARRAYBUFFER', 'BLOB', 'BUFFER' ]; } var Length = [ null, // Types.NULL null, // Types.UNDEFINED 'Uint16', // Types.STRING 'Float64', // Types.NUMBER 'Uint8', // Types.BOOLEAN null, // Types.ARRAY null, // Types.OBJECT 'Int8', // Types.INT8ARRAY 'Int16', // Types.INT16ARRAY 'Int32', // Types.INT32ARRAY 'Uint8', // Types.UINT8ARRAY 'Uint16', // Types.UINT16ARRAY 'Uint32', // Types.UINT32ARRAY 'Float32', // Types.FLOAT32ARRAY 'Float64', // Types.FLOAT64ARRAY 'Uint8', // Types.ARRAYBUFFER 'Uint8', // Types.BLOB, Types.FILE 'Uint8' // Types.BUFFER ]; var binary_dump = function(view, start, length) { var table = [], endianness = BIG_ENDIAN, ROW_LENGTH = 40; table[0] = []; for (var i = 0; i < ROW_LENGTH; i++) { table[0][i] = i < 10 ? '0' + i.toString(10) : i.toString(10); } for (i = 0; i < length; i++) { var code = view.getUint8(start + i, endianness); var index = ~~(i / ROW_LENGTH) + 1; if (typeof table[index] === 'undefined') table[index] = []; table[index][i % ROW_LENGTH] = code < 16 ? '0' + code.toString(16) : code.toString(16); } console.log('%c' + table[0].join(' '), 'font-weight: bold;'); for (i = 1; i < table.length; i++) { console.log(table[i].join(' ')); } }; var find_type = function(obj) { var type = undefined; if (obj === undefined) { type = Types.UNDEFINED; } else if (obj === null) { type = Types.NULL; } else { var const_name = obj.constructor.name; var const_name_reflection = obj.constructor.toString().match(/\w+/g)[1]; if (const_name !== undefined && Types[const_name.toUpperCase()] !== undefined) { // return type by .constructor.name if possible type = Types[const_name.toUpperCase()]; } else if (const_name_reflection !== undefined && Types[const_name_reflection.toUpperCase()] !== undefined) { type = Types[const_name_reflection.toUpperCase()]; } else { // Work around when constructor.name is not defined switch (typeof obj) { case 'string': type = Types.STRING; break; case 'number': type = Types.NUMBER; break; case 'boolean': type = Types.BOOLEAN; break; case 'object': if (obj instanceof Array) { type = Types.ARRAY; } else if (obj instanceof Int8Array) { type = Types.INT8ARRAY; } else if (obj instanceof Int16Array) { type = Types.INT16ARRAY; } else if (obj instanceof Int32Array) { type = Types.INT32ARRAY; } else if (obj instanceof Uint8Array) { type = Types.UINT8ARRAY; } else if (obj instanceof Uint16Array) { type = Types.UINT16ARRAY; } else if (obj instanceof Uint32Array) { type = Types.UINT32ARRAY; } else if (obj instanceof Float32Array) { type = Types.FLOAT32ARRAY; } else if (obj instanceof Float64Array) { type = Types.FLOAT64ARRAY; } else if (obj instanceof ArrayBuffer) { type = Types.ARRAYBUFFER; } else if (obj instanceof Blob) { // including File type = Types.BLOB; } else if (obj instanceof Buffer) { // node.js only type = Types.BUFFER; } else if (obj instanceof Object) { type = Types.OBJECT; } break; default: break; } } } return type; }; var utf16_utf8 = function(string) { return unescape(encodeURIComponent(string)); }; var utf8_utf16 = function(bytes) { return decodeURIComponent(escape(bytes)); }; /** * packs seriarized elements array into a packed ArrayBuffer * @param {Array} serialized Serialized array of elements. * @return {DataView} view of packed binary */ var pack = function(serialized) { var cursor = 0, i = 0, j = 0, endianness = BIG_ENDIAN; var ab = new ArrayBuffer(serialized[0].byte_length + serialized[0].header_size); var view = new DataView(ab); for (i = 0; i < serialized.length; i++) { var start = cursor, header_size = serialized[i].header_size, type = serialized[i].type, length = serialized[i].length, value = serialized[i].value, byte_length = serialized[i].byte_length, type_name = Length[type], unit = type_name === null ? 0 : window[type_name + 'Array'].BYTES_PER_ELEMENT; // Set type if (type === Types.BUFFER) { // on node.js Blob is emulated using Buffer type view.setUint8(cursor, Types.BLOB, endianness); } else { view.setUint8(cursor, type, endianness); } cursor += TYPE_LENGTH; if (debug) { console.info('Packing', type, TypeNames[type]); } // Set length if required if (type === Types.ARRAY || type === Types.OBJECT) { view.setUint16(cursor, length, endianness); cursor += LENGTH_LENGTH; if (debug) { console.info('Content Length', length); } } // Set byte length view.setUint32(cursor, byte_length, endianness); cursor += BYTES_LENGTH; if (debug) { console.info('Header Size', header_size, 'bytes'); console.info('Byte Length', byte_length, 'bytes'); } switch (type) { case Types.NULL: case Types.UNDEFINED: // NULL and UNDEFINED doesn't have any payload break; case Types.STRING: if (debug) { console.info('Actual Content %c"' + value + '"', 'font-weight:bold;'); } for (j = 0; j < length; j++, cursor += unit) { view.setUint16(cursor, value.charCodeAt(j), endianness); } break; case Types.NUMBER: case Types.BOOLEAN: if (debug) { console.info('%c' + value.toString(), 'font-weight:bold;'); } view['set' + type_name](cursor, value, endianness); cursor += unit; break; case Types.INT8ARRAY: case Types.INT16ARRAY: case Types.INT32ARRAY: case Types.UINT8ARRAY: case Types.UINT16ARRAY: case Types.UINT32ARRAY: case Types.FLOAT32ARRAY: case Types.FLOAT64ARRAY: var _view = new Uint8Array(view.buffer, cursor, byte_length); _view.set(new Uint8Array(value.buffer)); cursor += byte_length; break; case Types.ARRAYBUFFER: case Types.BUFFER: var _view = new Uint8Array(view.buffer, cursor, byte_length); _view.set(new Uint8Array(value)); cursor += byte_length; break; case Types.BLOB: case Types.ARRAY: case Types.OBJECT: break; default: throw 'TypeError: Unexpected type found.'; } if (debug) { binary_dump(view, start, cursor - start); } } return view; }; /** * Unpack binary data into an object with value and cursor * @param {DataView} view [description] * @param {Number} cursor [description] * @return {Object} */ var unpack = function(view, cursor) { var i = 0, endianness = BIG_ENDIAN, start = cursor; var type, length, byte_length, value, elem; // Retrieve "type" type = view.getUint8(cursor, endianness); cursor += TYPE_LENGTH; if (debug) { console.info('Unpacking', type, TypeNames[type]); } // Retrieve "length" if (type === Types.ARRAY || type === Types.OBJECT) { length = view.getUint16(cursor, endianness); cursor += LENGTH_LENGTH; if (debug) { console.info('Content Length', length); } } // Retrieve "byte_length" byte_length = view.getUint32(cursor, endianness); cursor += BYTES_LENGTH; if (debug) { console.info('Byte Length', byte_length, 'bytes'); } var type_name = Length[type]; var unit = type_name === null ? 0 : window[type_name + 'Array'].BYTES_PER_ELEMENT; switch (type) { case Types.NULL: case Types.UNDEFINED: if (debug) { binary_dump(view, start, cursor - start); } // NULL and UNDEFINED doesn't have any octet value = null; break; case Types.STRING: length = byte_length / unit; var string = []; for (i = 0; i < length; i++) { var code = view.getUint16(cursor, endianness); cursor += unit; string.push(String.fromCharCode(code)); } value = string.join(''); if (debug) { console.info('Actual Content %c"' + value + '"', 'font-weight:bold;'); binary_dump(view, start, cursor - start); } break; case Types.NUMBER: value = view.getFloat64(cursor, endianness); cursor += unit; if (debug) { console.info('Actual Content %c"' + value.toString() + '"', 'font-weight:bold;'); binary_dump(view, start, cursor - start); } break; case Types.BOOLEAN: value = view.getUint8(cursor, endianness) === 1 ? true : false; cursor += unit; if (debug) { console.info('Actual Content %c"' + value.toString() + '"', 'font-weight:bold;'); binary_dump(view, start, cursor - start); } break; case Types.INT8ARRAY: case Types.INT16ARRAY: case Types.INT32ARRAY: case Types.UINT8ARRAY: case Types.UINT16ARRAY: case Types.UINT32ARRAY: case Types.FLOAT32ARRAY: case Types.FLOAT64ARRAY: case Types.ARRAYBUFFER: elem = view.buffer.slice(cursor, cursor + byte_length); cursor += byte_length; // If ArrayBuffer if (type === Types.ARRAYBUFFER) { value = elem; // If other TypedArray } else { value = new window[type_name + 'Array'](elem); } if (debug) { binary_dump(view, start, cursor - start); } break; case Types.BLOB: if (debug) { binary_dump(view, start, cursor - start); } // If Blob is available (on browser) if (window.Blob) { var mime = unpack(view, cursor); var buffer = unpack(view, mime.cursor); cursor = buffer.cursor; value = new Blob([buffer.value], { type: mime.value }); } else { // node.js implementation goes here elem = view.buffer.slice(cursor, cursor + byte_length); cursor += byte_length; // node.js implementatino uses Buffer to help Blob value = new Buffer(elem); } break; case Types.ARRAY: if (debug) { binary_dump(view, start, cursor - start); } value = []; for (i = 0; i < length; i++) { // Retrieve array element elem = unpack(view, cursor); cursor = elem.cursor; value.push(elem.value); } break; case Types.OBJECT: if (debug) { binary_dump(view, start, cursor - start); } value = {}; for (i = 0; i < length; i++) { // Retrieve object key and value in sequence var key = unpack(view, cursor); var val = unpack(view, key.cursor); cursor = val.cursor; value[key.value] = val.value; } break; default: throw 'TypeError: Type not supported.'; } return { value: value, cursor: cursor }; }; /** * deferred function to process multiple serialization in order * @param {array} array [description] * @param {Function} callback [description] * @return {void} no return value */ var deferredSerialize = function(array, callback) { var length = array.length, results = [], count = 0, byte_length = 0; for (var i = 0; i < array.length; i++) { (function(index) { serialize(array[index], function(result) { // store results in order results[index] = result; // count byte length byte_length += result[0].header_size + result[0].byte_length; // when all results are on table if (++count === length) { // finally concatenate all reuslts into a single array in order var array = []; for (var j = 0; j < results.length; j++) { array = array.concat(results[j]); } callback(array, byte_length); } }); })(i); } }; /** * Serializes object and return byte_length * @param {mixed} obj JavaScript object you want to serialize * @return {Array} Serialized array object */ var serialize = function(obj, callback) { var subarray = [], unit = 1, header_size = TYPE_LENGTH + BYTES_LENGTH, type, byte_length = 0, length = 0, value = obj; type = find_type(obj); unit = Length[type] === undefined || Length[type] === null ? 0 : window[Length[type] + 'Array'].BYTES_PER_ELEMENT; switch (type) { case Types.UNDEFINED: case Types.NULL: break; case Types.NUMBER: case Types.BOOLEAN: byte_length = unit; break; case Types.STRING: length = obj.length; byte_length += length * unit; break; case Types.INT8ARRAY: case Types.INT16ARRAY: case Types.INT32ARRAY: case Types.UINT8ARRAY: case Types.UINT16ARRAY: case Types.UINT32ARRAY: case Types.FLOAT32ARRAY: case Types.FLOAT64ARRAY: length = obj.length; byte_length += length * unit; break; case Types.ARRAY: deferredSerialize(obj, function(subarray, byte_length) { callback([{ type: type, length: obj.length, header_size: header_size + LENGTH_LENGTH, byte_length: byte_length, value: null }].concat(subarray)); }); return; case Types.OBJECT: var deferred = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { deferred.push(key); deferred.push(obj[key]); length++; } } deferredSerialize(deferred, function(subarray, byte_length) { callback([{ type: type, length: length, header_size: header_size + LENGTH_LENGTH, byte_length: byte_length, value: null }].concat(subarray)); }); return; case Types.ARRAYBUFFER: byte_length += obj.byteLength; break; case Types.BLOB: var mime_type = obj.type; var reader = new FileReader(); reader.onload = function(e) { deferredSerialize([mime_type, e.target.result], function(subarray, byte_length) { callback([{ type: type, length: length, header_size: header_size, byte_length: byte_length, value: null }].concat(subarray)); }); }; reader.onerror = function(e) { throw 'FileReader Error: ' + e; }; reader.readAsArrayBuffer(obj); return; case Types.BUFFER: byte_length += obj.length; break; default: throw 'TypeError: Type "' + obj.constructor.name + '" not supported.'; } callback([{ type: type, length: length, header_size: header_size, byte_length: byte_length, value: value }].concat(subarray)); }; /** * Deserialize binary and return JavaScript object * @param ArrayBuffer buffer ArrayBuffer you want to deserialize * @return mixed Retrieved JavaScript object */ var deserialize = function(buffer, callback) { var view = buffer instanceof DataView ? buffer : new DataView(buffer); var result = unpack(view, 0); return result.value; }; if (debug) { window.Test = { BIG_ENDIAN: BIG_ENDIAN, LITTLE_ENDIAN: LITTLE_ENDIAN, Types: Types, pack: pack, unpack: unpack, serialize: serialize, deserialize: deserialize }; } var binarize = { pack: function(obj, callback) { try { if (debug) console.info('%cPacking Start', 'font-weight: bold; color: red;', obj); serialize(obj, function(array) { if (debug) console.info('Serialized Object', array); callback(pack(array)); }); } catch (e) { throw e; } }, unpack: function(buffer, callback) { try { if (debug) console.info('%cUnpacking Start', 'font-weight: bold; color: red;', buffer); var result = deserialize(buffer); if (debug) console.info('Deserialized Object', result); callback(result); } catch (e) { throw e; } } }; window.FileConverter = FileConverter; window.FileSelector = FileSelector; window.FileBufferReader = FileBufferReader; })(); ================================================ FILE: FileBufferReader/Gruntfile.js ================================================ 'use strict'; module.exports = function(grunt) { require('load-grunt-tasks')(grunt, { pattern: 'grunt-*', config: 'package.json', scope: 'devDependencies' }); var banner = '// Last time updated: <%= grunt.template.today("UTC:yyyy-mm-dd h:MM:ss TT Z") %>\n\n'; banner += '// ________________\n'; banner += '// FileBufferReader\n\n'; banner += '// Open-Sourced: https://github.com/muaz-khan/FileBufferReader\n\n'; banner += '// --------------------------------------------------\n'; banner += '// Muaz Khan - www.MuazKhan.com\n'; banner += '// MIT License - www.WebRTC-Experiment.com/licence\n'; banner += '// --------------------------------------------------\n\n'; banner += '\'use strict\';\n\n'; // configure project grunt.initConfig({ // make node configurations available pkg: grunt.file.readJSON('package.json'), concat: { options: { stripBanners: true, separator: '\n', banner: banner }, dist: { src: [ 'dev/head.js', 'dev/FileBufferReader.js', 'dev/FileBufferReaderHelper.js', 'dev/FileSelector.js', 'dev/FileBufferReceiver.js', 'dev/FileConverter.js', 'dev/common.js', 'dev/binarize.js', 'dev/tail.js' ], dest: 'FileBufferReader.js', }, }, uglify: { options: { mangle: false, banner: banner }, my_target: { files: { 'FileBufferReader.min.js': ['FileBufferReader.js'] } } }, jsbeautifier: { files: ['dev/*.js', 'demo/*.js', 'FileBufferReader.js'], options: { js: { braceStyle: "collapse", breakChainedMethods: false, e4x: false, evalCode: false, indentChar: " ", indentLevel: 0, indentSize: 4, indentWithTabs: false, jslintHappy: false, keepArrayIndentation: false, keepFunctionIndentation: false, maxPreserveNewlines: 10, preserveNewlines: true, spaceBeforeConditional: true, spaceInParen: false, unescapeStrings: false, wrapLineLength: 0 }, html: { braceStyle: "collapse", indentChar: " ", indentScripts: "keep", indentSize: 4, maxPreserveNewlines: 10, preserveNewlines: true, unformatted: ["a", "sub", "sup", "b", "i", "u"], wrapLineLength: 0 }, css: { indentChar: " ", indentSize: 4 } } }, bump: { options: { files: ['package.json', 'bower.json'], updateConfigs: [], commit: true, commitMessage: 'v%VERSION%', commitFiles: ['package.json', 'bower.json'], createTag: true, tagName: '%VERSION%', tagMessage: '%VERSION%', push: false, pushTo: 'upstream', gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' } } }); // enable plugins // set default tasks to run when grunt is called without parameters // http://gruntjs.com/api/grunt.task grunt.registerTask('default', ['concat', 'jsbeautifier', 'uglify']); }; ================================================ FILE: FileBufferReader/LICENSE ================================================ The MIT License (MIT) Copyright (c) 2017 [Muaz Khan](https://github.com/muaz-khan) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: FileBufferReader/README.md ================================================ # [FileBufferReader.js](https://github.com/muaz-khan/FileBufferReader) / [Demo](https://www.WebRTC-Experiment.com/FileBufferReader/) / [Watch a YouTube video](https://www.youtube.com/watch?v=gv8xpdGdS4o) [](https://npmjs.org/package/fbr) [](https://npmjs.org/package/fbr) [](https://travis-ci.org/muaz-khan/FileBufferReader) All released versions: https://github.com/muaz-khan/FileBufferReader/releases Using FileBufferReader.js, you can: 1. Get list of array-buffers with each specific chunkSize 2. Chunks can be step-by-step shared with remote peers, or instantly shared using for-loop You can easily implement retransmission of chunks as well. You need to set `binaryType` to `arraybuffer`: ```javascript WebRTC_Data_Channel.binaryType = 'arraybuffer'; ``` ## A few points: 1. FileBufferReader itself doesn't do anything except reading the file(s) 2. You need to manually share chunks using your preferred medium or gateway 3. FileBufferReader currently uses memory to store chunks; which has storage limits. So, you may not be able to use FileBufferReader to read/share file with 1GB size or more. 4. FileBufferReader is added to support controlled-buffers transmissions whilst following Skype's file sharing style. It is MIT Licenced, which means that you can use it in any commercial/non-commercial product, free of cost. ```sh npm install fbr --production # or using bower bower install fbr ``` To use it: ```html ``` Or run localhost server: ```sh node server.js ``` Then open: `http://localhost:9001/` or `http://127.0.0.1:9001/`. ## [fbr-client](https://github.com/muaz-khan/FileBufferReader/tree/master/fbr-client) You can even try [socket.io file sharing client](https://github.com/muaz-khan/FileBufferReader/tree/master/fbr-client): ```sh npm install fbr-client ``` Then run the server: ```sh cd ./node_modules/fbr-client node server.js port=9001 ``` Then open: `http://localhost:9001/` or `http://127.0.0.1:9001/`. > You can modify development files from the `dev` directory; and use `grunt` tool to recompile into `FileBufferReader.js`. ## FileBufferReader API 1. `chunks` object. It contains multiple files' chunks. Even if you received chunks from remote peer, and invoked `addChunk` method; all chunks will be stored in same `chunks` object. `var fileChunks = fileBufferReader.chunks['file-uuid']`. 2. `readAsArrayBuffer` method. It reads entire file and stores chunkified buffers in `chunks` object. 3. `getNextChunk` method. It simply reads `last-position` and returns next available array-buffer chunk. 4. `onBegin`, `onEnd` and `onProgress` events. These are added only to support file progress bars. 5. `addChunk` method. It allows you store all received chunks in an array until entire file is received. 6. `convertToObject` method. FileBufferReader assumes that you're sending ArrayBuffer using WebRTC data channels. It means that you'll be getting ArrayBuffer type in the `onmessage` event. `convertToObject` method allows you convert ArrayBuffer into JavaScript object type, which is helpful to check type of message. 7. `convertToArrayBuffer` method. You can pass javascript object or any data-type, and this method will return `ArrayBuffer`. ## 1. Link The Library ``` https://cdn.webrtc-experiment.com/FileBufferReader.js # or https://cdn.rawgit.com/muaz-khan/FileBufferReader/master/FileBufferReader.js ``` ## 2. Select File (optional step) You can use `input[type=file].onchange` instead, which is **strongly recommended** over using `FileSelecter` because `FileSelector` object is incapable to handle failures or situations where browser doesn't fires `onchange` event. ```javascript var fileSelector = new FileSelector(); // *.png, *.jpeg, *.mp4, etc. fileSelector.accept = '*.*'; var btnSelectFile = document.getElementById('select-file'); btnSelectFile.onclick = function() { fileSelector.selectSingleFile(function(file) { // file == input[type=file] }); }; ``` ## 3. Read Buffers ```javascript var fileBufferReader = new FileBufferReader(); fileBufferReader.readAsArrayBuffer(file, function(fileUUID) { // var file = fileBufferReader.chunks[fileUUID]; // var listOfChunks = file.listOfChunks; // get first chunk, and send using WebRTC data channels // NEVER send chunks in loop; otherwise you'll face issues in slow networks // remote peer should notify if it is ready for next chunk fileBufferReader.getNextChunk(fileUUID, function(nextChunk, isLastChunk) { if(isLastChunk) { alert('File Successfully sent.'); } // sending using WebRTC data channels datachannel.send(nextChunk); }); }); ``` `readAsArrayBuffer` takes 3rd argument as well; where you can pass `chunkSize`, and your custom data. ```javascript var extra = { chunkSize: 15 * 1000, // Firefox' receiving limit is 16k userid: 'sender-userid' // MOST USEFUL object }; fileBufferReader.readAsArrayBuffer(file, callback, extra); ``` ## 4. When remote peer receives a chunk ```javascript datachannel.onmessage = function(event) { var chunk = event.data; if (chunk instanceof ArrayBuffer || chunk instanceof DataView) { // array buffers are passed using WebRTC data channels // need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) { datachannel.onmessage({ data: object }); }); return; } // if you passed "extra-data", you can access it here: // chunk.extra.senderUserName or whatever else // if target peer requested next chunk if(chunk.readyForNextChunk) { fileBufferReader.getNextChunk(chunk.uuid, function(nextChunk, isLastChunk) { if(isLastChunk) { alert('File Successfully sent.'); } // sending using WebRTC data channels datachannel.send(nextChunk); }); return; } // if chunk is received fileBufferReader.addChunk(chunk, function(promptNextChunk) { // request next chunk datachannel.send(promptNextChunk); }); }; ``` ## 5. File progress helpers Link this script: ``` https://cdn.webrtc-experiment.com/FileProgressBarHandler.js # or https://cdn.rawgit.com/muaz-khan/FileBufferReader/master/fbr.0/dev/FileProgressBarHandler.js ``` Add a files-div: ```html ``` Add following code: ```javascript // this line is optional // however it allows you set the
for progress-bars and files-preview
fileBufferReader.filesContainer = document.getElementById('files-container');
// this line sets "onFileStart", "onFileProgress" and "onFileEnd" events (see below lines)
FileProgressBarHandler.handle(fileBufferReader);
fileBufferReader.onBegin = fileBufferReader.onFileStart;
fileBufferReader.onProgress = fileBufferReader.onFileProgress;
fileBufferReader.onEnd = fileBufferReader.onFileEnd;
```
Above snippet can be written as following:
```javascript
var options = {};
// this line is optional
// however it allows you set the
for progress-bars and files-preview
options.filesContainer = document.getElementById('files-container');
// this line sets "onFileStart", "onFileProgress" and "onFileEnd" events (see below lines)
FileProgressBarHandler.handle(options);
fileBufferReader.onBegin = options.onFileStart;
fileBufferReader.onProgress = options.onFileProgress;
fileBufferReader.onEnd = options.onFileEnd;
```
If you're **NOT interested** in above `FileProgressBarHandler.js`:
```javascript
var progressHelper = {};
var outputPanel = document.body;
var FileHelper = {
onBegin: function(file) {
// if you passed "extra-data", you can access it here:
// file.extra.senderUserName or whatever else
var li = document.createElement('li');
li.title = file.name;
li.innerHTML = ' ';
outputPanel.insertBefore(li, outputPanel.firstChild);
progressHelper[file.uuid] = {
li: li,
progress: li.querySelector('progress'),
label: li.querySelector('label')
};
progressHelper[file.uuid].progress.max = file.maxChunks;
},
onEnd: function(file) {
// if you passed "extra-data", you can access it here:
// file.extra.senderUserName or whatever else
progressHelper[file.uuid].li.innerHTML = '' + file.name + '';
},
onProgress: function(chunk) {
// if you passed "extra-data", you can access it here:
// chunk.extra.senderUserName or whatever else
var helper = progressHelper[chunk.uuid];
helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max;
updateLabel(helper.progress, helper.label);
}
};
function updateLabel(progress, label) {
if (progress.position == -1) return;
var position = +progress.position.toFixed(2).split('.')[1] || 100;
label.innerHTML = position + '%';
}
fileBufferReader.onBegin = FileHelper.onBegin;
fileBufferReader.onProgress = FileHelper.onProgress;
fileBufferReader.onEnd = FileHelper.onEnd;
```
## Sharing with multiple users?
```javascript
fbr.readAsArrayBuffer(file, function(fileUUID) {
['first-user', 'second-user', 'third-user'].forEach(function(userid) {
fbr.getNextChunk(fileUUID, function(nextChunk, isLastChunk) {
specific_datachannel.send(nextChunk);
}, userid);
});
});
datachannel.onmessage = function(event) {
fbr.getNextChunk(message.uuid, function(nextChunk, isLastChunk) {
specific_datachannel.send(nextChunk);
}, specific_userid);
};
```
> Pass specific-userid as 3rd argument over `getNextChunk` method.
To uniquely identify progress-bars for each user, watch for `remoteUserId` object:
```javascript
FileHelper.onBegin = function(file) {
if(file.remoteUserId) {
// file is being shared with multiple users
}
};
FileHelper.onEnd = function(file) {
if(file.remoteUserId) {
// file is being shared with multiple users
}
};
FileHelper.onProgress = function(chunk) {
if(chunk.remoteUserId) {
// file is being shared with multiple users
}
};
```
## Advance Usages
```javascript
var fbr = new FileBufferReader();
fbr.readAsArrayBuffer(file, function(fileUUID) {
// don't call "getNextChunk"
// instead, try to process/use/acccess chunks yourself
var thisFileChunks = fbr.chunks[fileUUID];
var numberOfFileChunks = thisFileChunks[0].maxChunks;
var arrayOfRealBuffers = [];
for(var i = 1; i < numberOfFileChunks; i++) {
var fileChunk = thisFileChunks[i];
var realArrayBufferObject = fileChunk.buffer;
arrayOfRealBuffers.push(realArrayBufferObject);
}
var fileBlob = new Blob(realArrayBufferObject, {
type: thisFileChunks[0].type
});
var blobURL = URL.createObjectURL(fileBlob);
document.write('');
});
```
The structure of `fileBufferReader.chunks` object looks like this:
```javascript
fileBufferReader.chunks =
{
// "4152661527041346" is file-uuid
"4152661527041346":{
// "0" index helps firing "onStart" event.
"0":{
"currentPosition":0,
"uuid":"4152661527041346",
"maxChunks":20,
"size":298540,
"name":"WebRTC.png",
"type":"image/png",
"lastModifiedDate":"Wed Oct 14 2015 15:51:26 GMT+0500 (PKT)",
"start":true,
"userid":0,
"extra":{
"userid":0
}
},
// index "1" to "maxChunks" are the real file-chunks
"1":{
"uuid":"4152661527041346",
// this is the real ArrayBuffer object
"buffer":{},
"currentPosition":1,
"maxChunks":20,
"size":298540,
"name":"WebRTC.png",
"lastModifiedDate":"Wed Oct 14 2015 15:51:26 GMT+0500 (PKT)",
"type":"image/png",
"userid":0,
"extra":{
"userid":0
}
},
....
....
// this is the last file-chunk
// here "currentPosition===maxChunks"
"20":{
"uuid":"4152661527041346",
"buffer":{},
"currentPosition":20,
"maxChunks":20,
"size":298540,
"name":"WebRTC.png",
"lastModifiedDate":"Wed Oct 14 2015 15:51:26 GMT+0500 (PKT)",
"type":"image/png",
"userid":0,
"extra":{
"userid":0
}
},
// this one helps firing "onEnd" event
"21":{
"currentPosition":21,
"uuid":"4152661527041346",
"maxChunks":20,
"size":298540,
"name":"WebRTC.png",
"lastModifiedDate":"Wed Oct 14 2015 15:51:26 GMT+0500 (PKT)",
"url":"blob:http%3A//domain/fe5a20d0-cdb4-4f4e-9de7-1a14340fc402",
"type":"image/png",
"end":true,
"userid":0,
"extra":{
"userid":0
}
},
// this is optionally used to detect which chunk is being shared
// you should skip it.
"currentPosition":0
}
}
```
You can see that real file-chunks starts from `1` and ends before `length-1`.
E.g.
```javascript
var fileChunks = fbr.chunks['file-uuid'];
var allFileIndices = Object.keys(fileChunks);
var allFileBuffers = [];
for(var chunkIndex = 1; chunkIndex < allFileIndices.length; i++) {
var chunk = fileChunks[chunkIndex];
allFileBuffers.push(chunk.buffer);
}
```
# `FileSelector`
Provides methods to select single file, multiple files or entire directory.
**Select single file:**
```javascript
var selector = new FileSelector();
selector.accept = '*.png';
selector.selectSingleFile(function(file) {
alert(file.name);
}, function() {
alert('User did not select any file.');
});
```
**Select multiple files:**
```javascript
var selector = new FileSelector();
selector.accept = '*.png';
selector.selectMultipleFiles(function(files) {
files.forEach(function(file) {
alert(file.name);
});
}, function() {
alert('User did not select any file.');
});
```
**Select entire directory:**
```javascript
var selector = new FileSelector();
selector.accept = '*.png';
selector.selectDirectory(function(files) {
files.forEach(function(file) {
alert(file.webkitRelativePath);
});
}, function() {
alert('User did not select any file.');
});
```
# `FileConverter`
This global object exposes two methods:
1. `ConvertToArrayBuffer`
2. `ConvertToObject`
Here is how to use these methods:
```javascript
var yourObject = {
x: 0,
y: 1,
str: 'string',
bool: true
};
FileConverter.ConvertToArrayBuffer(yourObject, function(arrayBuffer) {
alert(arrayBuffer.byteLength);
// to convert back to "object"
FileConverter.ConvertToObject(arrayBuffer, function(yourObject) {
alert( JSON.stringify(yourObject) );
});
});
```
When you call `getNextChunk`, the `FileBufferReader` instance checks for `currentPosition` and returns buffer using following snippet:
```javascript
// this method explains insights of FileBufferReader
fbr.getNextChunk = function(fileUUId, callback) {
var fileChunks = fbr.chunks[fileUUID];
var currentPosition = fileChunks.currentPosition;
var nextChunk = fileChunks[currentPosition];
FileConverter.ConvertToArrayBuffer(nextChunk, function(buffer) {
// you can see that "callback" is passed two arguments
// 1) the converted buffer
// 2) "isLastChunk" boolean
callback(buffer, currentPosition == nextChunk.maxChunks);
});
};
// and your code calls above method as following;
fbr.getNextChunks('file-uuid', function(buffer) {
webrtc.channel.send(buffer);
});
```
## Applications using FileBufferReader
1. [RTCMultiConnection.js](https://githbu.com/RTCMultiConnection)
## RTCMultiConnection FileBufferReader Demos
1. https://rtcmulticonnection.herokuapp.com/demos/Audio+Video+TextChat+FileSharing.html
2. https://rtcmulticonnection.herokuapp.com/demos/TextChat+FileSharing.html
More demos here: https://rtcmulticonnection.herokuapp.com/demos/
## License
[FileBufferReader.js](https://github.com/muaz-khan/FileBufferReader) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.muazkhan.com/).
================================================
FILE: FileBufferReader/bower.json
================================================
{
"name": "fbr",
"preferGlobal": true,
"version": "2.0.8",
"author": {
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
"url": "http://www.muazkhan.com/"
},
"description": "FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io. Share files same as Skype do!",
"scripts": {
"start": "node FileBufferReader.js"
},
"main": "./FileBufferReader.js",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/FileBufferReader.git"
},
"keywords": [
"webrtc",
"file",
"file-sharing",
"datachannel",
"data-channels",
"file-reading",
"file-buffer",
"buffer",
"arraybuffer",
"buffers",
"chunkifier",
"fragmenter",
"library",
"javascript",
"webrtc-experiment",
"javascript-library",
"muaz",
"muaz-khan"
],
"analyze": false,
"license": "MIT",
"readmeFilename": "README.md",
"bugs": {
"url": "https://github.com/muaz-khan/FileBufferReader/issues",
"email": "muazkh@gmail.com"
},
"homepage": "https://www.WebRTC-Experiment.com/FileBufferReader/",
"_id": "fbr@",
"_from": "fbr@",
"devDependencies": {
"grunt": "0.4.5",
"grunt-bump": "0.7.0",
"grunt-cli": "0.1.13",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.8.2",
"grunt-contrib-uglify": "0.11.0",
"grunt-jsbeautifier": "0.2.10",
"grunt-replace": "0.11.0",
"load-grunt-tasks": "3.4.0"
}
}
================================================
FILE: FileBufferReader/demo/IceServersHandler.js
================================================
// IceServersHandler.js
var IceServersHandler = (function() {
function getIceServers(connection) {
// resiprocate: 3344+4433
// pions: 7575
var iceServers = [{
'urls': [
'stun:webrtcweb.com:7788', // coTURN
'stun:webrtcweb.com:7788?transport=udp', // coTURN
],
'username': 'muazkh',
'credential': 'muazkh'
},
{
'urls': [
'turn:webrtcweb.com:7788', // coTURN 7788+8877
'turn:webrtcweb.com:4455?transport=udp', // restund udp
'turn:webrtcweb.com:8877?transport=udp', // coTURN udp
'turn:webrtcweb.com:8877?transport=tcp', // coTURN tcp
],
'username': 'muazkh',
'credential': 'muazkh'
},
{
'urls': [
'stun:stun.l.google.com:19302',
'stun:stun.l.google.com:19302?transport=udp',
]
}
];
if (typeof window.InstallTrigger !== 'undefined') {
iceServers[0].urls = iceServers[0].urls.pop();
iceServers[1].urls = iceServers[1].urls.pop();
}
return iceServers;
}
return {
getIceServers: getIceServers
};
})();
================================================
FILE: FileBufferReader/demo/PeerConnection.js
================================================
// Last time updated at November 17, 2018
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Documentation - https://github.com/muaz-khan/FileBufferReader.js
// _________________
// PeerConnection.js
(function() {
window.PeerConnection = function(socketURL, userid) {
this.userid = userid || getToken();
this.peers = {};
if (!socketURL) throw 'Socket-URL is required.';
var signaler = new Signaler(this, socketURL);
var that = this;
this.send = function(data) {
var channel = answererDataChannel || offererDataChannel;
if (channel.readyState != 'open') {
return setTimeout(function() {
that.send(data);
}, 1000);
}
channel.send(data);
};
signaler.ondata = function(data) {
if (that.ondata) {
that.ondata(data);
}
};
this.onopen = function() {
console.log('DataChannel Opened.');
};
};
function Signaler(root, socketURL) {
var self = this;
root.startBroadcasting = function() {
(function transmit() {
socket.send({
userid: root.userid,
broadcasting: true
});
!self.participantFound && !self.stopBroadcasting && setTimeout(transmit, 3000);
})();
};
root.sendParticipationRequest = function(userid) {
socket.send({
participationRequest: true,
userid: root.userid,
to: userid
});
};
// if someone shared SDP
this.onsdp = function(message) {
var sdp = message.sdp;
if (sdp.type == 'offer') {
root.peers[message.userid] = Answer.createAnswer(merge(options, {
sdp: sdp
}));
}
if (sdp.type == 'answer') {
root.peers[message.userid].setRemoteDescription(sdp);
}
};
root.acceptRequest = function(userid) {
root.peers[userid] = Offer.createOffer(options);
};
// it is passed over Offer/Answer objects for reusability
var options = {
onsdp: function(sdp) {
socket.send({
userid: root.userid,
sdp: sdp,
to: root.participant
});
},
onicecandidate: function(candidate) {
socket.send({
userid: root.userid,
candidate: candidate,
to: root.participant
});
},
ondata: function(data) {
self.ondata(data);
},
onopen: function() {
root.onopen();
},
onclose: function(e) {
if (root.onclose) root.onclose(e);
},
onerror: function(e) {
if (root.onerror) root.onerror(e);
}
};
function closePeerConnections() {
self.stopBroadcasting = true;
for (var userid in root.peers) {
if(root.peers[userid] && root.peers[userid].peer) {
root.peers[userid].peer.close();
}
}
root.peers = {};
}
root.close = function() {
socket.send({
userLeft: true,
userid: root.userid,
to: root.participant
});
closePeerConnections();
};
window.onbeforeunload = function() {
root.close();
};
window.onkeyup = function(e) {
if (e.keyCode == 116) {
root.close();
}
};
// users who broadcasts themselves
var invokers = {},
peer;
function onmessage(e) {
var message = JSON.parse(e.data);
if (message.userid == root.userid) return;
root.participant = message.userid;
// for pretty logging
message.sdp && console.debug(JSON.stringify(message, function(key, value) {
console.log(value.sdp.type, '---', value.sdp.sdp);
}, '---'));
// if someone shared SDP
if (message.sdp && message.to == root.userid) {
self.onsdp(message);
}
// if someone shared ICE
if (message.candidate && message.to == root.userid) {
peer = root.peers[message.userid];
if (peer) peer.addIceCandidate(message.candidate);
}
// if someone sent participation request
if (message.participationRequest && message.to == root.userid) {
self.participantFound = true;
if (root.onParticipationRequest) {
root.onParticipationRequest(message.userid);
} else root.acceptRequest(message.userid);
}
// if someone is broadcasting himself!
if (message.broadcasting) {
if (!invokers[message.userid]) {
invokers[message.userid] = message;
if (root.onuserfound)
root.onuserfound(message.userid);
else
root.sendParticipationRequest(message.userid);
}
}
if (message.userLeft && message.to == root.userid) {
closePeerConnections();
}
}
var socket = socketURL;
if (typeof socketURL == 'string') {
socket = new WebSocket(socketURL);
socket.push = socket.send;
socket.send = function(data) {
if (socket.readyState != 1)
return setTimeout(function() {
socket.send(data);
}, 1000);
socket.push(JSON.stringify(data));
};
socket.onopen = function() {
console.log('websocket connection opened.');
};
}
socket.onmessage = onmessage;
}
var RTCPeerConnection;
if (typeof window.RTCPeerConnection !== 'undefined') {
RTCPeerConnection = window.RTCPeerConnection;
} else if (typeof mozRTCPeerConnection !== 'undefined') {
RTCPeerConnection = mozRTCPeerConnection;
} else if (typeof webkitRTCPeerConnection !== 'undefined') {
RTCPeerConnection = webkitRTCPeerConnection;
}
var RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription;
var RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate;
var isChrome = !!navigator.webkitGetUserMedia;
var iceServers = {
iceServers: IceServersHandler.getIceServers(),
iceTransportPolicy: 'all'
};
var optionalArgument = {
optional: [{
DtlsSrtpKeyAgreement: true
}, {
googImprovedWifiBwe: true
}, {
googScreencastMinBitrate: 300
}, {
googIPv6: true
}, {
googDscp: true
}, {
googCpuUnderuseThreshold: 55
}, {
googCpuOveruseThreshold: 85
}, {
googSuspendBelowMinBitrate: true
}, {
googCpuOveruseDetection: true
}],
mandatory: {}
};
var offerAnswerConstraints = {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false,
optional: [],
mandatory: {
OfferToReceiveAudio: false,
OfferToReceiveVideo: false
}
};
function getToken() {
if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
var a = window.crypto.getRandomValues(new Uint32Array(3)),
token = '';
for (var i = 0, l = a.length; i < l; i++) {
token += a[i].toString(36);
}
return token;
} else {
return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
}
}
function setChannelEvents(channel, config) {
channel.binaryType = 'arraybuffer';
channel.onmessage = function(event) {
config.ondata(event.data);
};
channel.onopen = function() {
config.onopen();
};
channel.onerror = function(e) {
config.onerror(e);
};
channel.onclose = function(e) {
config.onclose(e);
};
}
var dataChannelDict = {};
var offererDataChannel;
var Offer = {
createOffer: function(config) {
var peer = new RTCPeerConnection(iceServers, optionalArgument);
var self = this;
self.config = config;
peer.onicecandidate = function(event) {
if (event.candidate && event.candidate.candidate) {
config.onicecandidate(event.candidate);
}
};
peer.onsignalingstatechange = function() {
console.log('onsignalingstatechange:', JSON.stringify({
iceGatheringState: peer.iceGatheringState,
signalingState: peer.signalingState,
iceConnectionState: peer.iceConnectionState
}));
if (peer.iceConnectionState.search(/closed|failed/gi) !== -1) {
config.onclose();
}
};
peer.oniceconnectionstatechange = function() {
console.log('oniceconnectionstatechange:', JSON.stringify({
iceGatheringState: peer.iceGatheringState,
signalingState: peer.signalingState,
iceConnectionState: peer.iceConnectionState
}));
if (peer.iceConnectionState.search(/closed|failed/gi) !== -1) {
config.onclose();
}
};
this.createDataChannel(peer);
window.peer = peer;
peer.createOffer(offerAnswerConstraints).then(function(sdp) {
peer.setLocalDescription(sdp).then(function() {
config.onsdp(sdp);
});
}).catch(onSdpError);
this.peer = peer;
return this;
},
setRemoteDescription: function(sdp) {
this.peer.setRemoteDescription(new RTCSessionDescription(sdp));
},
addIceCandidate: function(candidate) {
this.peer.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: candidate.sdpMLineIndex,
candidate: candidate.candidate
}));
},
createDataChannel: function(peer) {
offererDataChannel = (this.peer || peer).createDataChannel('channel', dataChannelDict);
setChannelEvents(offererDataChannel, this.config);
}
};
var answererDataChannel;
var Answer = {
createAnswer: function(config) {
var peer = new RTCPeerConnection(iceServers, optionalArgument);
var self = this;
self.config = config;
peer.ondatachannel = function(event) {
answererDataChannel = event.channel;
setChannelEvents(answererDataChannel, config);
};
peer.onicecandidate = function(event) {
if (event.candidate)
config.onicecandidate(event.candidate);
};
peer.onsignalingstatechange = function() {
console.log('onsignalingstatechange:', JSON.stringify({
iceGatheringState: peer.iceGatheringState,
signalingState: peer.signalingState
}));
};
peer.oniceconnectionstatechange = function() {
console.log('oniceconnectionstatechange:', JSON.stringify({
iceGatheringState: peer.iceGatheringState,
signalingState: peer.signalingState
}));
};
peer.setRemoteDescription(new RTCSessionDescription(config.sdp)).then(function() {
peer.createAnswer(offerAnswerConstraints).then(function(sdp) {
peer.setLocalDescription(sdp).then(function() {
config.onsdp(sdp);
});
}).catch(onSdpError);
});
this.peer = peer;
return self;
},
addIceCandidate: function(candidate) {
this.peer.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: candidate.sdpMLineIndex,
candidate: candidate.candidate
}));
},
createDataChannel: function(peer) {
answererDataChannel = (this.peer || peer).createDataChannel('channel', dataChannelDict);
setChannelEvents(answererDataChannel, this.config);
}
};
function merge(mergein, mergeto) {
for (var t in mergeto) {
mergein[t] = mergeto[t];
}
return mergein;
}
function useless() {}
function onSdpError(e) {
console.error(e);
}
})();
================================================
FILE: FileBufferReader/demo/PeerUI.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Source Code - https://github.com/muaz-khan/FileBufferReader
// _________
// PeerUI.js
window.addEventListener('load', function() {
var setupOffer = document.getElementById('setup-offer'),
innerHTML;
var SIGNALING_URI = 'wss://websocket-over-nodejs.herokuapp.com:443/';
var SIGNALING_URI = 'wss://webrtcweb.com:9449/';
var channel = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
if (location.hash && location.hash.length > 2) {
channel = location.hash.replace('#', '');
}
var websocket = new WebSocket(SIGNALING_URI);
websocket.onopen = function() {
var innerHTML = 'Setup WebRTC Connection';
setupOffer.innerHTML = innerHTML;
setupOffer.disabled = false;
websocket.push(JSON.stringify({
open: true,
channel: channel
}));
var info = document.getElementById('info');
if (location.hash.length > 2) {
document.getElementById('share-this-link').innerHTML = 'Share this link with other users!';
info.innerHTML = 'Your UNIQUE room-id is: ' + location.hash.replace('#', '') + '.
Open same URL on a new window or tab.'; info.style.display = 'block'; } }; websocket.push = websocket.send; websocket.send = function(data) { if (websocket.readyState != 1) { console.warn('websocket connection is not opened yet.'); return setTimeout(function() { websocket.send(data); }, 1000); } websocket.push(JSON.stringify({ data: data, channel: channel })); }; var progressHelper = {}; var outputPanel = document.querySelector('.output-panel'); function previewFile(file) { try { file.url = URL.createObjectURL(fileSelector.lastSelectedFile || file); } catch (e) { return; } var fname = ''; if (file.extra && file.extra.webkitRelativePath) { fname = file.extra.webkitRelativePath; } else { fname = file.name; } var html = 'Download ' + fname + ' on your Disk!'; html += ''; if (file.name.match(/\.jpg|\.png|\.jpeg|\.gif/gi)) { html += '
';
} else if (file.name.match(/\.wav|\.mp3/gi)) {
html += '';
} else if (file.name.match(/\.webm|\.flv|\.mp4/gi)) {
html += '';
} else if (file.name.match(/\.js|\.txt|\.sh/gi)) {
html += '';
html += '
'; } progressHelper[file.uuid].div.innerHTML = html; fileSelector.lastSelectedFile = false; } var FileHelper = { onBegin: function(file) { var div = document.createElement('div'); var fName = ''; if (file.extra && file.extra.webkitRelativePath) { fName = file.extra.webkitRelativePath; } else { fName = file.name; } var html = '
Latency in millseconds: ' + timeElapsed + ' (Average): ' + avg + ''; var remainingFileSize = singleChunkSize * (lastChunk.maxChunks - lastChunk.currentPosition); progressHelper.startedAt = (new Date).getTime(); itemsRemaining.innerHTML = (lastChunk.maxChunks - lastChunk.currentPosition); sizeRemaining.innerHTML = bytesToSize(remainingFileSize); timeRemaining.innerHTML = tRemaining; }; } else { btnSelectFile.innerHTML = 'Single'; btnSelectDirectory.innerHTML = 'Directory'; btnSelectMultiple.innerHTML = 'Multiple'; if (peerConnection.isOpened) { btnSelectFile.disabled = false; btnSelectDirectory.disabled = false; btnSelectMultiple.disabled = false; } } } }; // RTCPeerConection // ---------------- var peerConnection = new PeerConnection(websocket); peerConnection.onuserfound = function(userid) { setupOffer.innerHTML = 'Detecting other users...'; setupOffer.disabled = true; peerConnection.sendParticipationRequest(userid); }; peerConnection.onopen = function() { peerConnection.isOpened = true; innerHTML = 'PeerConnection is established.'; setupOffer.innerHTML = innerHTML; setupOffer.disabled = true; btnSelectFile.disabled = false; btnSelectFile.innerHTML = 'Single'; btnSelectDirectory.disabled = false; btnSelectDirectory.innerHTML = 'Directory'; btnSelectMultiple.disabled = false; btnSelectMultiple.innerHTML = 'Multiple'; }; peerConnection.onclose = function() { onCloseOrOnError('PeerConnection is closed.'); resetButtons(); peerConnection.isOpened = false; var helper = progressHelper[progressHelper.lastFileUUID]; if (helper && helper.div && helper.div.parentNode) { isStoppedTimer = true; helper.div.parentNode.removeChild(helper.div); } }; function resetButtons() { btnSelectFile.innerHTML = 'Single'; btnSelectFile.disabled = true; btnSelectDirectory.innerHTML = 'Directory'; btnSelectDirectory.disabled = true; btnSelectMultiple.innerHTML = 'Multiple'; btnSelectMultiple.disabled = true; setupOffer.disabled = false; setupOffer.innerHTML = 'Setup WebRTC Connection'; } peerConnection.onerror = function() { onCloseOrOnError('Something went wrong.'); resetButtons(); }; // getNextChunkCallback gets next available buffer // you need to send that buffer using WebRTC data channels function getNextChunkCallback(nextChunk, isLastChunk) { if (isLastChunk) { // alert('File Successfully sent.'); } // sending using WebRTC data channels peerConnection.send(nextChunk); }; peerConnection.ondata = function(chunk) { if(typeof chunk === 'string' && chunk.indexOf('stopped:::') !== -1) { var div = document.getElementById(chunk.split('stopped:::')[1]); if(div && div.parentNode) { div.parentNode.removeChild(div); } isStoppedTimer = true; return; } if(typeof chunk === 'string' && chunk.indexOf('paused:::') !== -1) { var div = document.getElementById(chunk.split('paused:::')[1]); if(div && div.querySelector('.btn-pause')) { div.querySelector('.btn-pause').style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/resume-icon.png)'; } isPausedTimer = true; return; } if(typeof chunk === 'string' && chunk.indexOf('resumed:::') !== -1) { var div = document.getElementById(chunk.split('resumed:::')[1]); if(div && div.querySelector('.btn-pause')) { div.querySelector('.btn-pause').style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/pause-icon.png)'; } isPausedTimer = false; return; } if (chunk instanceof ArrayBuffer || chunk instanceof DataView) { // array buffers are passed using WebRTC data channels // need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) { peerConnection.ondata(object); }); return; } // if target user requested next chunk if (chunk.readyForNextChunk) { if(peerConnection.paused) { peerConnection.resumeCallback = function() { fileBufferReader.getNextChunk(chunk, getNextChunkCallback); }; return; } if(peerConnection.stopCallback) { peerConnection.stopCallback(); return; } fileBufferReader.getNextChunk(chunk /*aka metadata*/ , getNextChunkCallback); return; } // if any of the chunks missed if (chunk.chunkMissing) { fileBufferReader.chunkMissing(chunk); return; } // if chunk is received fileBufferReader.addChunk(chunk, function(promptNextChunk) { // request next chunk if(peerConnection.paused) { peerConnection.resumeCallback = function() { peerConnection.send(promptNextChunk); }; return; } if(peerConnection.stopCallback) { peerConnection.stopCallback(); return; } peerConnection.send(promptNextChunk); }); }; var progressIterations = 0; var ONE_SECOND = 1000; function resetTimeCalculator() { progressIterations = 0; isStoppedTimer = false; progressHelper.callback = function() {}; progressHelper.latencies = []; } function calculateAverage(arr) { var sum = 0; for (var i = 0; i < arr.length; i++) { sum += parseInt(arr[i], 10); //don't forget to add the base } var avg = sum / arr.length; return avg.toFixed(1); } var isStoppedTimer = false; var isPausedTimer = false; // https://github.com/23/resumable.js/issues/168#issuecomment-65297110 function timeCalculator(progress, selfInvoker) { if (isStoppedTimer) return; var step = 1; var remainingProgress = 1.0 - progress.position; var estimatedCompletionTime = Math.round((remainingProgress / progress.position) * progressIterations); var estimatedHours, estimatedMinutes, estimatedSeconds, displayHours, displayMinutes, displaySeconds; progressIterations += step; if (progress.position < 1.0) { if (isFinite(estimatedCompletionTime)) { estimatedHours = Math.floor(estimatedCompletionTime / 3600); displayHours = estimatedHours > 9 ? estimatedHours : '0' + estimatedHours; estimatedMinutes = Math.floor((estimatedCompletionTime / 60) % 60); displayMinutes = estimatedMinutes > 9 ? estimatedMinutes : '0' + estimatedMinutes; estimatedSeconds = estimatedCompletionTime % 60; displaySeconds = estimatedSeconds > 9 ? estimatedSeconds : '0' + estimatedSeconds; } var output = ''; if (displayHours > 0) { output += displayHours + ' hours '; } if (displayMinutes > 0) { output += displayMinutes + ' minutes '; } if (displaySeconds > 0) { output += displaySeconds + ' seconds '; } if (output.length && !isPausedTimer) { progressHelper.callback(output); } } setTimeout(function() { timeCalculator(progress, true); }, step * ONE_SECOND); } // ------------------------- // using FileBufferReader.js var fileSelector = new FileSelector(); // you can force specific files e.g. // image/png, image/*, image/jpeg, video/webm, audio/ogg etc. fileSelector.accept = '*.*'; var fileBufferReader = new FileBufferReader(); fileBufferReader.chunkSize = 60 * 1000; // 60k fileBufferReader.onBegin = FileHelper.onBegin; fileBufferReader.onProgress = FileHelper.onProgress; fileBufferReader.onEnd = FileHelper.onEnd; function onFileSelected(file) { fileSelector.lastSelectedFile = file; if (filesRemaining.files) { if (filesRemaining.directory) { btnSelectDirectory.innerHTML = 'Please wait..'; btnSelectDirectory.disabled = true; } else { btnSelectMultiple.innerHTML = 'Please wait..'; btnSelectMultiple.disabled = true; } } else { btnSelectFile.innerHTML = 'Please wait..';; btnSelectFile.disabled = true; } fileBufferReader.readAsArrayBuffer(file, function(metadata) { fileBufferReader.getNextChunk(metadata, getNextChunkCallback); }, { chunkSize: fileBufferReader.chunkSize, webkitRelativePath: file.webkitRelativePath || file.name }); setTimeout(function() { if (fileSelector.lastSelectedFile) return; btnSelectFile.innerHTML = 'Single'; btnSelectFile.disabled = false; btnSelectDirectory.innerHTML = 'Directory'; btnSelectDirectory.disabled = false; btnSelectMultiple.innerHTML = 'Multiple'; btnSelectMultiple.disabled = false; }, 5000); } var btnSelectFile = document.getElementById('select-file'); btnSelectFile.onclick = function() { btnSelectFile.disabled = true; fileSelector.selectSingleFile(function(file) { onFileSelected(file); }, onNoFileSelected); }; var btnSelectMultiple = document.getElementById('select-multiple'); btnSelectMultiple.onclick = function() { btnSelectMultiple.disabled = true; fileSelector.selectMultipleFiles(function(files) { filesRemaining = { files: files, idx: 0 }; sendEntireDirectory(); }, onNoFileSelected); }; var btnSelectDirectory = document.getElementById('select-directory'); btnSelectDirectory.onclick = function() { btnSelectDirectory.disabled = true; fileSelector.selectDirectory(function(files) { filesRemaining = { files: files, idx: 0, directory: true }; sendEntireDirectory(); }, onNoFileSelected); }; function onNoFileSelected() { peerConnection.onopen(); } var filesRemaining = 'none'; function sendEntireDirectory() { if (filesRemaining === 'none') return; if (!filesRemaining.files[filesRemaining.idx]) { filesRemaining = 'none'; return; } onFileSelected(filesRemaining.files[filesRemaining.idx]); } // drag-drop support function onDragOver() { mainContainer.style.border = '7px solid #98a90f'; mainContainer.style.background = '#ffff13'; mainContainer.style.borderRadisu = '16px'; } function onDragLeave() { mainContainer.style.border = '1px solid rgb(189, 189, 189)'; mainContainer.style.background = 'transparent'; mainContainer.style.borderRadisu = 0; } var mainContainer = document.getElementById('main-container'); document.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragLeave(); }, false); document.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; onDragLeave(); if (!e.dataTransfer.files || !e.dataTransfer.files.length) { return; } var file = e.dataTransfer.files[0]; filesRemaining = { files: e.dataTransfer.files, idx: 0 }; if (!peerConnection || !peerConnection.isOpened) { alert('Pleas setup WebRTC connection before sharing this file.'); return; } onFileSelected(file); }, false); // -------------------------------------------------------- setupOffer.onclick = function(event) { if (event !== true) { peerConnection.startBroadcasting(); } setupOffer.innerHTML = 'Detecting other users in this room...'; setupOffer.disabled = true; setTimeout(function() { if (!peerConnection.isOpened) { var innerHTML = 'I am alone in this room.'; setupOffer.innerHTML = innerHTML; setTimeout(function() { setupOffer.onclick(true); }, 2000); } }, 5 * 1000); }; function onCloseOrOnError(_innerHTML) { innerHTML = _innerHTML; setupOffer.innerHTML = innerHTML; setupOffer.disabled = false; setupOffer.className = 'button'; setTimeout(function() { innerHTML = 'Setup WebRTC Connection'; setupOffer.innerHTML = innerHTML; setupOffer.disabled = false; }, 1000); btnSelectFile.disabled = true; btnSelectDirectory.disabled = true; btnSelectMultiple.disabled = true; } function millsecondsToSeconds(millis) { var seconds = ((millis % 60000) / 1000).toFixed(1); return seconds; } function bytesToSize(bytes) { var k = 1000; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) { return '0 Bytes'; } var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } function getToken() { if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) { var a = window.crypto.getRandomValues(new Uint32Array(3)), token = ''; for (var i = 0, l = a.length; i < l; i++) { token += a[i].toString(36); } return token; } else { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } } }, false); ================================================ FILE: FileBufferReader/demo/adapter-latest.js ================================================ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.adapter = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i= 14393 &&
url.indexOf('?transport=udp') === -1;
});
delete server.url;
server.urls = isString ? urls[0] : urls;
return !!urls.length;
}
});
}
// Determines the intersection of local and remote capabilities.
function getCommonCapabilities(localCapabilities, remoteCapabilities) {
var commonCapabilities = {
codecs: [],
headerExtensions: [],
fecMechanisms: []
};
var findCodecByPayloadType = function(pt, codecs) {
pt = parseInt(pt, 10);
for (var i = 0; i < codecs.length; i++) {
if (codecs[i].payloadType === pt ||
codecs[i].preferredPayloadType === pt) {
return codecs[i];
}
}
};
var rtxCapabilityMatches = function(lRtx, rRtx, lCodecs, rCodecs) {
var lCodec = findCodecByPayloadType(lRtx.parameters.apt, lCodecs);
var rCodec = findCodecByPayloadType(rRtx.parameters.apt, rCodecs);
return lCodec && rCodec &&
lCodec.name.toLowerCase() === rCodec.name.toLowerCase();
};
localCapabilities.codecs.forEach(function(lCodec) {
for (var i = 0; i < remoteCapabilities.codecs.length; i++) {
var rCodec = remoteCapabilities.codecs[i];
if (lCodec.name.toLowerCase() === rCodec.name.toLowerCase() &&
lCodec.clockRate === rCodec.clockRate) {
if (lCodec.name.toLowerCase() === 'rtx' &&
lCodec.parameters && rCodec.parameters.apt) {
// for RTX we need to find the local rtx that has a apt
// which points to the same local codec as the remote one.
if (!rtxCapabilityMatches(lCodec, rCodec,
localCapabilities.codecs, remoteCapabilities.codecs)) {
continue;
}
}
rCodec = JSON.parse(JSON.stringify(rCodec)); // deepcopy
// number of channels is the highest common number of channels
rCodec.numChannels = Math.min(lCodec.numChannels,
rCodec.numChannels);
// push rCodec so we reply with offerer payload type
commonCapabilities.codecs.push(rCodec);
// determine common feedback mechanisms
rCodec.rtcpFeedback = rCodec.rtcpFeedback.filter(function(fb) {
for (var j = 0; j < lCodec.rtcpFeedback.length; j++) {
if (lCodec.rtcpFeedback[j].type === fb.type &&
lCodec.rtcpFeedback[j].parameter === fb.parameter) {
return true;
}
}
return false;
});
// FIXME: also need to determine .parameters
// see https://github.com/openpeer/ortc/issues/569
break;
}
}
});
localCapabilities.headerExtensions.forEach(function(lHeaderExtension) {
for (var i = 0; i < remoteCapabilities.headerExtensions.length;
i++) {
var rHeaderExtension = remoteCapabilities.headerExtensions[i];
if (lHeaderExtension.uri === rHeaderExtension.uri) {
commonCapabilities.headerExtensions.push(rHeaderExtension);
break;
}
}
});
// FIXME: fecMechanisms
return commonCapabilities;
}
// is action=setLocalDescription with type allowed in signalingState
function isActionAllowedInSignalingState(action, type, signalingState) {
return {
offer: {
setLocalDescription: ['stable', 'have-local-offer'],
setRemoteDescription: ['stable', 'have-remote-offer']
},
answer: {
setLocalDescription: ['have-remote-offer', 'have-local-pranswer'],
setRemoteDescription: ['have-local-offer', 'have-remote-pranswer']
}
}[type][action].indexOf(signalingState) !== -1;
}
function maybeAddCandidate(iceTransport, candidate) {
// Edge's internal representation adds some fields therefore
// not all fieldѕ are taken into account.
var alreadyAdded = iceTransport.getRemoteCandidates()
.find(function(remoteCandidate) {
return candidate.foundation === remoteCandidate.foundation &&
candidate.ip === remoteCandidate.ip &&
candidate.port === remoteCandidate.port &&
candidate.priority === remoteCandidate.priority &&
candidate.protocol === remoteCandidate.protocol &&
candidate.type === remoteCandidate.type;
});
if (!alreadyAdded) {
iceTransport.addRemoteCandidate(candidate);
}
return !alreadyAdded;
}
function makeError(name, description) {
var e = new Error(description);
e.name = name;
// legacy error codes from https://heycam.github.io/webidl/#idl-DOMException-error-names
e.code = {
NotSupportedError: 9,
InvalidStateError: 11,
InvalidAccessError: 15,
TypeError: undefined,
OperationError: undefined
}[name];
return e;
}
module.exports = function(window, edgeVersion) {
// https://w3c.github.io/mediacapture-main/#mediastream
// Helper function to add the track to the stream and
// dispatch the event ourselves.
function addTrackToStreamAndFireEvent(track, stream) {
stream.addTrack(track);
stream.dispatchEvent(new window.MediaStreamTrackEvent('addtrack',
{track: track}));
}
function removeTrackFromStreamAndFireEvent(track, stream) {
stream.removeTrack(track);
stream.dispatchEvent(new window.MediaStreamTrackEvent('removetrack',
{track: track}));
}
function fireAddTrack(pc, track, receiver, streams) {
var trackEvent = new Event('track');
trackEvent.track = track;
trackEvent.receiver = receiver;
trackEvent.transceiver = {receiver: receiver};
trackEvent.streams = streams;
window.setTimeout(function() {
pc._dispatchEvent('track', trackEvent);
});
}
var RTCPeerConnection = function(config) {
var pc = this;
var _eventTarget = document.createDocumentFragment();
['addEventListener', 'removeEventListener', 'dispatchEvent']
.forEach(function(method) {
pc[method] = _eventTarget[method].bind(_eventTarget);
});
this.canTrickleIceCandidates = null;
this.needNegotiation = false;
this.localStreams = [];
this.remoteStreams = [];
this._localDescription = null;
this._remoteDescription = null;
this.signalingState = 'stable';
this.iceConnectionState = 'new';
this.connectionState = 'new';
this.iceGatheringState = 'new';
config = JSON.parse(JSON.stringify(config || {}));
this.usingBundle = config.bundlePolicy === 'max-bundle';
if (config.rtcpMuxPolicy === 'negotiate') {
throw(makeError('NotSupportedError',
'rtcpMuxPolicy \'negotiate\' is not supported'));
} else if (!config.rtcpMuxPolicy) {
config.rtcpMuxPolicy = 'require';
}
switch (config.iceTransportPolicy) {
case 'all':
case 'relay':
break;
default:
config.iceTransportPolicy = 'all';
break;
}
switch (config.bundlePolicy) {
case 'balanced':
case 'max-compat':
case 'max-bundle':
break;
default:
config.bundlePolicy = 'balanced';
break;
}
config.iceServers = filterIceServers(config.iceServers || [], edgeVersion);
this._iceGatherers = [];
if (config.iceCandidatePoolSize) {
for (var i = config.iceCandidatePoolSize; i > 0; i--) {
this._iceGatherers.push(new window.RTCIceGatherer({
iceServers: config.iceServers,
gatherPolicy: config.iceTransportPolicy
}));
}
} else {
config.iceCandidatePoolSize = 0;
}
this._config = config;
// per-track iceGathers, iceTransports, dtlsTransports, rtpSenders, ...
// everything that is needed to describe a SDP m-line.
this.transceivers = [];
this._sdpSessionId = SDPUtils.generateSessionId();
this._sdpSessionVersion = 0;
this._dtlsRole = undefined; // role for a=setup to use in answers.
this._isClosed = false;
};
Object.defineProperty(RTCPeerConnection.prototype, 'localDescription', {
configurable: true,
get: function() {
return this._localDescription;
}
});
Object.defineProperty(RTCPeerConnection.prototype, 'remoteDescription', {
configurable: true,
get: function() {
return this._remoteDescription;
}
});
// set up event handlers on prototype
RTCPeerConnection.prototype.onicecandidate = null;
RTCPeerConnection.prototype.onaddstream = null;
RTCPeerConnection.prototype.ontrack = null;
RTCPeerConnection.prototype.onremovestream = null;
RTCPeerConnection.prototype.onsignalingstatechange = null;
RTCPeerConnection.prototype.oniceconnectionstatechange = null;
RTCPeerConnection.prototype.onconnectionstatechange = null;
RTCPeerConnection.prototype.onicegatheringstatechange = null;
RTCPeerConnection.prototype.onnegotiationneeded = null;
RTCPeerConnection.prototype.ondatachannel = null;
RTCPeerConnection.prototype._dispatchEvent = function(name, event) {
if (this._isClosed) {
return;
}
this.dispatchEvent(event);
if (typeof this['on' + name] === 'function') {
this['on' + name](event);
}
};
RTCPeerConnection.prototype._emitGatheringStateChange = function() {
var event = new Event('icegatheringstatechange');
this._dispatchEvent('icegatheringstatechange', event);
};
RTCPeerConnection.prototype.getConfiguration = function() {
return this._config;
};
RTCPeerConnection.prototype.getLocalStreams = function() {
return this.localStreams;
};
RTCPeerConnection.prototype.getRemoteStreams = function() {
return this.remoteStreams;
};
// internal helper to create a transceiver object.
// (which is not yet the same as the WebRTC 1.0 transceiver)
RTCPeerConnection.prototype._createTransceiver = function(kind, doNotAdd) {
var hasBundleTransport = this.transceivers.length > 0;
var transceiver = {
track: null,
iceGatherer: null,
iceTransport: null,
dtlsTransport: null,
localCapabilities: null,
remoteCapabilities: null,
rtpSender: null,
rtpReceiver: null,
kind: kind,
mid: null,
sendEncodingParameters: null,
recvEncodingParameters: null,
stream: null,
associatedRemoteMediaStreams: [],
wantReceive: true
};
if (this.usingBundle && hasBundleTransport) {
transceiver.iceTransport = this.transceivers[0].iceTransport;
transceiver.dtlsTransport = this.transceivers[0].dtlsTransport;
} else {
var transports = this._createIceAndDtlsTransports();
transceiver.iceTransport = transports.iceTransport;
transceiver.dtlsTransport = transports.dtlsTransport;
}
if (!doNotAdd) {
this.transceivers.push(transceiver);
}
return transceiver;
};
RTCPeerConnection.prototype.addTrack = function(track, stream) {
if (this._isClosed) {
throw makeError('InvalidStateError',
'Attempted to call addTrack on a closed peerconnection.');
}
var alreadyExists = this.transceivers.find(function(s) {
return s.track === track;
});
if (alreadyExists) {
throw makeError('InvalidAccessError', 'Track already exists.');
}
var transceiver;
for (var i = 0; i < this.transceivers.length; i++) {
if (!this.transceivers[i].track &&
this.transceivers[i].kind === track.kind) {
transceiver = this.transceivers[i];
}
}
if (!transceiver) {
transceiver = this._createTransceiver(track.kind);
}
this._maybeFireNegotiationNeeded();
if (this.localStreams.indexOf(stream) === -1) {
this.localStreams.push(stream);
}
transceiver.track = track;
transceiver.stream = stream;
transceiver.rtpSender = new window.RTCRtpSender(track,
transceiver.dtlsTransport);
return transceiver.rtpSender;
};
RTCPeerConnection.prototype.addStream = function(stream) {
var pc = this;
if (edgeVersion >= 15025) {
stream.getTracks().forEach(function(track) {
pc.addTrack(track, stream);
});
} else {
// Clone is necessary for local demos mostly, attaching directly
// to two different senders does not work (build 10547).
// Fixed in 15025 (or earlier)
var clonedStream = stream.clone();
stream.getTracks().forEach(function(track, idx) {
var clonedTrack = clonedStream.getTracks()[idx];
track.addEventListener('enabled', function(event) {
clonedTrack.enabled = event.enabled;
});
});
clonedStream.getTracks().forEach(function(track) {
pc.addTrack(track, clonedStream);
});
}
};
RTCPeerConnection.prototype.removeTrack = function(sender) {
if (this._isClosed) {
throw makeError('InvalidStateError',
'Attempted to call removeTrack on a closed peerconnection.');
}
if (!(sender instanceof window.RTCRtpSender)) {
throw new TypeError('Argument 1 of RTCPeerConnection.removeTrack ' +
'does not implement interface RTCRtpSender.');
}
var transceiver = this.transceivers.find(function(t) {
return t.rtpSender === sender;
});
if (!transceiver) {
throw makeError('InvalidAccessError',
'Sender was not created by this connection.');
}
var stream = transceiver.stream;
transceiver.rtpSender.stop();
transceiver.rtpSender = null;
transceiver.track = null;
transceiver.stream = null;
// remove the stream from the set of local streams
var localStreams = this.transceivers.map(function(t) {
return t.stream;
});
if (localStreams.indexOf(stream) === -1 &&
this.localStreams.indexOf(stream) > -1) {
this.localStreams.splice(this.localStreams.indexOf(stream), 1);
}
this._maybeFireNegotiationNeeded();
};
RTCPeerConnection.prototype.removeStream = function(stream) {
var pc = this;
stream.getTracks().forEach(function(track) {
var sender = pc.getSenders().find(function(s) {
return s.track === track;
});
if (sender) {
pc.removeTrack(sender);
}
});
};
RTCPeerConnection.prototype.getSenders = function() {
return this.transceivers.filter(function(transceiver) {
return !!transceiver.rtpSender;
})
.map(function(transceiver) {
return transceiver.rtpSender;
});
};
RTCPeerConnection.prototype.getReceivers = function() {
return this.transceivers.filter(function(transceiver) {
return !!transceiver.rtpReceiver;
})
.map(function(transceiver) {
return transceiver.rtpReceiver;
});
};
RTCPeerConnection.prototype._createIceGatherer = function(sdpMLineIndex,
usingBundle) {
var pc = this;
if (usingBundle && sdpMLineIndex > 0) {
return this.transceivers[0].iceGatherer;
} else if (this._iceGatherers.length) {
return this._iceGatherers.shift();
}
var iceGatherer = new window.RTCIceGatherer({
iceServers: this._config.iceServers,
gatherPolicy: this._config.iceTransportPolicy
});
Object.defineProperty(iceGatherer, 'state',
{value: 'new', writable: true}
);
this.transceivers[sdpMLineIndex].bufferedCandidateEvents = [];
this.transceivers[sdpMLineIndex].bufferCandidates = function(event) {
var end = !event.candidate || Object.keys(event.candidate).length === 0;
// polyfill since RTCIceGatherer.state is not implemented in
// Edge 10547 yet.
iceGatherer.state = end ? 'completed' : 'gathering';
if (pc.transceivers[sdpMLineIndex].bufferedCandidateEvents !== null) {
pc.transceivers[sdpMLineIndex].bufferedCandidateEvents.push(event);
}
};
iceGatherer.addEventListener('localcandidate',
this.transceivers[sdpMLineIndex].bufferCandidates);
return iceGatherer;
};
// start gathering from an RTCIceGatherer.
RTCPeerConnection.prototype._gather = function(mid, sdpMLineIndex) {
var pc = this;
var iceGatherer = this.transceivers[sdpMLineIndex].iceGatherer;
if (iceGatherer.onlocalcandidate) {
return;
}
var bufferedCandidateEvents =
this.transceivers[sdpMLineIndex].bufferedCandidateEvents;
this.transceivers[sdpMLineIndex].bufferedCandidateEvents = null;
iceGatherer.removeEventListener('localcandidate',
this.transceivers[sdpMLineIndex].bufferCandidates);
iceGatherer.onlocalcandidate = function(evt) {
if (pc.usingBundle && sdpMLineIndex > 0) {
// if we know that we use bundle we can drop candidates with
// ѕdpMLineIndex > 0. If we don't do this then our state gets
// confused since we dispose the extra ice gatherer.
return;
}
var event = new Event('icecandidate');
event.candidate = {sdpMid: mid, sdpMLineIndex: sdpMLineIndex};
var cand = evt.candidate;
// Edge emits an empty object for RTCIceCandidateComplete‥
var end = !cand || Object.keys(cand).length === 0;
if (end) {
// polyfill since RTCIceGatherer.state is not implemented in
// Edge 10547 yet.
if (iceGatherer.state === 'new' || iceGatherer.state === 'gathering') {
iceGatherer.state = 'completed';
}
} else {
if (iceGatherer.state === 'new') {
iceGatherer.state = 'gathering';
}
// RTCIceCandidate doesn't have a component, needs to be added
cand.component = 1;
// also the usernameFragment. TODO: update SDP to take both variants.
cand.ufrag = iceGatherer.getLocalParameters().usernameFragment;
var serializedCandidate = SDPUtils.writeCandidate(cand);
event.candidate = Object.assign(event.candidate,
SDPUtils.parseCandidate(serializedCandidate));
event.candidate.candidate = serializedCandidate;
event.candidate.toJSON = function() {
return {
candidate: event.candidate.candidate,
sdpMid: event.candidate.sdpMid,
sdpMLineIndex: event.candidate.sdpMLineIndex,
usernameFragment: event.candidate.usernameFragment
};
};
}
// update local description.
var sections = SDPUtils.getMediaSections(pc._localDescription.sdp);
if (!end) {
sections[event.candidate.sdpMLineIndex] +=
'a=' + event.candidate.candidate + '\r\n';
} else {
sections[event.candidate.sdpMLineIndex] +=
'a=end-of-candidates\r\n';
}
pc._localDescription.sdp =
SDPUtils.getDescription(pc._localDescription.sdp) +
sections.join('');
var complete = pc.transceivers.every(function(transceiver) {
return transceiver.iceGatherer &&
transceiver.iceGatherer.state === 'completed';
});
if (pc.iceGatheringState !== 'gathering') {
pc.iceGatheringState = 'gathering';
pc._emitGatheringStateChange();
}
// Emit candidate. Also emit null candidate when all gatherers are
// complete.
if (!end) {
pc._dispatchEvent('icecandidate', event);
}
if (complete) {
pc._dispatchEvent('icecandidate', new Event('icecandidate'));
pc.iceGatheringState = 'complete';
pc._emitGatheringStateChange();
}
};
// emit already gathered candidates.
window.setTimeout(function() {
bufferedCandidateEvents.forEach(function(e) {
iceGatherer.onlocalcandidate(e);
});
}, 0);
};
// Create ICE transport and DTLS transport.
RTCPeerConnection.prototype._createIceAndDtlsTransports = function() {
var pc = this;
var iceTransport = new window.RTCIceTransport(null);
iceTransport.onicestatechange = function() {
pc._updateIceConnectionState();
pc._updateConnectionState();
};
var dtlsTransport = new window.RTCDtlsTransport(iceTransport);
dtlsTransport.ondtlsstatechange = function() {
pc._updateConnectionState();
};
dtlsTransport.onerror = function() {
// onerror does not set state to failed by itself.
Object.defineProperty(dtlsTransport, 'state',
{value: 'failed', writable: true});
pc._updateConnectionState();
};
return {
iceTransport: iceTransport,
dtlsTransport: dtlsTransport
};
};
// Destroy ICE gatherer, ICE transport and DTLS transport.
// Without triggering the callbacks.
RTCPeerConnection.prototype._disposeIceAndDtlsTransports = function(
sdpMLineIndex) {
var iceGatherer = this.transceivers[sdpMLineIndex].iceGatherer;
if (iceGatherer) {
delete iceGatherer.onlocalcandidate;
delete this.transceivers[sdpMLineIndex].iceGatherer;
}
var iceTransport = this.transceivers[sdpMLineIndex].iceTransport;
if (iceTransport) {
delete iceTransport.onicestatechange;
delete this.transceivers[sdpMLineIndex].iceTransport;
}
var dtlsTransport = this.transceivers[sdpMLineIndex].dtlsTransport;
if (dtlsTransport) {
delete dtlsTransport.ondtlsstatechange;
delete dtlsTransport.onerror;
delete this.transceivers[sdpMLineIndex].dtlsTransport;
}
};
// Start the RTP Sender and Receiver for a transceiver.
RTCPeerConnection.prototype._transceive = function(transceiver,
send, recv) {
var params = getCommonCapabilities(transceiver.localCapabilities,
transceiver.remoteCapabilities);
if (send && transceiver.rtpSender) {
params.encodings = transceiver.sendEncodingParameters;
params.rtcp = {
cname: SDPUtils.localCName,
compound: transceiver.rtcpParameters.compound
};
if (transceiver.recvEncodingParameters.length) {
params.rtcp.ssrc = transceiver.recvEncodingParameters[0].ssrc;
}
transceiver.rtpSender.send(params);
}
if (recv && transceiver.rtpReceiver && params.codecs.length > 0) {
// remove RTX field in Edge 14942
if (transceiver.kind === 'video'
&& transceiver.recvEncodingParameters
&& edgeVersion < 15019) {
transceiver.recvEncodingParameters.forEach(function(p) {
delete p.rtx;
});
}
if (transceiver.recvEncodingParameters.length) {
params.encodings = transceiver.recvEncodingParameters;
} else {
params.encodings = [{}];
}
params.rtcp = {
compound: transceiver.rtcpParameters.compound
};
if (transceiver.rtcpParameters.cname) {
params.rtcp.cname = transceiver.rtcpParameters.cname;
}
if (transceiver.sendEncodingParameters.length) {
params.rtcp.ssrc = transceiver.sendEncodingParameters[0].ssrc;
}
transceiver.rtpReceiver.receive(params);
}
};
RTCPeerConnection.prototype.setLocalDescription = function(description) {
var pc = this;
// Note: pranswer is not supported.
if (['offer', 'answer'].indexOf(description.type) === -1) {
return Promise.reject(makeError('TypeError',
'Unsupported type "' + description.type + '"'));
}
if (!isActionAllowedInSignalingState('setLocalDescription',
description.type, pc.signalingState) || pc._isClosed) {
return Promise.reject(makeError('InvalidStateError',
'Can not set local ' + description.type +
' in state ' + pc.signalingState));
}
var sections;
var sessionpart;
if (description.type === 'offer') {
// VERY limited support for SDP munging. Limited to:
// * changing the order of codecs
sections = SDPUtils.splitSections(description.sdp);
sessionpart = sections.shift();
sections.forEach(function(mediaSection, sdpMLineIndex) {
var caps = SDPUtils.parseRtpParameters(mediaSection);
pc.transceivers[sdpMLineIndex].localCapabilities = caps;
});
pc.transceivers.forEach(function(transceiver, sdpMLineIndex) {
pc._gather(transceiver.mid, sdpMLineIndex);
});
} else if (description.type === 'answer') {
sections = SDPUtils.splitSections(pc._remoteDescription.sdp);
sessionpart = sections.shift();
var isIceLite = SDPUtils.matchPrefix(sessionpart,
'a=ice-lite').length > 0;
sections.forEach(function(mediaSection, sdpMLineIndex) {
var transceiver = pc.transceivers[sdpMLineIndex];
var iceGatherer = transceiver.iceGatherer;
var iceTransport = transceiver.iceTransport;
var dtlsTransport = transceiver.dtlsTransport;
var localCapabilities = transceiver.localCapabilities;
var remoteCapabilities = transceiver.remoteCapabilities;
// treat bundle-only as not-rejected.
var rejected = SDPUtils.isRejected(mediaSection) &&
SDPUtils.matchPrefix(mediaSection, 'a=bundle-only').length === 0;
if (!rejected && !transceiver.rejected) {
var remoteIceParameters = SDPUtils.getIceParameters(
mediaSection, sessionpart);
var remoteDtlsParameters = SDPUtils.getDtlsParameters(
mediaSection, sessionpart);
if (isIceLite) {
remoteDtlsParameters.role = 'server';
}
if (!pc.usingBundle || sdpMLineIndex === 0) {
pc._gather(transceiver.mid, sdpMLineIndex);
if (iceTransport.state === 'new') {
iceTransport.start(iceGatherer, remoteIceParameters,
isIceLite ? 'controlling' : 'controlled');
}
if (dtlsTransport.state === 'new') {
dtlsTransport.start(remoteDtlsParameters);
}
}
// Calculate intersection of capabilities.
var params = getCommonCapabilities(localCapabilities,
remoteCapabilities);
// Start the RTCRtpSender. The RTCRtpReceiver for this
// transceiver has already been started in setRemoteDescription.
pc._transceive(transceiver,
params.codecs.length > 0,
false);
}
});
}
pc._localDescription = {
type: description.type,
sdp: description.sdp
};
if (description.type === 'offer') {
pc._updateSignalingState('have-local-offer');
} else {
pc._updateSignalingState('stable');
}
return Promise.resolve();
};
RTCPeerConnection.prototype.setRemoteDescription = function(description) {
var pc = this;
// Note: pranswer is not supported.
if (['offer', 'answer'].indexOf(description.type) === -1) {
return Promise.reject(makeError('TypeError',
'Unsupported type "' + description.type + '"'));
}
if (!isActionAllowedInSignalingState('setRemoteDescription',
description.type, pc.signalingState) || pc._isClosed) {
return Promise.reject(makeError('InvalidStateError',
'Can not set remote ' + description.type +
' in state ' + pc.signalingState));
}
var streams = {};
pc.remoteStreams.forEach(function(stream) {
streams[stream.id] = stream;
});
var receiverList = [];
var sections = SDPUtils.splitSections(description.sdp);
var sessionpart = sections.shift();
var isIceLite = SDPUtils.matchPrefix(sessionpart,
'a=ice-lite').length > 0;
var usingBundle = SDPUtils.matchPrefix(sessionpart,
'a=group:BUNDLE ').length > 0;
pc.usingBundle = usingBundle;
var iceOptions = SDPUtils.matchPrefix(sessionpart,
'a=ice-options:')[0];
if (iceOptions) {
pc.canTrickleIceCandidates = iceOptions.substr(14).split(' ')
.indexOf('trickle') >= 0;
} else {
pc.canTrickleIceCandidates = false;
}
sections.forEach(function(mediaSection, sdpMLineIndex) {
var lines = SDPUtils.splitLines(mediaSection);
var kind = SDPUtils.getKind(mediaSection);
// treat bundle-only as not-rejected.
var rejected = SDPUtils.isRejected(mediaSection) &&
SDPUtils.matchPrefix(mediaSection, 'a=bundle-only').length === 0;
var protocol = lines[0].substr(2).split(' ')[2];
var direction = SDPUtils.getDirection(mediaSection, sessionpart);
var remoteMsid = SDPUtils.parseMsid(mediaSection);
var mid = SDPUtils.getMid(mediaSection) || SDPUtils.generateIdentifier();
// Reject datachannels which are not implemented yet.
if (rejected || (kind === 'application' && (protocol === 'DTLS/SCTP' ||
protocol === 'UDP/DTLS/SCTP'))) {
// TODO: this is dangerous in the case where a non-rejected m-line
// becomes rejected.
pc.transceivers[sdpMLineIndex] = {
mid: mid,
kind: kind,
protocol: protocol,
rejected: true
};
return;
}
if (!rejected && pc.transceivers[sdpMLineIndex] &&
pc.transceivers[sdpMLineIndex].rejected) {
// recycle a rejected transceiver.
pc.transceivers[sdpMLineIndex] = pc._createTransceiver(kind, true);
}
var transceiver;
var iceGatherer;
var iceTransport;
var dtlsTransport;
var rtpReceiver;
var sendEncodingParameters;
var recvEncodingParameters;
var localCapabilities;
var track;
// FIXME: ensure the mediaSection has rtcp-mux set.
var remoteCapabilities = SDPUtils.parseRtpParameters(mediaSection);
var remoteIceParameters;
var remoteDtlsParameters;
if (!rejected) {
remoteIceParameters = SDPUtils.getIceParameters(mediaSection,
sessionpart);
remoteDtlsParameters = SDPUtils.getDtlsParameters(mediaSection,
sessionpart);
remoteDtlsParameters.role = 'client';
}
recvEncodingParameters =
SDPUtils.parseRtpEncodingParameters(mediaSection);
var rtcpParameters = SDPUtils.parseRtcpParameters(mediaSection);
var isComplete = SDPUtils.matchPrefix(mediaSection,
'a=end-of-candidates', sessionpart).length > 0;
var cands = SDPUtils.matchPrefix(mediaSection, 'a=candidate:')
.map(function(cand) {
return SDPUtils.parseCandidate(cand);
})
.filter(function(cand) {
return cand.component === 1;
});
// Check if we can use BUNDLE and dispose transports.
if ((description.type === 'offer' || description.type === 'answer') &&
!rejected && usingBundle && sdpMLineIndex > 0 &&
pc.transceivers[sdpMLineIndex]) {
pc._disposeIceAndDtlsTransports(sdpMLineIndex);
pc.transceivers[sdpMLineIndex].iceGatherer =
pc.transceivers[0].iceGatherer;
pc.transceivers[sdpMLineIndex].iceTransport =
pc.transceivers[0].iceTransport;
pc.transceivers[sdpMLineIndex].dtlsTransport =
pc.transceivers[0].dtlsTransport;
if (pc.transceivers[sdpMLineIndex].rtpSender) {
pc.transceivers[sdpMLineIndex].rtpSender.setTransport(
pc.transceivers[0].dtlsTransport);
}
if (pc.transceivers[sdpMLineIndex].rtpReceiver) {
pc.transceivers[sdpMLineIndex].rtpReceiver.setTransport(
pc.transceivers[0].dtlsTransport);
}
}
if (description.type === 'offer' && !rejected) {
transceiver = pc.transceivers[sdpMLineIndex] ||
pc._createTransceiver(kind);
transceiver.mid = mid;
if (!transceiver.iceGatherer) {
transceiver.iceGatherer = pc._createIceGatherer(sdpMLineIndex,
usingBundle);
}
if (cands.length && transceiver.iceTransport.state === 'new') {
if (isComplete && (!usingBundle || sdpMLineIndex === 0)) {
transceiver.iceTransport.setRemoteCandidates(cands);
} else {
cands.forEach(function(candidate) {
maybeAddCandidate(transceiver.iceTransport, candidate);
});
}
}
localCapabilities = window.RTCRtpReceiver.getCapabilities(kind);
// filter RTX until additional stuff needed for RTX is implemented
// in adapter.js
if (edgeVersion < 15019) {
localCapabilities.codecs = localCapabilities.codecs.filter(
function(codec) {
return codec.name !== 'rtx';
});
}
sendEncodingParameters = transceiver.sendEncodingParameters || [{
ssrc: (2 * sdpMLineIndex + 2) * 1001
}];
// TODO: rewrite to use http://w3c.github.io/webrtc-pc/#set-associated-remote-streams
var isNewTrack = false;
if (direction === 'sendrecv' || direction === 'sendonly') {
isNewTrack = !transceiver.rtpReceiver;
rtpReceiver = transceiver.rtpReceiver ||
new window.RTCRtpReceiver(transceiver.dtlsTransport, kind);
if (isNewTrack) {
var stream;
track = rtpReceiver.track;
// FIXME: does not work with Plan B.
if (remoteMsid && remoteMsid.stream === '-') {
// no-op. a stream id of '-' means: no associated stream.
} else if (remoteMsid) {
if (!streams[remoteMsid.stream]) {
streams[remoteMsid.stream] = new window.MediaStream();
Object.defineProperty(streams[remoteMsid.stream], 'id', {
get: function() {
return remoteMsid.stream;
}
});
}
Object.defineProperty(track, 'id', {
get: function() {
return remoteMsid.track;
}
});
stream = streams[remoteMsid.stream];
} else {
if (!streams.default) {
streams.default = new window.MediaStream();
}
stream = streams.default;
}
if (stream) {
addTrackToStreamAndFireEvent(track, stream);
transceiver.associatedRemoteMediaStreams.push(stream);
}
receiverList.push([track, rtpReceiver, stream]);
}
} else if (transceiver.rtpReceiver && transceiver.rtpReceiver.track) {
transceiver.associatedRemoteMediaStreams.forEach(function(s) {
var nativeTrack = s.getTracks().find(function(t) {
return t.id === transceiver.rtpReceiver.track.id;
});
if (nativeTrack) {
removeTrackFromStreamAndFireEvent(nativeTrack, s);
}
});
transceiver.associatedRemoteMediaStreams = [];
}
transceiver.localCapabilities = localCapabilities;
transceiver.remoteCapabilities = remoteCapabilities;
transceiver.rtpReceiver = rtpReceiver;
transceiver.rtcpParameters = rtcpParameters;
transceiver.sendEncodingParameters = sendEncodingParameters;
transceiver.recvEncodingParameters = recvEncodingParameters;
// Start the RTCRtpReceiver now. The RTPSender is started in
// setLocalDescription.
pc._transceive(pc.transceivers[sdpMLineIndex],
false,
isNewTrack);
} else if (description.type === 'answer' && !rejected) {
transceiver = pc.transceivers[sdpMLineIndex];
iceGatherer = transceiver.iceGatherer;
iceTransport = transceiver.iceTransport;
dtlsTransport = transceiver.dtlsTransport;
rtpReceiver = transceiver.rtpReceiver;
sendEncodingParameters = transceiver.sendEncodingParameters;
localCapabilities = transceiver.localCapabilities;
pc.transceivers[sdpMLineIndex].recvEncodingParameters =
recvEncodingParameters;
pc.transceivers[sdpMLineIndex].remoteCapabilities =
remoteCapabilities;
pc.transceivers[sdpMLineIndex].rtcpParameters = rtcpParameters;
if (cands.length && iceTransport.state === 'new') {
if ((isIceLite || isComplete) &&
(!usingBundle || sdpMLineIndex === 0)) {
iceTransport.setRemoteCandidates(cands);
} else {
cands.forEach(function(candidate) {
maybeAddCandidate(transceiver.iceTransport, candidate);
});
}
}
if (!usingBundle || sdpMLineIndex === 0) {
if (iceTransport.state === 'new') {
iceTransport.start(iceGatherer, remoteIceParameters,
'controlling');
}
if (dtlsTransport.state === 'new') {
dtlsTransport.start(remoteDtlsParameters);
}
}
// If the offer contained RTX but the answer did not,
// remove RTX from sendEncodingParameters.
var commonCapabilities = getCommonCapabilities(
transceiver.localCapabilities,
transceiver.remoteCapabilities);
var hasRtx = commonCapabilities.codecs.filter(function(c) {
return c.name.toLowerCase() === 'rtx';
}).length;
if (!hasRtx && transceiver.sendEncodingParameters[0].rtx) {
delete transceiver.sendEncodingParameters[0].rtx;
}
pc._transceive(transceiver,
direction === 'sendrecv' || direction === 'recvonly',
direction === 'sendrecv' || direction === 'sendonly');
// TODO: rewrite to use http://w3c.github.io/webrtc-pc/#set-associated-remote-streams
if (rtpReceiver &&
(direction === 'sendrecv' || direction === 'sendonly')) {
track = rtpReceiver.track;
if (remoteMsid) {
if (!streams[remoteMsid.stream]) {
streams[remoteMsid.stream] = new window.MediaStream();
}
addTrackToStreamAndFireEvent(track, streams[remoteMsid.stream]);
receiverList.push([track, rtpReceiver, streams[remoteMsid.stream]]);
} else {
if (!streams.default) {
streams.default = new window.MediaStream();
}
addTrackToStreamAndFireEvent(track, streams.default);
receiverList.push([track, rtpReceiver, streams.default]);
}
} else {
// FIXME: actually the receiver should be created later.
delete transceiver.rtpReceiver;
}
}
});
if (pc._dtlsRole === undefined) {
pc._dtlsRole = description.type === 'offer' ? 'active' : 'passive';
}
pc._remoteDescription = {
type: description.type,
sdp: description.sdp
};
if (description.type === 'offer') {
pc._updateSignalingState('have-remote-offer');
} else {
pc._updateSignalingState('stable');
}
Object.keys(streams).forEach(function(sid) {
var stream = streams[sid];
if (stream.getTracks().length) {
if (pc.remoteStreams.indexOf(stream) === -1) {
pc.remoteStreams.push(stream);
var event = new Event('addstream');
event.stream = stream;
window.setTimeout(function() {
pc._dispatchEvent('addstream', event);
});
}
receiverList.forEach(function(item) {
var track = item[0];
var receiver = item[1];
if (stream.id !== item[2].id) {
return;
}
fireAddTrack(pc, track, receiver, [stream]);
});
}
});
receiverList.forEach(function(item) {
if (item[2]) {
return;
}
fireAddTrack(pc, item[0], item[1], []);
});
// check whether addIceCandidate({}) was called within four seconds after
// setRemoteDescription.
window.setTimeout(function() {
if (!(pc && pc.transceivers)) {
return;
}
pc.transceivers.forEach(function(transceiver) {
if (transceiver.iceTransport &&
transceiver.iceTransport.state === 'new' &&
transceiver.iceTransport.getRemoteCandidates().length > 0) {
console.warn('Timeout for addRemoteCandidate. Consider sending ' +
'an end-of-candidates notification');
transceiver.iceTransport.addRemoteCandidate({});
}
});
}, 4000);
return Promise.resolve();
};
RTCPeerConnection.prototype.close = function() {
this.transceivers.forEach(function(transceiver) {
/* not yet
if (transceiver.iceGatherer) {
transceiver.iceGatherer.close();
}
*/
if (transceiver.iceTransport) {
transceiver.iceTransport.stop();
}
if (transceiver.dtlsTransport) {
transceiver.dtlsTransport.stop();
}
if (transceiver.rtpSender) {
transceiver.rtpSender.stop();
}
if (transceiver.rtpReceiver) {
transceiver.rtpReceiver.stop();
}
});
// FIXME: clean up tracks, local streams, remote streams, etc
this._isClosed = true;
this._updateSignalingState('closed');
};
// Update the signaling state.
RTCPeerConnection.prototype._updateSignalingState = function(newState) {
this.signalingState = newState;
var event = new Event('signalingstatechange');
this._dispatchEvent('signalingstatechange', event);
};
// Determine whether to fire the negotiationneeded event.
RTCPeerConnection.prototype._maybeFireNegotiationNeeded = function() {
var pc = this;
if (this.signalingState !== 'stable' || this.needNegotiation === true) {
return;
}
this.needNegotiation = true;
window.setTimeout(function() {
if (pc.needNegotiation) {
pc.needNegotiation = false;
var event = new Event('negotiationneeded');
pc._dispatchEvent('negotiationneeded', event);
}
}, 0);
};
// Update the ice connection state.
RTCPeerConnection.prototype._updateIceConnectionState = function() {
var newState;
var states = {
'new': 0,
closed: 0,
checking: 0,
connected: 0,
completed: 0,
disconnected: 0,
failed: 0
};
this.transceivers.forEach(function(transceiver) {
states[transceiver.iceTransport.state]++;
});
newState = 'new';
if (states.failed > 0) {
newState = 'failed';
} else if (states.checking > 0) {
newState = 'checking';
} else if (states.disconnected > 0) {
newState = 'disconnected';
} else if (states.new > 0) {
newState = 'new';
} else if (states.connected > 0) {
newState = 'connected';
} else if (states.completed > 0) {
newState = 'completed';
}
if (newState !== this.iceConnectionState) {
this.iceConnectionState = newState;
var event = new Event('iceconnectionstatechange');
this._dispatchEvent('iceconnectionstatechange', event);
}
};
// Update the connection state.
RTCPeerConnection.prototype._updateConnectionState = function() {
var newState;
var states = {
'new': 0,
closed: 0,
connecting: 0,
connected: 0,
completed: 0,
disconnected: 0,
failed: 0
};
this.transceivers.forEach(function(transceiver) {
states[transceiver.iceTransport.state]++;
states[transceiver.dtlsTransport.state]++;
});
// ICETransport.completed and connected are the same for this purpose.
states.connected += states.completed;
newState = 'new';
if (states.failed > 0) {
newState = 'failed';
} else if (states.connecting > 0) {
newState = 'connecting';
} else if (states.disconnected > 0) {
newState = 'disconnected';
} else if (states.new > 0) {
newState = 'new';
} else if (states.connected > 0) {
newState = 'connected';
}
if (newState !== this.connectionState) {
this.connectionState = newState;
var event = new Event('connectionstatechange');
this._dispatchEvent('connectionstatechange', event);
}
};
RTCPeerConnection.prototype.createOffer = function() {
var pc = this;
if (pc._isClosed) {
return Promise.reject(makeError('InvalidStateError',
'Can not call createOffer after close'));
}
var numAudioTracks = pc.transceivers.filter(function(t) {
return t.kind === 'audio';
}).length;
var numVideoTracks = pc.transceivers.filter(function(t) {
return t.kind === 'video';
}).length;
// Determine number of audio and video tracks we need to send/recv.
var offerOptions = arguments[0];
if (offerOptions) {
// Reject Chrome legacy constraints.
if (offerOptions.mandatory || offerOptions.optional) {
throw new TypeError(
'Legacy mandatory/optional constraints not supported.');
}
if (offerOptions.offerToReceiveAudio !== undefined) {
if (offerOptions.offerToReceiveAudio === true) {
numAudioTracks = 1;
} else if (offerOptions.offerToReceiveAudio === false) {
numAudioTracks = 0;
} else {
numAudioTracks = offerOptions.offerToReceiveAudio;
}
}
if (offerOptions.offerToReceiveVideo !== undefined) {
if (offerOptions.offerToReceiveVideo === true) {
numVideoTracks = 1;
} else if (offerOptions.offerToReceiveVideo === false) {
numVideoTracks = 0;
} else {
numVideoTracks = offerOptions.offerToReceiveVideo;
}
}
}
pc.transceivers.forEach(function(transceiver) {
if (transceiver.kind === 'audio') {
numAudioTracks--;
if (numAudioTracks < 0) {
transceiver.wantReceive = false;
}
} else if (transceiver.kind === 'video') {
numVideoTracks--;
if (numVideoTracks < 0) {
transceiver.wantReceive = false;
}
}
});
// Create M-lines for recvonly streams.
while (numAudioTracks > 0 || numVideoTracks > 0) {
if (numAudioTracks > 0) {
pc._createTransceiver('audio');
numAudioTracks--;
}
if (numVideoTracks > 0) {
pc._createTransceiver('video');
numVideoTracks--;
}
}
var sdp = SDPUtils.writeSessionBoilerplate(pc._sdpSessionId,
pc._sdpSessionVersion++);
pc.transceivers.forEach(function(transceiver, sdpMLineIndex) {
// For each track, create an ice gatherer, ice transport,
// dtls transport, potentially rtpsender and rtpreceiver.
var track = transceiver.track;
var kind = transceiver.kind;
var mid = transceiver.mid || SDPUtils.generateIdentifier();
transceiver.mid = mid;
if (!transceiver.iceGatherer) {
transceiver.iceGatherer = pc._createIceGatherer(sdpMLineIndex,
pc.usingBundle);
}
var localCapabilities = window.RTCRtpSender.getCapabilities(kind);
// filter RTX until additional stuff needed for RTX is implemented
// in adapter.js
if (edgeVersion < 15019) {
localCapabilities.codecs = localCapabilities.codecs.filter(
function(codec) {
return codec.name !== 'rtx';
});
}
localCapabilities.codecs.forEach(function(codec) {
// work around https://bugs.chromium.org/p/webrtc/issues/detail?id=6552
// by adding level-asymmetry-allowed=1
if (codec.name === 'H264' &&
codec.parameters['level-asymmetry-allowed'] === undefined) {
codec.parameters['level-asymmetry-allowed'] = '1';
}
// for subsequent offers, we might have to re-use the payload
// type of the last offer.
if (transceiver.remoteCapabilities &&
transceiver.remoteCapabilities.codecs) {
transceiver.remoteCapabilities.codecs.forEach(function(remoteCodec) {
if (codec.name.toLowerCase() === remoteCodec.name.toLowerCase() &&
codec.clockRate === remoteCodec.clockRate) {
codec.preferredPayloadType = remoteCodec.payloadType;
}
});
}
});
localCapabilities.headerExtensions.forEach(function(hdrExt) {
var remoteExtensions = transceiver.remoteCapabilities &&
transceiver.remoteCapabilities.headerExtensions || [];
remoteExtensions.forEach(function(rHdrExt) {
if (hdrExt.uri === rHdrExt.uri) {
hdrExt.id = rHdrExt.id;
}
});
});
// generate an ssrc now, to be used later in rtpSender.send
var sendEncodingParameters = transceiver.sendEncodingParameters || [{
ssrc: (2 * sdpMLineIndex + 1) * 1001
}];
if (track) {
// add RTX
if (edgeVersion >= 15019 && kind === 'video' &&
!sendEncodingParameters[0].rtx) {
sendEncodingParameters[0].rtx = {
ssrc: sendEncodingParameters[0].ssrc + 1
};
}
}
if (transceiver.wantReceive) {
transceiver.rtpReceiver = new window.RTCRtpReceiver(
transceiver.dtlsTransport, kind);
}
transceiver.localCapabilities = localCapabilities;
transceiver.sendEncodingParameters = sendEncodingParameters;
});
// always offer BUNDLE and dispose on return if not supported.
if (pc._config.bundlePolicy !== 'max-compat') {
sdp += 'a=group:BUNDLE ' + pc.transceivers.map(function(t) {
return t.mid;
}).join(' ') + '\r\n';
}
sdp += 'a=ice-options:trickle\r\n';
pc.transceivers.forEach(function(transceiver, sdpMLineIndex) {
sdp += writeMediaSection(transceiver, transceiver.localCapabilities,
'offer', transceiver.stream, pc._dtlsRole);
sdp += 'a=rtcp-rsize\r\n';
if (transceiver.iceGatherer && pc.iceGatheringState !== 'new' &&
(sdpMLineIndex === 0 || !pc.usingBundle)) {
transceiver.iceGatherer.getLocalCandidates().forEach(function(cand) {
cand.component = 1;
sdp += 'a=' + SDPUtils.writeCandidate(cand) + '\r\n';
});
if (transceiver.iceGatherer.state === 'completed') {
sdp += 'a=end-of-candidates\r\n';
}
}
});
var desc = new window.RTCSessionDescription({
type: 'offer',
sdp: sdp
});
return Promise.resolve(desc);
};
RTCPeerConnection.prototype.createAnswer = function() {
var pc = this;
if (pc._isClosed) {
return Promise.reject(makeError('InvalidStateError',
'Can not call createAnswer after close'));
}
if (!(pc.signalingState === 'have-remote-offer' ||
pc.signalingState === 'have-local-pranswer')) {
return Promise.reject(makeError('InvalidStateError',
'Can not call createAnswer in signalingState ' + pc.signalingState));
}
var sdp = SDPUtils.writeSessionBoilerplate(pc._sdpSessionId,
pc._sdpSessionVersion++);
if (pc.usingBundle) {
sdp += 'a=group:BUNDLE ' + pc.transceivers.map(function(t) {
return t.mid;
}).join(' ') + '\r\n';
}
sdp += 'a=ice-options:trickle\r\n';
var mediaSectionsInOffer = SDPUtils.getMediaSections(
pc._remoteDescription.sdp).length;
pc.transceivers.forEach(function(transceiver, sdpMLineIndex) {
if (sdpMLineIndex + 1 > mediaSectionsInOffer) {
return;
}
if (transceiver.rejected) {
if (transceiver.kind === 'application') {
if (transceiver.protocol === 'DTLS/SCTP') { // legacy fmt
sdp += 'm=application 0 DTLS/SCTP 5000\r\n';
} else {
sdp += 'm=application 0 ' + transceiver.protocol +
' webrtc-datachannel\r\n';
}
} else if (transceiver.kind === 'audio') {
sdp += 'm=audio 0 UDP/TLS/RTP/SAVPF 0\r\n' +
'a=rtpmap:0 PCMU/8000\r\n';
} else if (transceiver.kind === 'video') {
sdp += 'm=video 0 UDP/TLS/RTP/SAVPF 120\r\n' +
'a=rtpmap:120 VP8/90000\r\n';
}
sdp += 'c=IN IP4 0.0.0.0\r\n' +
'a=inactive\r\n' +
'a=mid:' + transceiver.mid + '\r\n';
return;
}
// FIXME: look at direction.
if (transceiver.stream) {
var localTrack;
if (transceiver.kind === 'audio') {
localTrack = transceiver.stream.getAudioTracks()[0];
} else if (transceiver.kind === 'video') {
localTrack = transceiver.stream.getVideoTracks()[0];
}
if (localTrack) {
// add RTX
if (edgeVersion >= 15019 && transceiver.kind === 'video' &&
!transceiver.sendEncodingParameters[0].rtx) {
transceiver.sendEncodingParameters[0].rtx = {
ssrc: transceiver.sendEncodingParameters[0].ssrc + 1
};
}
}
}
// Calculate intersection of capabilities.
var commonCapabilities = getCommonCapabilities(
transceiver.localCapabilities,
transceiver.remoteCapabilities);
var hasRtx = commonCapabilities.codecs.filter(function(c) {
return c.name.toLowerCase() === 'rtx';
}).length;
if (!hasRtx && transceiver.sendEncodingParameters[0].rtx) {
delete transceiver.sendEncodingParameters[0].rtx;
}
sdp += writeMediaSection(transceiver, commonCapabilities,
'answer', transceiver.stream, pc._dtlsRole);
if (transceiver.rtcpParameters &&
transceiver.rtcpParameters.reducedSize) {
sdp += 'a=rtcp-rsize\r\n';
}
});
var desc = new window.RTCSessionDescription({
type: 'answer',
sdp: sdp
});
return Promise.resolve(desc);
};
RTCPeerConnection.prototype.addIceCandidate = function(candidate) {
var pc = this;
var sections;
if (candidate && !(candidate.sdpMLineIndex !== undefined ||
candidate.sdpMid)) {
return Promise.reject(new TypeError('sdpMLineIndex or sdpMid required'));
}
// TODO: needs to go into ops queue.
return new Promise(function(resolve, reject) {
if (!pc._remoteDescription) {
return reject(makeError('InvalidStateError',
'Can not add ICE candidate without a remote description'));
} else if (!candidate || candidate.candidate === '') {
for (var j = 0; j < pc.transceivers.length; j++) {
if (pc.transceivers[j].rejected) {
continue;
}
pc.transceivers[j].iceTransport.addRemoteCandidate({});
sections = SDPUtils.getMediaSections(pc._remoteDescription.sdp);
sections[j] += 'a=end-of-candidates\r\n';
pc._remoteDescription.sdp =
SDPUtils.getDescription(pc._remoteDescription.sdp) +
sections.join('');
if (pc.usingBundle) {
break;
}
}
} else {
var sdpMLineIndex = candidate.sdpMLineIndex;
if (candidate.sdpMid) {
for (var i = 0; i < pc.transceivers.length; i++) {
if (pc.transceivers[i].mid === candidate.sdpMid) {
sdpMLineIndex = i;
break;
}
}
}
var transceiver = pc.transceivers[sdpMLineIndex];
if (transceiver) {
if (transceiver.rejected) {
return resolve();
}
var cand = Object.keys(candidate.candidate).length > 0 ?
SDPUtils.parseCandidate(candidate.candidate) : {};
// Ignore Chrome's invalid candidates since Edge does not like them.
if (cand.protocol === 'tcp' && (cand.port === 0 || cand.port === 9)) {
return resolve();
}
// Ignore RTCP candidates, we assume RTCP-MUX.
if (cand.component && cand.component !== 1) {
return resolve();
}
// when using bundle, avoid adding candidates to the wrong
// ice transport. And avoid adding candidates added in the SDP.
if (sdpMLineIndex === 0 || (sdpMLineIndex > 0 &&
transceiver.iceTransport !== pc.transceivers[0].iceTransport)) {
if (!maybeAddCandidate(transceiver.iceTransport, cand)) {
return reject(makeError('OperationError',
'Can not add ICE candidate'));
}
}
// update the remoteDescription.
var candidateString = candidate.candidate.trim();
if (candidateString.indexOf('a=') === 0) {
candidateString = candidateString.substr(2);
}
sections = SDPUtils.getMediaSections(pc._remoteDescription.sdp);
sections[sdpMLineIndex] += 'a=' +
(cand.type ? candidateString : 'end-of-candidates')
+ '\r\n';
pc._remoteDescription.sdp =
SDPUtils.getDescription(pc._remoteDescription.sdp) +
sections.join('');
} else {
return reject(makeError('OperationError',
'Can not add ICE candidate'));
}
}
resolve();
});
};
RTCPeerConnection.prototype.getStats = function(selector) {
if (selector && selector instanceof window.MediaStreamTrack) {
var senderOrReceiver = null;
this.transceivers.forEach(function(transceiver) {
if (transceiver.rtpSender &&
transceiver.rtpSender.track === selector) {
senderOrReceiver = transceiver.rtpSender;
} else if (transceiver.rtpReceiver &&
transceiver.rtpReceiver.track === selector) {
senderOrReceiver = transceiver.rtpReceiver;
}
});
if (!senderOrReceiver) {
throw makeError('InvalidAccessError', 'Invalid selector.');
}
return senderOrReceiver.getStats();
}
var promises = [];
this.transceivers.forEach(function(transceiver) {
['rtpSender', 'rtpReceiver', 'iceGatherer', 'iceTransport',
'dtlsTransport'].forEach(function(method) {
if (transceiver[method]) {
promises.push(transceiver[method].getStats());
}
});
});
return Promise.all(promises).then(function(allStats) {
var results = new Map();
allStats.forEach(function(stats) {
stats.forEach(function(stat) {
results.set(stat.id, stat);
});
});
return results;
});
};
// fix low-level stat names and return Map instead of object.
var ortcObjects = ['RTCRtpSender', 'RTCRtpReceiver', 'RTCIceGatherer',
'RTCIceTransport', 'RTCDtlsTransport'];
ortcObjects.forEach(function(ortcObjectName) {
var obj = window[ortcObjectName];
if (obj && obj.prototype && obj.prototype.getStats) {
var nativeGetstats = obj.prototype.getStats;
obj.prototype.getStats = function() {
return nativeGetstats.apply(this)
.then(function(nativeStats) {
var mapStats = new Map();
Object.keys(nativeStats).forEach(function(id) {
nativeStats[id].type = fixStatsType(nativeStats[id]);
mapStats.set(id, nativeStats[id]);
});
return mapStats;
});
};
}
});
// legacy callback shims. Should be moved to adapter.js some days.
var methods = ['createOffer', 'createAnswer'];
methods.forEach(function(method) {
var nativeMethod = RTCPeerConnection.prototype[method];
RTCPeerConnection.prototype[method] = function() {
var args = arguments;
if (typeof args[0] === 'function' ||
typeof args[1] === 'function') { // legacy
return nativeMethod.apply(this, [arguments[2]])
.then(function(description) {
if (typeof args[0] === 'function') {
args[0].apply(null, [description]);
}
}, function(error) {
if (typeof args[1] === 'function') {
args[1].apply(null, [error]);
}
});
}
return nativeMethod.apply(this, arguments);
};
});
methods = ['setLocalDescription', 'setRemoteDescription', 'addIceCandidate'];
methods.forEach(function(method) {
var nativeMethod = RTCPeerConnection.prototype[method];
RTCPeerConnection.prototype[method] = function() {
var args = arguments;
if (typeof args[1] === 'function' ||
typeof args[2] === 'function') { // legacy
return nativeMethod.apply(this, arguments)
.then(function() {
if (typeof args[1] === 'function') {
args[1].apply(null);
}
}, function(error) {
if (typeof args[2] === 'function') {
args[2].apply(null, [error]);
}
});
}
return nativeMethod.apply(this, arguments);
};
});
// getStats is special. It doesn't have a spec legacy method yet we support
// getStats(something, cb) without error callbacks.
['getStats'].forEach(function(method) {
var nativeMethod = RTCPeerConnection.prototype[method];
RTCPeerConnection.prototype[method] = function() {
var args = arguments;
if (typeof args[1] === 'function') {
return nativeMethod.apply(this, arguments)
.then(function() {
if (typeof args[1] === 'function') {
args[1].apply(null);
}
});
}
return nativeMethod.apply(this, arguments);
};
});
return RTCPeerConnection;
};
},{"sdp":2}],2:[function(require,module,exports){
/* eslint-env node */
'use strict';
// SDP helpers.
var SDPUtils = {};
// Generate an alphanumeric identifier for cname or mids.
// TODO: use UUIDs instead? https://gist.github.com/jed/982883
SDPUtils.generateIdentifier = function() {
return Math.random().toString(36).substr(2, 10);
};
// The RTCP CNAME used by all peerconnections from the same JS.
SDPUtils.localCName = SDPUtils.generateIdentifier();
// Splits SDP into lines, dealing with both CRLF and LF.
SDPUtils.splitLines = function(blob) {
return blob.trim().split('\n').map(function(line) {
return line.trim();
});
};
// Splits SDP into sessionpart and mediasections. Ensures CRLF.
SDPUtils.splitSections = function(blob) {
var parts = blob.split('\nm=');
return parts.map(function(part, index) {
return (index > 0 ? 'm=' + part : part).trim() + '\r\n';
});
};
// returns the session description.
SDPUtils.getDescription = function(blob) {
var sections = SDPUtils.splitSections(blob);
return sections && sections[0];
};
// returns the individual media sections.
SDPUtils.getMediaSections = function(blob) {
var sections = SDPUtils.splitSections(blob);
sections.shift();
return sections;
};
// Returns lines that start with a certain prefix.
SDPUtils.matchPrefix = function(blob, prefix) {
return SDPUtils.splitLines(blob).filter(function(line) {
return line.indexOf(prefix) === 0;
});
};
// Parses an ICE candidate line. Sample input:
// candidate:702786350 2 udp 41819902 8.8.8.8 60769 typ relay raddr 8.8.8.8
// rport 55996"
SDPUtils.parseCandidate = function(line) {
var parts;
// Parse both variants.
if (line.indexOf('a=candidate:') === 0) {
parts = line.substring(12).split(' ');
} else {
parts = line.substring(10).split(' ');
}
var candidate = {
foundation: parts[0],
component: parseInt(parts[1], 10),
protocol: parts[2].toLowerCase(),
priority: parseInt(parts[3], 10),
ip: parts[4],
address: parts[4], // address is an alias for ip.
port: parseInt(parts[5], 10),
// skip parts[6] == 'typ'
type: parts[7]
};
for (var i = 8; i < parts.length; i += 2) {
switch (parts[i]) {
case 'raddr':
candidate.relatedAddress = parts[i + 1];
break;
case 'rport':
candidate.relatedPort = parseInt(parts[i + 1], 10);
break;
case 'tcptype':
candidate.tcpType = parts[i + 1];
break;
case 'ufrag':
candidate.ufrag = parts[i + 1]; // for backward compability.
candidate.usernameFragment = parts[i + 1];
break;
default: // extension handling, in particular ufrag
candidate[parts[i]] = parts[i + 1];
break;
}
}
return candidate;
};
// Translates a candidate object into SDP candidate attribute.
SDPUtils.writeCandidate = function(candidate) {
var sdp = [];
sdp.push(candidate.foundation);
sdp.push(candidate.component);
sdp.push(candidate.protocol.toUpperCase());
sdp.push(candidate.priority);
sdp.push(candidate.address || candidate.ip);
sdp.push(candidate.port);
var type = candidate.type;
sdp.push('typ');
sdp.push(type);
if (type !== 'host' && candidate.relatedAddress &&
candidate.relatedPort) {
sdp.push('raddr');
sdp.push(candidate.relatedAddress);
sdp.push('rport');
sdp.push(candidate.relatedPort);
}
if (candidate.tcpType && candidate.protocol.toLowerCase() === 'tcp') {
sdp.push('tcptype');
sdp.push(candidate.tcpType);
}
if (candidate.usernameFragment || candidate.ufrag) {
sdp.push('ufrag');
sdp.push(candidate.usernameFragment || candidate.ufrag);
}
return 'candidate:' + sdp.join(' ');
};
// Parses an ice-options line, returns an array of option tags.
// a=ice-options:foo bar
SDPUtils.parseIceOptions = function(line) {
return line.substr(14).split(' ');
};
// Parses an rtpmap line, returns RTCRtpCoddecParameters. Sample input:
// a=rtpmap:111 opus/48000/2
SDPUtils.parseRtpMap = function(line) {
var parts = line.substr(9).split(' ');
var parsed = {
payloadType: parseInt(parts.shift(), 10) // was: id
};
parts = parts[0].split('/');
parsed.name = parts[0];
parsed.clockRate = parseInt(parts[1], 10); // was: clockrate
parsed.channels = parts.length === 3 ? parseInt(parts[2], 10) : 1;
// legacy alias, got renamed back to channels in ORTC.
parsed.numChannels = parsed.channels;
return parsed;
};
// Generate an a=rtpmap line from RTCRtpCodecCapability or
// RTCRtpCodecParameters.
SDPUtils.writeRtpMap = function(codec) {
var pt = codec.payloadType;
if (codec.preferredPayloadType !== undefined) {
pt = codec.preferredPayloadType;
}
var channels = codec.channels || codec.numChannels || 1;
return 'a=rtpmap:' + pt + ' ' + codec.name + '/' + codec.clockRate +
(channels !== 1 ? '/' + channels : '') + '\r\n';
};
// Parses an a=extmap line (headerextension from RFC 5285). Sample input:
// a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
// a=extmap:2/sendonly urn:ietf:params:rtp-hdrext:toffset
SDPUtils.parseExtmap = function(line) {
var parts = line.substr(9).split(' ');
return {
id: parseInt(parts[0], 10),
direction: parts[0].indexOf('/') > 0 ? parts[0].split('/')[1] : 'sendrecv',
uri: parts[1]
};
};
// Generates a=extmap line from RTCRtpHeaderExtensionParameters or
// RTCRtpHeaderExtension.
SDPUtils.writeExtmap = function(headerExtension) {
return 'a=extmap:' + (headerExtension.id || headerExtension.preferredId) +
(headerExtension.direction && headerExtension.direction !== 'sendrecv'
? '/' + headerExtension.direction
: '') +
' ' + headerExtension.uri + '\r\n';
};
// Parses an ftmp line, returns dictionary. Sample input:
// a=fmtp:96 vbr=on;cng=on
// Also deals with vbr=on; cng=on
SDPUtils.parseFmtp = function(line) {
var parsed = {};
var kv;
var parts = line.substr(line.indexOf(' ') + 1).split(';');
for (var j = 0; j < parts.length; j++) {
kv = parts[j].trim().split('=');
parsed[kv[0].trim()] = kv[1];
}
return parsed;
};
// Generates an a=ftmp line from RTCRtpCodecCapability or RTCRtpCodecParameters.
SDPUtils.writeFmtp = function(codec) {
var line = '';
var pt = codec.payloadType;
if (codec.preferredPayloadType !== undefined) {
pt = codec.preferredPayloadType;
}
if (codec.parameters && Object.keys(codec.parameters).length) {
var params = [];
Object.keys(codec.parameters).forEach(function(param) {
if (codec.parameters[param]) {
params.push(param + '=' + codec.parameters[param]);
} else {
params.push(param);
}
});
line += 'a=fmtp:' + pt + ' ' + params.join(';') + '\r\n';
}
return line;
};
// Parses an rtcp-fb line, returns RTCPRtcpFeedback object. Sample input:
// a=rtcp-fb:98 nack rpsi
SDPUtils.parseRtcpFb = function(line) {
var parts = line.substr(line.indexOf(' ') + 1).split(' ');
return {
type: parts.shift(),
parameter: parts.join(' ')
};
};
// Generate a=rtcp-fb lines from RTCRtpCodecCapability or RTCRtpCodecParameters.
SDPUtils.writeRtcpFb = function(codec) {
var lines = '';
var pt = codec.payloadType;
if (codec.preferredPayloadType !== undefined) {
pt = codec.preferredPayloadType;
}
if (codec.rtcpFeedback && codec.rtcpFeedback.length) {
// FIXME: special handling for trr-int?
codec.rtcpFeedback.forEach(function(fb) {
lines += 'a=rtcp-fb:' + pt + ' ' + fb.type +
(fb.parameter && fb.parameter.length ? ' ' + fb.parameter : '') +
'\r\n';
});
}
return lines;
};
// Parses an RFC 5576 ssrc media attribute. Sample input:
// a=ssrc:3735928559 cname:something
SDPUtils.parseSsrcMedia = function(line) {
var sp = line.indexOf(' ');
var parts = {
ssrc: parseInt(line.substr(7, sp - 7), 10)
};
var colon = line.indexOf(':', sp);
if (colon > -1) {
parts.attribute = line.substr(sp + 1, colon - sp - 1);
parts.value = line.substr(colon + 1);
} else {
parts.attribute = line.substr(sp + 1);
}
return parts;
};
SDPUtils.parseSsrcGroup = function(line) {
var parts = line.substr(13).split(' ');
return {
semantics: parts.shift(),
ssrcs: parts.map(function(ssrc) {
return parseInt(ssrc, 10);
})
};
};
// Extracts the MID (RFC 5888) from a media section.
// returns the MID or undefined if no mid line was found.
SDPUtils.getMid = function(mediaSection) {
var mid = SDPUtils.matchPrefix(mediaSection, 'a=mid:')[0];
if (mid) {
return mid.substr(6);
}
};
SDPUtils.parseFingerprint = function(line) {
var parts = line.substr(14).split(' ');
return {
algorithm: parts[0].toLowerCase(), // algorithm is case-sensitive in Edge.
value: parts[1]
};
};
// Extracts DTLS parameters from SDP media section or sessionpart.
// FIXME: for consistency with other functions this should only
// get the fingerprint line as input. See also getIceParameters.
SDPUtils.getDtlsParameters = function(mediaSection, sessionpart) {
var lines = SDPUtils.matchPrefix(mediaSection + sessionpart,
'a=fingerprint:');
// Note: a=setup line is ignored since we use the 'auto' role.
// Note2: 'algorithm' is not case sensitive except in Edge.
return {
role: 'auto',
fingerprints: lines.map(SDPUtils.parseFingerprint)
};
};
// Serializes DTLS parameters to SDP.
SDPUtils.writeDtlsParameters = function(params, setupType) {
var sdp = 'a=setup:' + setupType + '\r\n';
params.fingerprints.forEach(function(fp) {
sdp += 'a=fingerprint:' + fp.algorithm + ' ' + fp.value + '\r\n';
});
return sdp;
};
// Parses ICE information from SDP media section or sessionpart.
// FIXME: for consistency with other functions this should only
// get the ice-ufrag and ice-pwd lines as input.
SDPUtils.getIceParameters = function(mediaSection, sessionpart) {
var lines = SDPUtils.splitLines(mediaSection);
// Search in session part, too.
lines = lines.concat(SDPUtils.splitLines(sessionpart));
var iceParameters = {
usernameFragment: lines.filter(function(line) {
return line.indexOf('a=ice-ufrag:') === 0;
})[0].substr(12),
password: lines.filter(function(line) {
return line.indexOf('a=ice-pwd:') === 0;
})[0].substr(10)
};
return iceParameters;
};
// Serializes ICE parameters to SDP.
SDPUtils.writeIceParameters = function(params) {
return 'a=ice-ufrag:' + params.usernameFragment + '\r\n' +
'a=ice-pwd:' + params.password + '\r\n';
};
// Parses the SDP media section and returns RTCRtpParameters.
SDPUtils.parseRtpParameters = function(mediaSection) {
var description = {
codecs: [],
headerExtensions: [],
fecMechanisms: [],
rtcp: []
};
var lines = SDPUtils.splitLines(mediaSection);
var mline = lines[0].split(' ');
for (var i = 3; i < mline.length; i++) { // find all codecs from mline[3..]
var pt = mline[i];
var rtpmapline = SDPUtils.matchPrefix(
mediaSection, 'a=rtpmap:' + pt + ' ')[0];
if (rtpmapline) {
var codec = SDPUtils.parseRtpMap(rtpmapline);
var fmtps = SDPUtils.matchPrefix(
mediaSection, 'a=fmtp:' + pt + ' ');
// Only the first a=fmtp: is considered.
codec.parameters = fmtps.length ? SDPUtils.parseFmtp(fmtps[0]) : {};
codec.rtcpFeedback = SDPUtils.matchPrefix(
mediaSection, 'a=rtcp-fb:' + pt + ' ')
.map(SDPUtils.parseRtcpFb);
description.codecs.push(codec);
// parse FEC mechanisms from rtpmap lines.
switch (codec.name.toUpperCase()) {
case 'RED':
case 'ULPFEC':
description.fecMechanisms.push(codec.name.toUpperCase());
break;
default: // only RED and ULPFEC are recognized as FEC mechanisms.
break;
}
}
}
SDPUtils.matchPrefix(mediaSection, 'a=extmap:').forEach(function(line) {
description.headerExtensions.push(SDPUtils.parseExtmap(line));
});
// FIXME: parse rtcp.
return description;
};
// Generates parts of the SDP media section describing the capabilities /
// parameters.
SDPUtils.writeRtpDescription = function(kind, caps) {
var sdp = '';
// Build the mline.
sdp += 'm=' + kind + ' ';
sdp += caps.codecs.length > 0 ? '9' : '0'; // reject if no codecs.
sdp += ' UDP/TLS/RTP/SAVPF ';
sdp += caps.codecs.map(function(codec) {
if (codec.preferredPayloadType !== undefined) {
return codec.preferredPayloadType;
}
return codec.payloadType;
}).join(' ') + '\r\n';
sdp += 'c=IN IP4 0.0.0.0\r\n';
sdp += 'a=rtcp:9 IN IP4 0.0.0.0\r\n';
// Add a=rtpmap lines for each codec. Also fmtp and rtcp-fb.
caps.codecs.forEach(function(codec) {
sdp += SDPUtils.writeRtpMap(codec);
sdp += SDPUtils.writeFmtp(codec);
sdp += SDPUtils.writeRtcpFb(codec);
});
var maxptime = 0;
caps.codecs.forEach(function(codec) {
if (codec.maxptime > maxptime) {
maxptime = codec.maxptime;
}
});
if (maxptime > 0) {
sdp += 'a=maxptime:' + maxptime + '\r\n';
}
sdp += 'a=rtcp-mux\r\n';
if (caps.headerExtensions) {
caps.headerExtensions.forEach(function(extension) {
sdp += SDPUtils.writeExtmap(extension);
});
}
// FIXME: write fecMechanisms.
return sdp;
};
// Parses the SDP media section and returns an array of
// RTCRtpEncodingParameters.
SDPUtils.parseRtpEncodingParameters = function(mediaSection) {
var encodingParameters = [];
var description = SDPUtils.parseRtpParameters(mediaSection);
var hasRed = description.fecMechanisms.indexOf('RED') !== -1;
var hasUlpfec = description.fecMechanisms.indexOf('ULPFEC') !== -1;
// filter a=ssrc:... cname:, ignore PlanB-msid
var ssrcs = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:')
.map(function(line) {
return SDPUtils.parseSsrcMedia(line);
})
.filter(function(parts) {
return parts.attribute === 'cname';
});
var primarySsrc = ssrcs.length > 0 && ssrcs[0].ssrc;
var secondarySsrc;
var flows = SDPUtils.matchPrefix(mediaSection, 'a=ssrc-group:FID')
.map(function(line) {
var parts = line.substr(17).split(' ');
return parts.map(function(part) {
return parseInt(part, 10);
});
});
if (flows.length > 0 && flows[0].length > 1 && flows[0][0] === primarySsrc) {
secondarySsrc = flows[0][1];
}
description.codecs.forEach(function(codec) {
if (codec.name.toUpperCase() === 'RTX' && codec.parameters.apt) {
var encParam = {
ssrc: primarySsrc,
codecPayloadType: parseInt(codec.parameters.apt, 10)
};
if (primarySsrc && secondarySsrc) {
encParam.rtx = {ssrc: secondarySsrc};
}
encodingParameters.push(encParam);
if (hasRed) {
encParam = JSON.parse(JSON.stringify(encParam));
encParam.fec = {
ssrc: primarySsrc,
mechanism: hasUlpfec ? 'red+ulpfec' : 'red'
};
encodingParameters.push(encParam);
}
}
});
if (encodingParameters.length === 0 && primarySsrc) {
encodingParameters.push({
ssrc: primarySsrc
});
}
// we support both b=AS and b=TIAS but interpret AS as TIAS.
var bandwidth = SDPUtils.matchPrefix(mediaSection, 'b=');
if (bandwidth.length) {
if (bandwidth[0].indexOf('b=TIAS:') === 0) {
bandwidth = parseInt(bandwidth[0].substr(7), 10);
} else if (bandwidth[0].indexOf('b=AS:') === 0) {
// use formula from JSEP to convert b=AS to TIAS value.
bandwidth = parseInt(bandwidth[0].substr(5), 10) * 1000 * 0.95
- (50 * 40 * 8);
} else {
bandwidth = undefined;
}
encodingParameters.forEach(function(params) {
params.maxBitrate = bandwidth;
});
}
return encodingParameters;
};
// parses http://draft.ortc.org/#rtcrtcpparameters*
SDPUtils.parseRtcpParameters = function(mediaSection) {
var rtcpParameters = {};
// Gets the first SSRC. Note tha with RTX there might be multiple
// SSRCs.
var remoteSsrc = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:')
.map(function(line) {
return SDPUtils.parseSsrcMedia(line);
})
.filter(function(obj) {
return obj.attribute === 'cname';
})[0];
if (remoteSsrc) {
rtcpParameters.cname = remoteSsrc.value;
rtcpParameters.ssrc = remoteSsrc.ssrc;
}
// Edge uses the compound attribute instead of reducedSize
// compound is !reducedSize
var rsize = SDPUtils.matchPrefix(mediaSection, 'a=rtcp-rsize');
rtcpParameters.reducedSize = rsize.length > 0;
rtcpParameters.compound = rsize.length === 0;
// parses the rtcp-mux attrіbute.
// Note that Edge does not support unmuxed RTCP.
var mux = SDPUtils.matchPrefix(mediaSection, 'a=rtcp-mux');
rtcpParameters.mux = mux.length > 0;
return rtcpParameters;
};
// parses either a=msid: or a=ssrc:... msid lines and returns
// the id of the MediaStream and MediaStreamTrack.
SDPUtils.parseMsid = function(mediaSection) {
var parts;
var spec = SDPUtils.matchPrefix(mediaSection, 'a=msid:');
if (spec.length === 1) {
parts = spec[0].substr(7).split(' ');
return {stream: parts[0], track: parts[1]};
}
var planB = SDPUtils.matchPrefix(mediaSection, 'a=ssrc:')
.map(function(line) {
return SDPUtils.parseSsrcMedia(line);
})
.filter(function(msidParts) {
return msidParts.attribute === 'msid';
});
if (planB.length > 0) {
parts = planB[0].value.split(' ');
return {stream: parts[0], track: parts[1]};
}
};
// Generate a session ID for SDP.
// https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-20#section-5.2.1
// recommends using a cryptographically random +ve 64-bit value
// but right now this should be acceptable and within the right range
SDPUtils.generateSessionId = function() {
return Math.random().toString().substr(2, 21);
};
// Write boilder plate for start of SDP
// sessId argument is optional - if not supplied it will
// be generated randomly
// sessVersion is optional and defaults to 2
// sessUser is optional and defaults to 'thisisadapterortc'
SDPUtils.writeSessionBoilerplate = function(sessId, sessVer, sessUser) {
var sessionId;
var version = sessVer !== undefined ? sessVer : 2;
if (sessId) {
sessionId = sessId;
} else {
sessionId = SDPUtils.generateSessionId();
}
var user = sessUser || 'thisisadapterortc';
// FIXME: sess-id should be an NTP timestamp.
return 'v=0\r\n' +
'o=' + user + ' ' + sessionId + ' ' + version +
' IN IP4 127.0.0.1\r\n' +
's=-\r\n' +
't=0 0\r\n';
};
SDPUtils.writeMediaSection = function(transceiver, caps, type, stream) {
var sdp = SDPUtils.writeRtpDescription(transceiver.kind, caps);
// Map ICE parameters (ufrag, pwd) to SDP.
sdp += SDPUtils.writeIceParameters(
transceiver.iceGatherer.getLocalParameters());
// Map DTLS parameters to SDP.
sdp += SDPUtils.writeDtlsParameters(
transceiver.dtlsTransport.getLocalParameters(),
type === 'offer' ? 'actpass' : 'active');
sdp += 'a=mid:' + transceiver.mid + '\r\n';
if (transceiver.direction) {
sdp += 'a=' + transceiver.direction + '\r\n';
} else if (transceiver.rtpSender && transceiver.rtpReceiver) {
sdp += 'a=sendrecv\r\n';
} else if (transceiver.rtpSender) {
sdp += 'a=sendonly\r\n';
} else if (transceiver.rtpReceiver) {
sdp += 'a=recvonly\r\n';
} else {
sdp += 'a=inactive\r\n';
}
if (transceiver.rtpSender) {
// spec.
var msid = 'msid:' + stream.id + ' ' +
transceiver.rtpSender.track.id + '\r\n';
sdp += 'a=' + msid;
// for Chrome.
sdp += 'a=ssrc:' + transceiver.sendEncodingParameters[0].ssrc +
' ' + msid;
if (transceiver.sendEncodingParameters[0].rtx) {
sdp += 'a=ssrc:' + transceiver.sendEncodingParameters[0].rtx.ssrc +
' ' + msid;
sdp += 'a=ssrc-group:FID ' +
transceiver.sendEncodingParameters[0].ssrc + ' ' +
transceiver.sendEncodingParameters[0].rtx.ssrc +
'\r\n';
}
}
// FIXME: this should be written by writeRtpDescription.
sdp += 'a=ssrc:' + transceiver.sendEncodingParameters[0].ssrc +
' cname:' + SDPUtils.localCName + '\r\n';
if (transceiver.rtpSender && transceiver.sendEncodingParameters[0].rtx) {
sdp += 'a=ssrc:' + transceiver.sendEncodingParameters[0].rtx.ssrc +
' cname:' + SDPUtils.localCName + '\r\n';
}
return sdp;
};
// Gets the direction from the mediaSection or the sessionpart.
SDPUtils.getDirection = function(mediaSection, sessionpart) {
// Look for sendrecv, sendonly, recvonly, inactive, default to sendrecv.
var lines = SDPUtils.splitLines(mediaSection);
for (var i = 0; i < lines.length; i++) {
switch (lines[i]) {
case 'a=sendrecv':
case 'a=sendonly':
case 'a=recvonly':
case 'a=inactive':
return lines[i].substr(2);
default:
// FIXME: What should happen here?
}
}
if (sessionpart) {
return SDPUtils.getDirection(sessionpart);
}
return 'sendrecv';
};
SDPUtils.getKind = function(mediaSection) {
var lines = SDPUtils.splitLines(mediaSection);
var mline = lines[0].split(' ');
return mline[0].substr(2);
};
SDPUtils.isRejected = function(mediaSection) {
return mediaSection.split(' ', 2)[1] === '0';
};
SDPUtils.parseMLine = function(mediaSection) {
var lines = SDPUtils.splitLines(mediaSection);
var parts = lines[0].substr(2).split(' ');
return {
kind: parts[0],
port: parseInt(parts[1], 10),
protocol: parts[2],
fmt: parts.slice(3).join(' ')
};
};
SDPUtils.parseOLine = function(mediaSection) {
var line = SDPUtils.matchPrefix(mediaSection, 'o=')[0];
var parts = line.substr(2).split(' ');
return {
username: parts[0],
sessionId: parts[1],
sessionVersion: parseInt(parts[2], 10),
netType: parts[3],
addressType: parts[4],
address: parts[5]
};
};
// a very naive interpretation of a valid SDP.
SDPUtils.isValidSDP = function(blob) {
if (typeof blob !== 'string' || blob.length === 0) {
return false;
}
var lines = SDPUtils.splitLines(blob);
for (var i = 0; i < lines.length; i++) {
if (lines[i].length < 2 || lines[i].charAt(1) !== '=') {
return false;
}
// TODO: check the modifier a bit more.
}
return true;
};
// Expose public methods.
if (typeof module === 'object') {
module.exports = SDPUtils;
}
},{}],3:[function(require,module,exports){
(function (global){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var adapterFactory = require('./adapter_factory.js');
module.exports = adapterFactory({window: global.window});
}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{"./adapter_factory.js":4}],4:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('./utils');
// Shimming starts here.
module.exports = function(dependencies, opts) {
var window = dependencies && dependencies.window;
var options = {
shimChrome: true,
shimFirefox: true,
shimEdge: true,
shimSafari: true,
};
for (var key in opts) {
if (hasOwnProperty.call(opts, key)) {
options[key] = opts[key];
}
}
// Utils.
var logging = utils.log;
var browserDetails = utils.detectBrowser(window);
// Uncomment the line below if you want logging to occur, including logging
// for the switch statement below. Can also be turned on in the browser via
// adapter.disableLog(false), but then logging from the switch statement below
// will not appear.
// require('./utils').disableLog(false);
// Browser shims.
var chromeShim = require('./chrome/chrome_shim') || null;
var edgeShim = require('./edge/edge_shim') || null;
var firefoxShim = require('./firefox/firefox_shim') || null;
var safariShim = require('./safari/safari_shim') || null;
var commonShim = require('./common_shim') || null;
// Export to the adapter global object visible in the browser.
var adapter = {
browserDetails: browserDetails,
commonShim: commonShim,
extractVersion: utils.extractVersion,
disableLog: utils.disableLog,
disableWarnings: utils.disableWarnings
};
// Shim browser if found.
switch (browserDetails.browser) {
case 'chrome':
if (!chromeShim || !chromeShim.shimPeerConnection ||
!options.shimChrome) {
logging('Chrome shim is not included in this adapter release.');
return adapter;
}
logging('adapter.js shimming chrome.');
// Export to the adapter global object visible in the browser.
adapter.browserShim = chromeShim;
commonShim.shimCreateObjectURL(window);
chromeShim.shimGetUserMedia(window);
chromeShim.shimMediaStream(window);
chromeShim.shimSourceObject(window);
chromeShim.shimPeerConnection(window);
chromeShim.shimOnTrack(window);
chromeShim.shimAddTrackRemoveTrack(window);
chromeShim.shimGetSendersWithDtmf(window);
chromeShim.shimSenderReceiverGetStats(window);
chromeShim.fixNegotiationNeeded(window);
commonShim.shimRTCIceCandidate(window);
commonShim.shimMaxMessageSize(window);
commonShim.shimSendThrowTypeError(window);
break;
case 'firefox':
if (!firefoxShim || !firefoxShim.shimPeerConnection ||
!options.shimFirefox) {
logging('Firefox shim is not included in this adapter release.');
return adapter;
}
logging('adapter.js shimming firefox.');
// Export to the adapter global object visible in the browser.
adapter.browserShim = firefoxShim;
commonShim.shimCreateObjectURL(window);
firefoxShim.shimGetUserMedia(window);
firefoxShim.shimSourceObject(window);
firefoxShim.shimPeerConnection(window);
firefoxShim.shimOnTrack(window);
firefoxShim.shimRemoveStream(window);
firefoxShim.shimSenderGetStats(window);
firefoxShim.shimReceiverGetStats(window);
firefoxShim.shimRTCDataChannel(window);
commonShim.shimRTCIceCandidate(window);
commonShim.shimMaxMessageSize(window);
commonShim.shimSendThrowTypeError(window);
break;
case 'edge':
if (!edgeShim || !edgeShim.shimPeerConnection || !options.shimEdge) {
logging('MS edge shim is not included in this adapter release.');
return adapter;
}
logging('adapter.js shimming edge.');
// Export to the adapter global object visible in the browser.
adapter.browserShim = edgeShim;
commonShim.shimCreateObjectURL(window);
edgeShim.shimGetUserMedia(window);
edgeShim.shimPeerConnection(window);
edgeShim.shimReplaceTrack(window);
edgeShim.shimGetDisplayMedia(window);
// the edge shim implements the full RTCIceCandidate object.
commonShim.shimMaxMessageSize(window);
commonShim.shimSendThrowTypeError(window);
break;
case 'safari':
if (!safariShim || !options.shimSafari) {
logging('Safari shim is not included in this adapter release.');
return adapter;
}
logging('adapter.js shimming safari.');
// Export to the adapter global object visible in the browser.
adapter.browserShim = safariShim;
commonShim.shimCreateObjectURL(window);
safariShim.shimRTCIceServerUrls(window);
safariShim.shimCreateOfferLegacy(window);
safariShim.shimCallbacksAPI(window);
safariShim.shimLocalStreamsAPI(window);
safariShim.shimRemoteStreamsAPI(window);
safariShim.shimTrackEventTransceiver(window);
safariShim.shimGetUserMedia(window);
commonShim.shimRTCIceCandidate(window);
commonShim.shimMaxMessageSize(window);
commonShim.shimSendThrowTypeError(window);
break;
default:
logging('Unsupported browser!');
break;
}
return adapter;
};
},{"./chrome/chrome_shim":5,"./common_shim":7,"./edge/edge_shim":8,"./firefox/firefox_shim":11,"./safari/safari_shim":13,"./utils":14}],5:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils.js');
var logging = utils.log;
/* iterates the stats graph recursively. */
function walkStats(stats, base, resultSet) {
if (!base || resultSet.has(base.id)) {
return;
}
resultSet.set(base.id, base);
Object.keys(base).forEach(function(name) {
if (name.endsWith('Id')) {
walkStats(stats, stats.get(base[name]), resultSet);
} else if (name.endsWith('Ids')) {
base[name].forEach(function(id) {
walkStats(stats, stats.get(id), resultSet);
});
}
});
}
/* filter getStats for a sender/receiver track. */
function filterStats(result, track, outbound) {
var streamStatsType = outbound ? 'outbound-rtp' : 'inbound-rtp';
var filteredResult = new Map();
if (track === null) {
return filteredResult;
}
var trackStats = [];
result.forEach(function(value) {
if (value.type === 'track' &&
value.trackIdentifier === track.id) {
trackStats.push(value);
}
});
trackStats.forEach(function(trackStat) {
result.forEach(function(stats) {
if (stats.type === streamStatsType && stats.trackId === trackStat.id) {
walkStats(result, stats, filteredResult);
}
});
});
return filteredResult;
}
module.exports = {
shimGetUserMedia: require('./getusermedia'),
shimMediaStream: function(window) {
window.MediaStream = window.MediaStream || window.webkitMediaStream;
},
shimOnTrack: function(window) {
if (typeof window === 'object' && window.RTCPeerConnection && !('ontrack' in
window.RTCPeerConnection.prototype)) {
Object.defineProperty(window.RTCPeerConnection.prototype, 'ontrack', {
get: function() {
return this._ontrack;
},
set: function(f) {
if (this._ontrack) {
this.removeEventListener('track', this._ontrack);
}
this.addEventListener('track', this._ontrack = f);
},
enumerable: true,
configurable: true
});
var origSetRemoteDescription =
window.RTCPeerConnection.prototype.setRemoteDescription;
window.RTCPeerConnection.prototype.setRemoteDescription = function() {
var pc = this;
if (!pc._ontrackpoly) {
pc._ontrackpoly = function(e) {
// onaddstream does not fire when a track is added to an existing
// stream. But stream.onaddtrack is implemented so we use that.
e.stream.addEventListener('addtrack', function(te) {
var receiver;
if (window.RTCPeerConnection.prototype.getReceivers) {
receiver = pc.getReceivers().find(function(r) {
return r.track && r.track.id === te.track.id;
});
} else {
receiver = {track: te.track};
}
var event = new Event('track');
event.track = te.track;
event.receiver = receiver;
event.transceiver = {receiver: receiver};
event.streams = [e.stream];
pc.dispatchEvent(event);
});
e.stream.getTracks().forEach(function(track) {
var receiver;
if (window.RTCPeerConnection.prototype.getReceivers) {
receiver = pc.getReceivers().find(function(r) {
return r.track && r.track.id === track.id;
});
} else {
receiver = {track: track};
}
var event = new Event('track');
event.track = track;
event.receiver = receiver;
event.transceiver = {receiver: receiver};
event.streams = [e.stream];
pc.dispatchEvent(event);
});
};
pc.addEventListener('addstream', pc._ontrackpoly);
}
return origSetRemoteDescription.apply(pc, arguments);
};
} else {
// even if RTCRtpTransceiver is in window, it is only used and
// emitted in unified-plan. Unfortunately this means we need
// to unconditionally wrap the event.
utils.wrapPeerConnectionEvent(window, 'track', function(e) {
if (!e.transceiver) {
Object.defineProperty(e, 'transceiver',
{value: {receiver: e.receiver}});
}
return e;
});
}
},
shimGetSendersWithDtmf: function(window) {
// Overrides addTrack/removeTrack, depends on shimAddTrackRemoveTrack.
if (typeof window === 'object' && window.RTCPeerConnection &&
!('getSenders' in window.RTCPeerConnection.prototype) &&
'createDTMFSender' in window.RTCPeerConnection.prototype) {
var shimSenderWithDtmf = function(pc, track) {
return {
track: track,
get dtmf() {
if (this._dtmf === undefined) {
if (track.kind === 'audio') {
this._dtmf = pc.createDTMFSender(track);
} else {
this._dtmf = null;
}
}
return this._dtmf;
},
_pc: pc
};
};
// augment addTrack when getSenders is not available.
if (!window.RTCPeerConnection.prototype.getSenders) {
window.RTCPeerConnection.prototype.getSenders = function() {
this._senders = this._senders || [];
return this._senders.slice(); // return a copy of the internal state.
};
var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
window.RTCPeerConnection.prototype.addTrack = function(track, stream) {
var pc = this;
var sender = origAddTrack.apply(pc, arguments);
if (!sender) {
sender = shimSenderWithDtmf(pc, track);
pc._senders.push(sender);
}
return sender;
};
var origRemoveTrack = window.RTCPeerConnection.prototype.removeTrack;
window.RTCPeerConnection.prototype.removeTrack = function(sender) {
var pc = this;
origRemoveTrack.apply(pc, arguments);
var idx = pc._senders.indexOf(sender);
if (idx !== -1) {
pc._senders.splice(idx, 1);
}
};
}
var origAddStream = window.RTCPeerConnection.prototype.addStream;
window.RTCPeerConnection.prototype.addStream = function(stream) {
var pc = this;
pc._senders = pc._senders || [];
origAddStream.apply(pc, [stream]);
stream.getTracks().forEach(function(track) {
pc._senders.push(shimSenderWithDtmf(pc, track));
});
};
var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
window.RTCPeerConnection.prototype.removeStream = function(stream) {
var pc = this;
pc._senders = pc._senders || [];
origRemoveStream.apply(pc, [stream]);
stream.getTracks().forEach(function(track) {
var sender = pc._senders.find(function(s) {
return s.track === track;
});
if (sender) {
pc._senders.splice(pc._senders.indexOf(sender), 1); // remove sender
}
});
};
} else if (typeof window === 'object' && window.RTCPeerConnection &&
'getSenders' in window.RTCPeerConnection.prototype &&
'createDTMFSender' in window.RTCPeerConnection.prototype &&
window.RTCRtpSender &&
!('dtmf' in window.RTCRtpSender.prototype)) {
var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
window.RTCPeerConnection.prototype.getSenders = function() {
var pc = this;
var senders = origGetSenders.apply(pc, []);
senders.forEach(function(sender) {
sender._pc = pc;
});
return senders;
};
Object.defineProperty(window.RTCRtpSender.prototype, 'dtmf', {
get: function() {
if (this._dtmf === undefined) {
if (this.track.kind === 'audio') {
this._dtmf = this._pc.createDTMFSender(this.track);
} else {
this._dtmf = null;
}
}
return this._dtmf;
}
});
}
},
shimSenderReceiverGetStats: function(window) {
if (!(typeof window === 'object' && window.RTCPeerConnection &&
window.RTCRtpSender && window.RTCRtpReceiver)) {
return;
}
// shim sender stats.
if (!('getStats' in window.RTCRtpSender.prototype)) {
var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
if (origGetSenders) {
window.RTCPeerConnection.prototype.getSenders = function() {
var pc = this;
var senders = origGetSenders.apply(pc, []);
senders.forEach(function(sender) {
sender._pc = pc;
});
return senders;
};
}
var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
if (origAddTrack) {
window.RTCPeerConnection.prototype.addTrack = function() {
var sender = origAddTrack.apply(this, arguments);
sender._pc = this;
return sender;
};
}
window.RTCRtpSender.prototype.getStats = function() {
var sender = this;
return this._pc.getStats().then(function(result) {
/* Note: this will include stats of all senders that
* send a track with the same id as sender.track as
* it is not possible to identify the RTCRtpSender.
*/
return filterStats(result, sender.track, true);
});
};
}
// shim receiver stats.
if (!('getStats' in window.RTCRtpReceiver.prototype)) {
var origGetReceivers = window.RTCPeerConnection.prototype.getReceivers;
if (origGetReceivers) {
window.RTCPeerConnection.prototype.getReceivers = function() {
var pc = this;
var receivers = origGetReceivers.apply(pc, []);
receivers.forEach(function(receiver) {
receiver._pc = pc;
});
return receivers;
};
}
utils.wrapPeerConnectionEvent(window, 'track', function(e) {
e.receiver._pc = e.srcElement;
return e;
});
window.RTCRtpReceiver.prototype.getStats = function() {
var receiver = this;
return this._pc.getStats().then(function(result) {
return filterStats(result, receiver.track, false);
});
};
}
if (!('getStats' in window.RTCRtpSender.prototype &&
'getStats' in window.RTCRtpReceiver.prototype)) {
return;
}
// shim RTCPeerConnection.getStats(track).
var origGetStats = window.RTCPeerConnection.prototype.getStats;
window.RTCPeerConnection.prototype.getStats = function() {
var pc = this;
if (arguments.length > 0 &&
arguments[0] instanceof window.MediaStreamTrack) {
var track = arguments[0];
var sender;
var receiver;
var err;
pc.getSenders().forEach(function(s) {
if (s.track === track) {
if (sender) {
err = true;
} else {
sender = s;
}
}
});
pc.getReceivers().forEach(function(r) {
if (r.track === track) {
if (receiver) {
err = true;
} else {
receiver = r;
}
}
return r.track === track;
});
if (err || (sender && receiver)) {
return Promise.reject(new DOMException(
'There are more than one sender or receiver for the track.',
'InvalidAccessError'));
} else if (sender) {
return sender.getStats();
} else if (receiver) {
return receiver.getStats();
}
return Promise.reject(new DOMException(
'There is no sender or receiver for the track.',
'InvalidAccessError'));
}
return origGetStats.apply(pc, arguments);
};
},
shimSourceObject: function(window) {
var URL = window && window.URL;
if (typeof window === 'object') {
if (window.HTMLMediaElement &&
!('srcObject' in window.HTMLMediaElement.prototype)) {
// Shim the srcObject property, once, when HTMLMediaElement is found.
Object.defineProperty(window.HTMLMediaElement.prototype, 'srcObject', {
get: function() {
return this._srcObject;
},
set: function(stream) {
var self = this;
// Use _srcObject as a private property for this shim
this._srcObject = stream;
if (this.src) {
URL.revokeObjectURL(this.src);
}
if (!stream) {
this.src = '';
return undefined;
}
this.src = URL.createObjectURL(stream);
// We need to recreate the blob url when a track is added or
// removed. Doing it manually since we want to avoid a recursion.
stream.addEventListener('addtrack', function() {
if (self.src) {
URL.revokeObjectURL(self.src);
}
self.src = URL.createObjectURL(stream);
});
stream.addEventListener('removetrack', function() {
if (self.src) {
URL.revokeObjectURL(self.src);
}
self.src = URL.createObjectURL(stream);
});
}
});
}
}
},
shimAddTrackRemoveTrackWithNative: function(window) {
// shim addTrack/removeTrack with native variants in order to make
// the interactions with legacy getLocalStreams behave as in other browsers.
// Keeps a mapping stream.id => [stream, rtpsenders...]
window.RTCPeerConnection.prototype.getLocalStreams = function() {
var pc = this;
this._shimmedLocalStreams = this._shimmedLocalStreams || {};
return Object.keys(this._shimmedLocalStreams).map(function(streamId) {
return pc._shimmedLocalStreams[streamId][0];
});
};
var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
window.RTCPeerConnection.prototype.addTrack = function(track, stream) {
if (!stream) {
return origAddTrack.apply(this, arguments);
}
this._shimmedLocalStreams = this._shimmedLocalStreams || {};
var sender = origAddTrack.apply(this, arguments);
if (!this._shimmedLocalStreams[stream.id]) {
this._shimmedLocalStreams[stream.id] = [stream, sender];
} else if (this._shimmedLocalStreams[stream.id].indexOf(sender) === -1) {
this._shimmedLocalStreams[stream.id].push(sender);
}
return sender;
};
var origAddStream = window.RTCPeerConnection.prototype.addStream;
window.RTCPeerConnection.prototype.addStream = function(stream) {
var pc = this;
this._shimmedLocalStreams = this._shimmedLocalStreams || {};
stream.getTracks().forEach(function(track) {
var alreadyExists = pc.getSenders().find(function(s) {
return s.track === track;
});
if (alreadyExists) {
throw new DOMException('Track already exists.',
'InvalidAccessError');
}
});
var existingSenders = pc.getSenders();
origAddStream.apply(this, arguments);
var newSenders = pc.getSenders().filter(function(newSender) {
return existingSenders.indexOf(newSender) === -1;
});
this._shimmedLocalStreams[stream.id] = [stream].concat(newSenders);
};
var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
window.RTCPeerConnection.prototype.removeStream = function(stream) {
this._shimmedLocalStreams = this._shimmedLocalStreams || {};
delete this._shimmedLocalStreams[stream.id];
return origRemoveStream.apply(this, arguments);
};
var origRemoveTrack = window.RTCPeerConnection.prototype.removeTrack;
window.RTCPeerConnection.prototype.removeTrack = function(sender) {
var pc = this;
this._shimmedLocalStreams = this._shimmedLocalStreams || {};
if (sender) {
Object.keys(this._shimmedLocalStreams).forEach(function(streamId) {
var idx = pc._shimmedLocalStreams[streamId].indexOf(sender);
if (idx !== -1) {
pc._shimmedLocalStreams[streamId].splice(idx, 1);
}
if (pc._shimmedLocalStreams[streamId].length === 1) {
delete pc._shimmedLocalStreams[streamId];
}
});
}
return origRemoveTrack.apply(this, arguments);
};
},
shimAddTrackRemoveTrack: function(window) {
var browserDetails = utils.detectBrowser(window);
// shim addTrack and removeTrack.
if (window.RTCPeerConnection.prototype.addTrack &&
browserDetails.version >= 65) {
return this.shimAddTrackRemoveTrackWithNative(window);
}
// also shim pc.getLocalStreams when addTrack is shimmed
// to return the original streams.
var origGetLocalStreams = window.RTCPeerConnection.prototype
.getLocalStreams;
window.RTCPeerConnection.prototype.getLocalStreams = function() {
var pc = this;
var nativeStreams = origGetLocalStreams.apply(this);
pc._reverseStreams = pc._reverseStreams || {};
return nativeStreams.map(function(stream) {
return pc._reverseStreams[stream.id];
});
};
var origAddStream = window.RTCPeerConnection.prototype.addStream;
window.RTCPeerConnection.prototype.addStream = function(stream) {
var pc = this;
pc._streams = pc._streams || {};
pc._reverseStreams = pc._reverseStreams || {};
stream.getTracks().forEach(function(track) {
var alreadyExists = pc.getSenders().find(function(s) {
return s.track === track;
});
if (alreadyExists) {
throw new DOMException('Track already exists.',
'InvalidAccessError');
}
});
// Add identity mapping for consistency with addTrack.
// Unless this is being used with a stream from addTrack.
if (!pc._reverseStreams[stream.id]) {
var newStream = new window.MediaStream(stream.getTracks());
pc._streams[stream.id] = newStream;
pc._reverseStreams[newStream.id] = stream;
stream = newStream;
}
origAddStream.apply(pc, [stream]);
};
var origRemoveStream = window.RTCPeerConnection.prototype.removeStream;
window.RTCPeerConnection.prototype.removeStream = function(stream) {
var pc = this;
pc._streams = pc._streams || {};
pc._reverseStreams = pc._reverseStreams || {};
origRemoveStream.apply(pc, [(pc._streams[stream.id] || stream)]);
delete pc._reverseStreams[(pc._streams[stream.id] ?
pc._streams[stream.id].id : stream.id)];
delete pc._streams[stream.id];
};
window.RTCPeerConnection.prototype.addTrack = function(track, stream) {
var pc = this;
if (pc.signalingState === 'closed') {
throw new DOMException(
'The RTCPeerConnection\'s signalingState is \'closed\'.',
'InvalidStateError');
}
var streams = [].slice.call(arguments, 1);
if (streams.length !== 1 ||
!streams[0].getTracks().find(function(t) {
return t === track;
})) {
// this is not fully correct but all we can manage without
// [[associated MediaStreams]] internal slot.
throw new DOMException(
'The adapter.js addTrack polyfill only supports a single ' +
' stream which is associated with the specified track.',
'NotSupportedError');
}
var alreadyExists = pc.getSenders().find(function(s) {
return s.track === track;
});
if (alreadyExists) {
throw new DOMException('Track already exists.',
'InvalidAccessError');
}
pc._streams = pc._streams || {};
pc._reverseStreams = pc._reverseStreams || {};
var oldStream = pc._streams[stream.id];
if (oldStream) {
// this is using odd Chrome behaviour, use with caution:
// https://bugs.chromium.org/p/webrtc/issues/detail?id=7815
// Note: we rely on the high-level addTrack/dtmf shim to
// create the sender with a dtmf sender.
oldStream.addTrack(track);
// Trigger ONN async.
Promise.resolve().then(function() {
pc.dispatchEvent(new Event('negotiationneeded'));
});
} else {
var newStream = new window.MediaStream([track]);
pc._streams[stream.id] = newStream;
pc._reverseStreams[newStream.id] = stream;
pc.addStream(newStream);
}
return pc.getSenders().find(function(s) {
return s.track === track;
});
};
// replace the internal stream id with the external one and
// vice versa.
function replaceInternalStreamId(pc, description) {
var sdp = description.sdp;
Object.keys(pc._reverseStreams || []).forEach(function(internalId) {
var externalStream = pc._reverseStreams[internalId];
var internalStream = pc._streams[externalStream.id];
sdp = sdp.replace(new RegExp(internalStream.id, 'g'),
externalStream.id);
});
return new RTCSessionDescription({
type: description.type,
sdp: sdp
});
}
function replaceExternalStreamId(pc, description) {
var sdp = description.sdp;
Object.keys(pc._reverseStreams || []).forEach(function(internalId) {
var externalStream = pc._reverseStreams[internalId];
var internalStream = pc._streams[externalStream.id];
sdp = sdp.replace(new RegExp(externalStream.id, 'g'),
internalStream.id);
});
return new RTCSessionDescription({
type: description.type,
sdp: sdp
});
}
['createOffer', 'createAnswer'].forEach(function(method) {
var nativeMethod = window.RTCPeerConnection.prototype[method];
window.RTCPeerConnection.prototype[method] = function() {
var pc = this;
var args = arguments;
var isLegacyCall = arguments.length &&
typeof arguments[0] === 'function';
if (isLegacyCall) {
return nativeMethod.apply(pc, [
function(description) {
var desc = replaceInternalStreamId(pc, description);
args[0].apply(null, [desc]);
},
function(err) {
if (args[1]) {
args[1].apply(null, err);
}
}, arguments[2]
]);
}
return nativeMethod.apply(pc, arguments)
.then(function(description) {
return replaceInternalStreamId(pc, description);
});
};
});
var origSetLocalDescription =
window.RTCPeerConnection.prototype.setLocalDescription;
window.RTCPeerConnection.prototype.setLocalDescription = function() {
var pc = this;
if (!arguments.length || !arguments[0].type) {
return origSetLocalDescription.apply(pc, arguments);
}
arguments[0] = replaceExternalStreamId(pc, arguments[0]);
return origSetLocalDescription.apply(pc, arguments);
};
// TODO: mangle getStats: https://w3c.github.io/webrtc-stats/#dom-rtcmediastreamstats-streamidentifier
var origLocalDescription = Object.getOwnPropertyDescriptor(
window.RTCPeerConnection.prototype, 'localDescription');
Object.defineProperty(window.RTCPeerConnection.prototype,
'localDescription', {
get: function() {
var pc = this;
var description = origLocalDescription.get.apply(this);
if (description.type === '') {
return description;
}
return replaceInternalStreamId(pc, description);
}
});
window.RTCPeerConnection.prototype.removeTrack = function(sender) {
var pc = this;
if (pc.signalingState === 'closed') {
throw new DOMException(
'The RTCPeerConnection\'s signalingState is \'closed\'.',
'InvalidStateError');
}
// We can not yet check for sender instanceof RTCRtpSender
// since we shim RTPSender. So we check if sender._pc is set.
if (!sender._pc) {
throw new DOMException('Argument 1 of RTCPeerConnection.removeTrack ' +
'does not implement interface RTCRtpSender.', 'TypeError');
}
var isLocal = sender._pc === pc;
if (!isLocal) {
throw new DOMException('Sender was not created by this connection.',
'InvalidAccessError');
}
// Search for the native stream the senders track belongs to.
pc._streams = pc._streams || {};
var stream;
Object.keys(pc._streams).forEach(function(streamid) {
var hasTrack = pc._streams[streamid].getTracks().find(function(track) {
return sender.track === track;
});
if (hasTrack) {
stream = pc._streams[streamid];
}
});
if (stream) {
if (stream.getTracks().length === 1) {
// if this is the last track of the stream, remove the stream. This
// takes care of any shimmed _senders.
pc.removeStream(pc._reverseStreams[stream.id]);
} else {
// relying on the same odd chrome behaviour as above.
stream.removeTrack(sender.track);
}
pc.dispatchEvent(new Event('negotiationneeded'));
}
};
},
shimPeerConnection: function(window) {
var browserDetails = utils.detectBrowser(window);
// The RTCPeerConnection object.
if (!window.RTCPeerConnection && window.webkitRTCPeerConnection) {
window.RTCPeerConnection = function(pcConfig, pcConstraints) {
// Translate iceTransportPolicy to iceTransports,
// see https://code.google.com/p/webrtc/issues/detail?id=4869
// this was fixed in M56 along with unprefixing RTCPeerConnection.
logging('PeerConnection');
if (pcConfig && pcConfig.iceTransportPolicy) {
pcConfig.iceTransports = pcConfig.iceTransportPolicy;
}
return new window.webkitRTCPeerConnection(pcConfig, pcConstraints);
};
window.RTCPeerConnection.prototype =
window.webkitRTCPeerConnection.prototype;
// wrap static methods. Currently just generateCertificate.
if (window.webkitRTCPeerConnection.generateCertificate) {
Object.defineProperty(window.RTCPeerConnection, 'generateCertificate', {
get: function() {
return window.webkitRTCPeerConnection.generateCertificate;
}
});
}
}
var origGetStats = window.RTCPeerConnection.prototype.getStats;
window.RTCPeerConnection.prototype.getStats = function(selector,
successCallback, errorCallback) {
var pc = this;
var args = arguments;
// If selector is a function then we are in the old style stats so just
// pass back the original getStats format to avoid breaking old users.
if (arguments.length > 0 && typeof selector === 'function') {
return origGetStats.apply(this, arguments);
}
// When spec-style getStats is supported, return those when called with
// either no arguments or the selector argument is null.
if (origGetStats.length === 0 && (arguments.length === 0 ||
typeof arguments[0] !== 'function')) {
return origGetStats.apply(this, []);
}
var fixChromeStats_ = function(response) {
var standardReport = {};
var reports = response.result();
reports.forEach(function(report) {
var standardStats = {
id: report.id,
timestamp: report.timestamp,
type: {
localcandidate: 'local-candidate',
remotecandidate: 'remote-candidate'
}[report.type] || report.type
};
report.names().forEach(function(name) {
standardStats[name] = report.stat(name);
});
standardReport[standardStats.id] = standardStats;
});
return standardReport;
};
// shim getStats with maplike support
var makeMapStats = function(stats) {
return new Map(Object.keys(stats).map(function(key) {
return [key, stats[key]];
}));
};
if (arguments.length >= 2) {
var successCallbackWrapper_ = function(response) {
args[1](makeMapStats(fixChromeStats_(response)));
};
return origGetStats.apply(this, [successCallbackWrapper_,
arguments[0]]);
}
// promise-support
return new Promise(function(resolve, reject) {
origGetStats.apply(pc, [
function(response) {
resolve(makeMapStats(fixChromeStats_(response)));
}, reject]);
}).then(successCallback, errorCallback);
};
// add promise support -- natively available in Chrome 51
if (browserDetails.version < 51) {
['setLocalDescription', 'setRemoteDescription', 'addIceCandidate']
.forEach(function(method) {
var nativeMethod = window.RTCPeerConnection.prototype[method];
window.RTCPeerConnection.prototype[method] = function() {
var args = arguments;
var pc = this;
var promise = new Promise(function(resolve, reject) {
nativeMethod.apply(pc, [args[0], resolve, reject]);
});
if (args.length < 2) {
return promise;
}
return promise.then(function() {
args[1].apply(null, []);
},
function(err) {
if (args.length >= 3) {
args[2].apply(null, [err]);
}
});
};
});
}
// promise support for createOffer and createAnswer. Available (without
// bugs) since M52: crbug/619289
if (browserDetails.version < 52) {
['createOffer', 'createAnswer'].forEach(function(method) {
var nativeMethod = window.RTCPeerConnection.prototype[method];
window.RTCPeerConnection.prototype[method] = function() {
var pc = this;
if (arguments.length < 1 || (arguments.length === 1 &&
typeof arguments[0] === 'object')) {
var opts = arguments.length === 1 ? arguments[0] : undefined;
return new Promise(function(resolve, reject) {
nativeMethod.apply(pc, [resolve, reject, opts]);
});
}
return nativeMethod.apply(this, arguments);
};
});
}
// shim implicit creation of RTCSessionDescription/RTCIceCandidate
['setLocalDescription', 'setRemoteDescription', 'addIceCandidate']
.forEach(function(method) {
var nativeMethod = window.RTCPeerConnection.prototype[method];
window.RTCPeerConnection.prototype[method] = function() {
arguments[0] = new ((method === 'addIceCandidate') ?
window.RTCIceCandidate :
window.RTCSessionDescription)(arguments[0]);
return nativeMethod.apply(this, arguments);
};
});
// support for addIceCandidate(null or undefined)
var nativeAddIceCandidate =
window.RTCPeerConnection.prototype.addIceCandidate;
window.RTCPeerConnection.prototype.addIceCandidate = function() {
if (!arguments[0]) {
if (arguments[1]) {
arguments[1].apply(null);
}
return Promise.resolve();
}
return nativeAddIceCandidate.apply(this, arguments);
};
},
fixNegotiationNeeded: function(window) {
utils.wrapPeerConnectionEvent(window, 'negotiationneeded', function(e) {
var pc = e.target;
if (pc.signalingState !== 'stable') {
return;
}
return e;
});
},
shimGetDisplayMedia: function(window, getSourceId) {
if (!window.navigator || !window.navigator.mediaDevices ||
'getDisplayMedia' in window.navigator.mediaDevices) {
return;
}
// getSourceId is a function that returns a promise resolving with
// the sourceId of the screen/window/tab to be shared.
if (typeof getSourceId !== 'function') {
console.error('shimGetDisplayMedia: getSourceId argument is not ' +
'a function');
return;
}
window.navigator.mediaDevices.getDisplayMedia = function(constraints) {
return getSourceId(constraints)
.then(function(sourceId) {
var widthSpecified = constraints.video && constraints.video.width;
var heightSpecified = constraints.video && constraints.video.height;
var frameRateSpecified = constraints.video &&
constraints.video.frameRate;
constraints.video = {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: sourceId,
maxFrameRate: frameRateSpecified || 3
}
};
if (widthSpecified) {
constraints.video.mandatory.maxWidth = widthSpecified;
}
if (heightSpecified) {
constraints.video.mandatory.maxHeight = heightSpecified;
}
return window.navigator.mediaDevices.getUserMedia(constraints);
});
};
window.navigator.getDisplayMedia = function(constraints) {
utils.deprecated('navigator.getDisplayMedia',
'navigator.mediaDevices.getDisplayMedia');
return window.navigator.mediaDevices.getDisplayMedia(constraints);
};
}
};
},{"../utils.js":14,"./getusermedia":6}],6:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils.js');
var logging = utils.log;
// Expose public methods.
module.exports = function(window) {
var browserDetails = utils.detectBrowser(window);
var navigator = window && window.navigator;
var constraintsToChrome_ = function(c) {
if (typeof c !== 'object' || c.mandatory || c.optional) {
return c;
}
var cc = {};
Object.keys(c).forEach(function(key) {
if (key === 'require' || key === 'advanced' || key === 'mediaSource') {
return;
}
var r = (typeof c[key] === 'object') ? c[key] : {ideal: c[key]};
if (r.exact !== undefined && typeof r.exact === 'number') {
r.min = r.max = r.exact;
}
var oldname_ = function(prefix, name) {
if (prefix) {
return prefix + name.charAt(0).toUpperCase() + name.slice(1);
}
return (name === 'deviceId') ? 'sourceId' : name;
};
if (r.ideal !== undefined) {
cc.optional = cc.optional || [];
var oc = {};
if (typeof r.ideal === 'number') {
oc[oldname_('min', key)] = r.ideal;
cc.optional.push(oc);
oc = {};
oc[oldname_('max', key)] = r.ideal;
cc.optional.push(oc);
} else {
oc[oldname_('', key)] = r.ideal;
cc.optional.push(oc);
}
}
if (r.exact !== undefined && typeof r.exact !== 'number') {
cc.mandatory = cc.mandatory || {};
cc.mandatory[oldname_('', key)] = r.exact;
} else {
['min', 'max'].forEach(function(mix) {
if (r[mix] !== undefined) {
cc.mandatory = cc.mandatory || {};
cc.mandatory[oldname_(mix, key)] = r[mix];
}
});
}
});
if (c.advanced) {
cc.optional = (cc.optional || []).concat(c.advanced);
}
return cc;
};
var shimConstraints_ = function(constraints, func) {
if (browserDetails.version >= 61) {
return func(constraints);
}
constraints = JSON.parse(JSON.stringify(constraints));
if (constraints && typeof constraints.audio === 'object') {
var remap = function(obj, a, b) {
if (a in obj && !(b in obj)) {
obj[b] = obj[a];
delete obj[a];
}
};
constraints = JSON.parse(JSON.stringify(constraints));
remap(constraints.audio, 'autoGainControl', 'googAutoGainControl');
remap(constraints.audio, 'noiseSuppression', 'googNoiseSuppression');
constraints.audio = constraintsToChrome_(constraints.audio);
}
if (constraints && typeof constraints.video === 'object') {
// Shim facingMode for mobile & surface pro.
var face = constraints.video.facingMode;
face = face && ((typeof face === 'object') ? face : {ideal: face});
var getSupportedFacingModeLies = browserDetails.version < 66;
if ((face && (face.exact === 'user' || face.exact === 'environment' ||
face.ideal === 'user' || face.ideal === 'environment')) &&
!(navigator.mediaDevices.getSupportedConstraints &&
navigator.mediaDevices.getSupportedConstraints().facingMode &&
!getSupportedFacingModeLies)) {
delete constraints.video.facingMode;
var matches;
if (face.exact === 'environment' || face.ideal === 'environment') {
matches = ['back', 'rear'];
} else if (face.exact === 'user' || face.ideal === 'user') {
matches = ['front'];
}
if (matches) {
// Look for matches in label, or use last cam for back (typical).
return navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices = devices.filter(function(d) {
return d.kind === 'videoinput';
});
var dev = devices.find(function(d) {
return matches.some(function(match) {
return d.label.toLowerCase().indexOf(match) !== -1;
});
});
if (!dev && devices.length && matches.indexOf('back') !== -1) {
dev = devices[devices.length - 1]; // more likely the back cam
}
if (dev) {
constraints.video.deviceId = face.exact ? {exact: dev.deviceId} :
{ideal: dev.deviceId};
}
constraints.video = constraintsToChrome_(constraints.video);
logging('chrome: ' + JSON.stringify(constraints));
return func(constraints);
});
}
}
constraints.video = constraintsToChrome_(constraints.video);
}
logging('chrome: ' + JSON.stringify(constraints));
return func(constraints);
};
var shimError_ = function(e) {
if (browserDetails.version >= 64) {
return e;
}
return {
name: {
PermissionDeniedError: 'NotAllowedError',
PermissionDismissedError: 'NotAllowedError',
InvalidStateError: 'NotAllowedError',
DevicesNotFoundError: 'NotFoundError',
ConstraintNotSatisfiedError: 'OverconstrainedError',
TrackStartError: 'NotReadableError',
MediaDeviceFailedDueToShutdown: 'NotAllowedError',
MediaDeviceKillSwitchOn: 'NotAllowedError',
TabCaptureError: 'AbortError',
ScreenCaptureError: 'AbortError',
DeviceCaptureError: 'AbortError'
}[e.name] || e.name,
message: e.message,
constraint: e.constraint || e.constraintName,
toString: function() {
return this.name + (this.message && ': ') + this.message;
}
};
};
var getUserMedia_ = function(constraints, onSuccess, onError) {
shimConstraints_(constraints, function(c) {
navigator.webkitGetUserMedia(c, onSuccess, function(e) {
if (onError) {
onError(shimError_(e));
}
});
});
};
navigator.getUserMedia = getUserMedia_;
// Returns the result of getUserMedia as a Promise.
var getUserMediaPromise_ = function(constraints) {
return new Promise(function(resolve, reject) {
navigator.getUserMedia(constraints, resolve, reject);
});
};
if (!navigator.mediaDevices) {
navigator.mediaDevices = {
getUserMedia: getUserMediaPromise_,
enumerateDevices: function() {
return new Promise(function(resolve) {
var kinds = {audio: 'audioinput', video: 'videoinput'};
return window.MediaStreamTrack.getSources(function(devices) {
resolve(devices.map(function(device) {
return {label: device.label,
kind: kinds[device.kind],
deviceId: device.id,
groupId: ''};
}));
});
});
},
getSupportedConstraints: function() {
return {
deviceId: true, echoCancellation: true, facingMode: true,
frameRate: true, height: true, width: true
};
}
};
}
// A shim for getUserMedia method on the mediaDevices object.
// TODO(KaptenJansson) remove once implemented in Chrome stable.
if (!navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia = function(constraints) {
return getUserMediaPromise_(constraints);
};
} else {
// Even though Chrome 45 has navigator.mediaDevices and a getUserMedia
// function which returns a Promise, it does not accept spec-style
// constraints.
var origGetUserMedia = navigator.mediaDevices.getUserMedia.
bind(navigator.mediaDevices);
navigator.mediaDevices.getUserMedia = function(cs) {
return shimConstraints_(cs, function(c) {
return origGetUserMedia(c).then(function(stream) {
if (c.audio && !stream.getAudioTracks().length ||
c.video && !stream.getVideoTracks().length) {
stream.getTracks().forEach(function(track) {
track.stop();
});
throw new DOMException('', 'NotFoundError');
}
return stream;
}, function(e) {
return Promise.reject(shimError_(e));
});
});
};
}
// Dummy devicechange event methods.
// TODO(KaptenJansson) remove once implemented in Chrome stable.
if (typeof navigator.mediaDevices.addEventListener === 'undefined') {
navigator.mediaDevices.addEventListener = function() {
logging('Dummy mediaDevices.addEventListener called.');
};
}
if (typeof navigator.mediaDevices.removeEventListener === 'undefined') {
navigator.mediaDevices.removeEventListener = function() {
logging('Dummy mediaDevices.removeEventListener called.');
};
}
};
},{"../utils.js":14}],7:[function(require,module,exports){
/*
* Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var SDPUtils = require('sdp');
var utils = require('./utils');
module.exports = {
shimRTCIceCandidate: function(window) {
// foundation is arbitrarily chosen as an indicator for full support for
// https://w3c.github.io/webrtc-pc/#rtcicecandidate-interface
if (!window.RTCIceCandidate || (window.RTCIceCandidate && 'foundation' in
window.RTCIceCandidate.prototype)) {
return;
}
var NativeRTCIceCandidate = window.RTCIceCandidate;
window.RTCIceCandidate = function(args) {
// Remove the a= which shouldn't be part of the candidate string.
if (typeof args === 'object' && args.candidate &&
args.candidate.indexOf('a=') === 0) {
args = JSON.parse(JSON.stringify(args));
args.candidate = args.candidate.substr(2);
}
if (args.candidate && args.candidate.length) {
// Augment the native candidate with the parsed fields.
var nativeCandidate = new NativeRTCIceCandidate(args);
var parsedCandidate = SDPUtils.parseCandidate(args.candidate);
var augmentedCandidate = Object.assign(nativeCandidate,
parsedCandidate);
// Add a serializer that does not serialize the extra attributes.
augmentedCandidate.toJSON = function() {
return {
candidate: augmentedCandidate.candidate,
sdpMid: augmentedCandidate.sdpMid,
sdpMLineIndex: augmentedCandidate.sdpMLineIndex,
usernameFragment: augmentedCandidate.usernameFragment,
};
};
return augmentedCandidate;
}
return new NativeRTCIceCandidate(args);
};
window.RTCIceCandidate.prototype = NativeRTCIceCandidate.prototype;
// Hook up the augmented candidate in onicecandidate and
// addEventListener('icecandidate', ...)
utils.wrapPeerConnectionEvent(window, 'icecandidate', function(e) {
if (e.candidate) {
Object.defineProperty(e, 'candidate', {
value: new window.RTCIceCandidate(e.candidate),
writable: 'false'
});
}
return e;
});
},
// shimCreateObjectURL must be called before shimSourceObject to avoid loop.
shimCreateObjectURL: function(window) {
var URL = window && window.URL;
if (!(typeof window === 'object' && window.HTMLMediaElement &&
'srcObject' in window.HTMLMediaElement.prototype &&
URL.createObjectURL && URL.revokeObjectURL)) {
// Only shim CreateObjectURL using srcObject if srcObject exists.
return undefined;
}
var nativeCreateObjectURL = URL.createObjectURL.bind(URL);
var nativeRevokeObjectURL = URL.revokeObjectURL.bind(URL);
var streams = new Map(), newId = 0;
URL.createObjectURL = function(stream) {
if ('getTracks' in stream) {
var url = 'polyblob:' + (++newId);
streams.set(url, stream);
utils.deprecated('URL.createObjectURL(stream)',
'elem.srcObject = stream');
return url;
}
return nativeCreateObjectURL(stream);
};
URL.revokeObjectURL = function(url) {
nativeRevokeObjectURL(url);
streams.delete(url);
};
var dsc = Object.getOwnPropertyDescriptor(window.HTMLMediaElement.prototype,
'src');
Object.defineProperty(window.HTMLMediaElement.prototype, 'src', {
get: function() {
return dsc.get.apply(this);
},
set: function(url) {
this.srcObject = streams.get(url) || null;
return dsc.set.apply(this, [url]);
}
});
var nativeSetAttribute = window.HTMLMediaElement.prototype.setAttribute;
window.HTMLMediaElement.prototype.setAttribute = function() {
if (arguments.length === 2 &&
('' + arguments[0]).toLowerCase() === 'src') {
this.srcObject = streams.get(arguments[1]) || null;
}
return nativeSetAttribute.apply(this, arguments);
};
},
shimMaxMessageSize: function(window) {
if (window.RTCSctpTransport || !window.RTCPeerConnection) {
return;
}
var browserDetails = utils.detectBrowser(window);
if (!('sctp' in window.RTCPeerConnection.prototype)) {
Object.defineProperty(window.RTCPeerConnection.prototype, 'sctp', {
get: function() {
return typeof this._sctp === 'undefined' ? null : this._sctp;
}
});
}
var sctpInDescription = function(description) {
var sections = SDPUtils.splitSections(description.sdp);
sections.shift();
return sections.some(function(mediaSection) {
var mLine = SDPUtils.parseMLine(mediaSection);
return mLine && mLine.kind === 'application'
&& mLine.protocol.indexOf('SCTP') !== -1;
});
};
var getRemoteFirefoxVersion = function(description) {
// TODO: Is there a better solution for detecting Firefox?
var match = description.sdp.match(/mozilla...THIS_IS_SDPARTA-(\d+)/);
if (match === null || match.length < 2) {
return -1;
}
var version = parseInt(match[1], 10);
// Test for NaN (yes, this is ugly)
return version !== version ? -1 : version;
};
var getCanSendMaxMessageSize = function(remoteIsFirefox) {
// Every implementation we know can send at least 64 KiB.
// Note: Although Chrome is technically able to send up to 256 KiB, the
// data does not reach the other peer reliably.
// See: https://bugs.chromium.org/p/webrtc/issues/detail?id=8419
var canSendMaxMessageSize = 65536;
if (browserDetails.browser === 'firefox') {
if (browserDetails.version < 57) {
if (remoteIsFirefox === -1) {
// FF < 57 will send in 16 KiB chunks using the deprecated PPID
// fragmentation.
canSendMaxMessageSize = 16384;
} else {
// However, other FF (and RAWRTC) can reassemble PPID-fragmented
// messages. Thus, supporting ~2 GiB when sending.
canSendMaxMessageSize = 2147483637;
}
} else if (browserDetails.version < 60) {
// Currently, all FF >= 57 will reset the remote maximum message size
// to the default value when a data channel is created at a later
// stage. :(
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1426831
canSendMaxMessageSize =
browserDetails.version === 57 ? 65535 : 65536;
} else {
// FF >= 60 supports sending ~2 GiB
canSendMaxMessageSize = 2147483637;
}
}
return canSendMaxMessageSize;
};
var getMaxMessageSize = function(description, remoteIsFirefox) {
// Note: 65536 bytes is the default value from the SDP spec. Also,
// every implementation we know supports receiving 65536 bytes.
var maxMessageSize = 65536;
// FF 57 has a slightly incorrect default remote max message size, so
// we need to adjust it here to avoid a failure when sending.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1425697
if (browserDetails.browser === 'firefox'
&& browserDetails.version === 57) {
maxMessageSize = 65535;
}
var match = SDPUtils.matchPrefix(description.sdp, 'a=max-message-size:');
if (match.length > 0) {
maxMessageSize = parseInt(match[0].substr(19), 10);
} else if (browserDetails.browser === 'firefox' &&
remoteIsFirefox !== -1) {
// If the maximum message size is not present in the remote SDP and
// both local and remote are Firefox, the remote peer can receive
// ~2 GiB.
maxMessageSize = 2147483637;
}
return maxMessageSize;
};
var origSetRemoteDescription =
window.RTCPeerConnection.prototype.setRemoteDescription;
window.RTCPeerConnection.prototype.setRemoteDescription = function() {
var pc = this;
pc._sctp = null;
if (sctpInDescription(arguments[0])) {
// Check if the remote is FF.
var isFirefox = getRemoteFirefoxVersion(arguments[0]);
// Get the maximum message size the local peer is capable of sending
var canSendMMS = getCanSendMaxMessageSize(isFirefox);
// Get the maximum message size of the remote peer.
var remoteMMS = getMaxMessageSize(arguments[0], isFirefox);
// Determine final maximum message size
var maxMessageSize;
if (canSendMMS === 0 && remoteMMS === 0) {
maxMessageSize = Number.POSITIVE_INFINITY;
} else if (canSendMMS === 0 || remoteMMS === 0) {
maxMessageSize = Math.max(canSendMMS, remoteMMS);
} else {
maxMessageSize = Math.min(canSendMMS, remoteMMS);
}
// Create a dummy RTCSctpTransport object and the 'maxMessageSize'
// attribute.
var sctp = {};
Object.defineProperty(sctp, 'maxMessageSize', {
get: function() {
return maxMessageSize;
}
});
pc._sctp = sctp;
}
return origSetRemoteDescription.apply(pc, arguments);
};
},
shimSendThrowTypeError: function(window) {
if (!(window.RTCPeerConnection &&
'createDataChannel' in window.RTCPeerConnection.prototype)) {
return;
}
// Note: Although Firefox >= 57 has a native implementation, the maximum
// message size can be reset for all data channels at a later stage.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1426831
function wrapDcSend(dc, pc) {
var origDataChannelSend = dc.send;
dc.send = function() {
var data = arguments[0];
var length = data.length || data.size || data.byteLength;
if (dc.readyState === 'open' &&
pc.sctp && length > pc.sctp.maxMessageSize) {
throw new TypeError('Message too large (can send a maximum of ' +
pc.sctp.maxMessageSize + ' bytes)');
}
return origDataChannelSend.apply(dc, arguments);
};
}
var origCreateDataChannel =
window.RTCPeerConnection.prototype.createDataChannel;
window.RTCPeerConnection.prototype.createDataChannel = function() {
var pc = this;
var dataChannel = origCreateDataChannel.apply(pc, arguments);
wrapDcSend(dataChannel, pc);
return dataChannel;
};
utils.wrapPeerConnectionEvent(window, 'datachannel', function(e) {
wrapDcSend(e.channel, e.target);
return e;
});
}
};
},{"./utils":14,"sdp":2}],8:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils');
var filterIceServers = require('./filtericeservers');
var shimRTCPeerConnection = require('rtcpeerconnection-shim');
module.exports = {
shimGetUserMedia: require('./getusermedia'),
shimPeerConnection: function(window) {
var browserDetails = utils.detectBrowser(window);
if (window.RTCIceGatherer) {
if (!window.RTCIceCandidate) {
window.RTCIceCandidate = function(args) {
return args;
};
}
if (!window.RTCSessionDescription) {
window.RTCSessionDescription = function(args) {
return args;
};
}
// this adds an additional event listener to MediaStrackTrack that signals
// when a tracks enabled property was changed. Workaround for a bug in
// addStream, see below. No longer required in 15025+
if (browserDetails.version < 15025) {
var origMSTEnabled = Object.getOwnPropertyDescriptor(
window.MediaStreamTrack.prototype, 'enabled');
Object.defineProperty(window.MediaStreamTrack.prototype, 'enabled', {
set: function(value) {
origMSTEnabled.set.call(this, value);
var ev = new Event('enabled');
ev.enabled = value;
this.dispatchEvent(ev);
}
});
}
}
// ORTC defines the DTMF sender a bit different.
// https://github.com/w3c/ortc/issues/714
if (window.RTCRtpSender && !('dtmf' in window.RTCRtpSender.prototype)) {
Object.defineProperty(window.RTCRtpSender.prototype, 'dtmf', {
get: function() {
if (this._dtmf === undefined) {
if (this.track.kind === 'audio') {
this._dtmf = new window.RTCDtmfSender(this);
} else if (this.track.kind === 'video') {
this._dtmf = null;
}
}
return this._dtmf;
}
});
}
// Edge currently only implements the RTCDtmfSender, not the
// RTCDTMFSender alias. See http://draft.ortc.org/#rtcdtmfsender2*
if (window.RTCDtmfSender && !window.RTCDTMFSender) {
window.RTCDTMFSender = window.RTCDtmfSender;
}
var RTCPeerConnectionShim = shimRTCPeerConnection(window,
browserDetails.version);
window.RTCPeerConnection = function(config) {
if (config && config.iceServers) {
config.iceServers = filterIceServers(config.iceServers);
}
return new RTCPeerConnectionShim(config);
};
window.RTCPeerConnection.prototype = RTCPeerConnectionShim.prototype;
},
shimReplaceTrack: function(window) {
// ORTC has replaceTrack -- https://github.com/w3c/ortc/issues/614
if (window.RTCRtpSender &&
!('replaceTrack' in window.RTCRtpSender.prototype)) {
window.RTCRtpSender.prototype.replaceTrack =
window.RTCRtpSender.prototype.setTrack;
}
},
shimGetDisplayMedia: function(window, preferredMediaSource) {
if (!('getDisplayMedia' in window.navigator) ||
!window.navigator.mediaDevices ||
'getDisplayMedia' in window.navigator.mediaDevices) {
return;
}
var origGetDisplayMedia = window.navigator.getDisplayMedia;
window.navigator.mediaDevices.getDisplayMedia = function(constraints) {
return origGetDisplayMedia(constraints);
};
window.navigator.getDisplayMedia = function(constraints) {
utils.deprecated('navigator.getDisplayMedia',
'navigator.mediaDevices.getDisplayMedia');
return origGetDisplayMedia(constraints);
};
}
};
},{"../utils":14,"./filtericeservers":9,"./getusermedia":10,"rtcpeerconnection-shim":1}],9:[function(require,module,exports){
/*
* Copyright (c) 2018 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils');
// Edge does not like
// 1) stun: filtered after 14393 unless ?transport=udp is present
// 2) turn: that does not have all of turn:host:port?transport=udp
// 3) turn: with ipv6 addresses
// 4) turn: occurring muliple times
module.exports = function(iceServers, edgeVersion) {
var hasTurn = false;
iceServers = JSON.parse(JSON.stringify(iceServers));
return iceServers.filter(function(server) {
if (server && (server.urls || server.url)) {
var urls = server.urls || server.url;
if (server.url && !server.urls) {
utils.deprecated('RTCIceServer.url', 'RTCIceServer.urls');
}
var isString = typeof urls === 'string';
if (isString) {
urls = [urls];
}
urls = urls.filter(function(url) {
var validTurn = url.indexOf('turn:') === 0 &&
url.indexOf('transport=udp') !== -1 &&
url.indexOf('turn:[') === -1 &&
!hasTurn;
if (validTurn) {
hasTurn = true;
return true;
}
return url.indexOf('stun:') === 0 && edgeVersion >= 14393 &&
url.indexOf('?transport=udp') === -1;
});
delete server.url;
server.urls = isString ? urls[0] : urls;
return !!urls.length;
}
});
};
},{"../utils":14}],10:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
// Expose public methods.
module.exports = function(window) {
var navigator = window && window.navigator;
var shimError_ = function(e) {
return {
name: {PermissionDeniedError: 'NotAllowedError'}[e.name] || e.name,
message: e.message,
constraint: e.constraint,
toString: function() {
return this.name;
}
};
};
// getUserMedia error shim.
var origGetUserMedia = navigator.mediaDevices.getUserMedia.
bind(navigator.mediaDevices);
navigator.mediaDevices.getUserMedia = function(c) {
return origGetUserMedia(c).catch(function(e) {
return Promise.reject(shimError_(e));
});
};
};
},{}],11:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils');
module.exports = {
shimGetUserMedia: require('./getusermedia'),
shimOnTrack: function(window) {
if (typeof window === 'object' && window.RTCPeerConnection && !('ontrack' in
window.RTCPeerConnection.prototype)) {
Object.defineProperty(window.RTCPeerConnection.prototype, 'ontrack', {
get: function() {
return this._ontrack;
},
set: function(f) {
if (this._ontrack) {
this.removeEventListener('track', this._ontrack);
this.removeEventListener('addstream', this._ontrackpoly);
}
this.addEventListener('track', this._ontrack = f);
this.addEventListener('addstream', this._ontrackpoly = function(e) {
e.stream.getTracks().forEach(function(track) {
var event = new Event('track');
event.track = track;
event.receiver = {track: track};
event.transceiver = {receiver: event.receiver};
event.streams = [e.stream];
this.dispatchEvent(event);
}.bind(this));
}.bind(this));
},
enumerable: true,
configurable: true
});
}
if (typeof window === 'object' && window.RTCTrackEvent &&
('receiver' in window.RTCTrackEvent.prototype) &&
!('transceiver' in window.RTCTrackEvent.prototype)) {
Object.defineProperty(window.RTCTrackEvent.prototype, 'transceiver', {
get: function() {
return {receiver: this.receiver};
}
});
}
},
shimSourceObject: function(window) {
// Firefox has supported mozSrcObject since FF22, unprefixed in 42.
if (typeof window === 'object') {
if (window.HTMLMediaElement &&
!('srcObject' in window.HTMLMediaElement.prototype)) {
// Shim the srcObject property, once, when HTMLMediaElement is found.
Object.defineProperty(window.HTMLMediaElement.prototype, 'srcObject', {
get: function() {
return this.mozSrcObject;
},
set: function(stream) {
this.mozSrcObject = stream;
}
});
}
}
},
shimPeerConnection: function(window) {
var browserDetails = utils.detectBrowser(window);
if (typeof window !== 'object' || !(window.RTCPeerConnection ||
window.mozRTCPeerConnection)) {
return; // probably media.peerconnection.enabled=false in about:config
}
// The RTCPeerConnection object.
if (!window.RTCPeerConnection) {
window.RTCPeerConnection = function(pcConfig, pcConstraints) {
if (browserDetails.version < 38) {
// .urls is not supported in FF < 38.
// create RTCIceServers with a single url.
if (pcConfig && pcConfig.iceServers) {
var newIceServers = [];
for (var i = 0; i < pcConfig.iceServers.length; i++) {
var server = pcConfig.iceServers[i];
if (server.hasOwnProperty('urls')) {
for (var j = 0; j < server.urls.length; j++) {
var newServer = {
url: server.urls[j]
};
if (server.urls[j].indexOf('turn') === 0) {
newServer.username = server.username;
newServer.credential = server.credential;
}
newIceServers.push(newServer);
}
} else {
newIceServers.push(pcConfig.iceServers[i]);
}
}
pcConfig.iceServers = newIceServers;
}
}
return new window.mozRTCPeerConnection(pcConfig, pcConstraints);
};
window.RTCPeerConnection.prototype =
window.mozRTCPeerConnection.prototype;
// wrap static methods. Currently just generateCertificate.
if (window.mozRTCPeerConnection.generateCertificate) {
Object.defineProperty(window.RTCPeerConnection, 'generateCertificate', {
get: function() {
return window.mozRTCPeerConnection.generateCertificate;
}
});
}
window.RTCSessionDescription = window.mozRTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate;
}
// shim away need for obsolete RTCIceCandidate/RTCSessionDescription.
['setLocalDescription', 'setRemoteDescription', 'addIceCandidate']
.forEach(function(method) {
var nativeMethod = window.RTCPeerConnection.prototype[method];
window.RTCPeerConnection.prototype[method] = function() {
arguments[0] = new ((method === 'addIceCandidate') ?
window.RTCIceCandidate :
window.RTCSessionDescription)(arguments[0]);
return nativeMethod.apply(this, arguments);
};
});
// support for addIceCandidate(null or undefined)
var nativeAddIceCandidate =
window.RTCPeerConnection.prototype.addIceCandidate;
window.RTCPeerConnection.prototype.addIceCandidate = function() {
if (!arguments[0]) {
if (arguments[1]) {
arguments[1].apply(null);
}
return Promise.resolve();
}
return nativeAddIceCandidate.apply(this, arguments);
};
// shim getStats with maplike support
var makeMapStats = function(stats) {
var map = new Map();
Object.keys(stats).forEach(function(key) {
map.set(key, stats[key]);
map[key] = stats[key];
});
return map;
};
var modernStatsTypes = {
inboundrtp: 'inbound-rtp',
outboundrtp: 'outbound-rtp',
candidatepair: 'candidate-pair',
localcandidate: 'local-candidate',
remotecandidate: 'remote-candidate'
};
var nativeGetStats = window.RTCPeerConnection.prototype.getStats;
window.RTCPeerConnection.prototype.getStats = function(
selector,
onSucc,
onErr
) {
return nativeGetStats.apply(this, [selector || null])
.then(function(stats) {
if (browserDetails.version < 48) {
stats = makeMapStats(stats);
}
if (browserDetails.version < 53 && !onSucc) {
// Shim only promise getStats with spec-hyphens in type names
// Leave callback version alone; misc old uses of forEach before Map
try {
stats.forEach(function(stat) {
stat.type = modernStatsTypes[stat.type] || stat.type;
});
} catch (e) {
if (e.name !== 'TypeError') {
throw e;
}
// Avoid TypeError: "type" is read-only, in old versions. 34-43ish
stats.forEach(function(stat, i) {
stats.set(i, Object.assign({}, stat, {
type: modernStatsTypes[stat.type] || stat.type
}));
});
}
}
return stats;
})
.then(onSucc, onErr);
};
},
shimSenderGetStats: function(window) {
if (!(typeof window === 'object' && window.RTCPeerConnection &&
window.RTCRtpSender)) {
return;
}
if (window.RTCRtpSender && 'getStats' in window.RTCRtpSender.prototype) {
return;
}
var origGetSenders = window.RTCPeerConnection.prototype.getSenders;
if (origGetSenders) {
window.RTCPeerConnection.prototype.getSenders = function() {
var pc = this;
var senders = origGetSenders.apply(pc, []);
senders.forEach(function(sender) {
sender._pc = pc;
});
return senders;
};
}
var origAddTrack = window.RTCPeerConnection.prototype.addTrack;
if (origAddTrack) {
window.RTCPeerConnection.prototype.addTrack = function() {
var sender = origAddTrack.apply(this, arguments);
sender._pc = this;
return sender;
};
}
window.RTCRtpSender.prototype.getStats = function() {
return this.track ? this._pc.getStats(this.track) :
Promise.resolve(new Map());
};
},
shimReceiverGetStats: function(window) {
if (!(typeof window === 'object' && window.RTCPeerConnection &&
window.RTCRtpSender)) {
return;
}
if (window.RTCRtpSender && 'getStats' in window.RTCRtpReceiver.prototype) {
return;
}
var origGetReceivers = window.RTCPeerConnection.prototype.getReceivers;
if (origGetReceivers) {
window.RTCPeerConnection.prototype.getReceivers = function() {
var pc = this;
var receivers = origGetReceivers.apply(pc, []);
receivers.forEach(function(receiver) {
receiver._pc = pc;
});
return receivers;
};
}
utils.wrapPeerConnectionEvent(window, 'track', function(e) {
e.receiver._pc = e.srcElement;
return e;
});
window.RTCRtpReceiver.prototype.getStats = function() {
return this._pc.getStats(this.track);
};
},
shimRemoveStream: function(window) {
if (!window.RTCPeerConnection ||
'removeStream' in window.RTCPeerConnection.prototype) {
return;
}
window.RTCPeerConnection.prototype.removeStream = function(stream) {
var pc = this;
utils.deprecated('removeStream', 'removeTrack');
this.getSenders().forEach(function(sender) {
if (sender.track && stream.getTracks().indexOf(sender.track) !== -1) {
pc.removeTrack(sender);
}
});
};
},
shimRTCDataChannel: function(window) {
// rename DataChannel to RTCDataChannel (native fix in FF60):
// https://bugzilla.mozilla.org/show_bug.cgi?id=1173851
if (window.DataChannel && !window.RTCDataChannel) {
window.RTCDataChannel = window.DataChannel;
}
},
shimGetDisplayMedia: function(window, preferredMediaSource) {
if (!window.navigator || !window.navigator.mediaDevices ||
'getDisplayMedia' in window.navigator.mediaDevices) {
return;
}
window.navigator.mediaDevices.getDisplayMedia = function(constraints) {
if (!(constraints && constraints.video)) {
var err = new DOMException('getDisplayMedia without video ' +
'constraints is undefined');
err.name = 'NotFoundError';
// from https://heycam.github.io/webidl/#idl-DOMException-error-names
err.code = 8;
return Promise.reject(err);
}
if (constraints.video === true) {
constraints.video = {mediaSource: preferredMediaSource};
} else {
constraints.video.mediaSource = preferredMediaSource;
}
return window.navigator.mediaDevices.getUserMedia(constraints);
};
window.navigator.getDisplayMedia = function(constraints) {
utils.deprecated('navigator.getDisplayMedia',
'navigator.mediaDevices.getDisplayMedia');
return window.navigator.mediaDevices.getDisplayMedia(constraints);
};
}
};
},{"../utils":14,"./getusermedia":12}],12:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var utils = require('../utils');
var logging = utils.log;
// Expose public methods.
module.exports = function(window) {
var browserDetails = utils.detectBrowser(window);
var navigator = window && window.navigator;
var MediaStreamTrack = window && window.MediaStreamTrack;
var shimError_ = function(e) {
return {
name: {
InternalError: 'NotReadableError',
NotSupportedError: 'TypeError',
PermissionDeniedError: 'NotAllowedError',
SecurityError: 'NotAllowedError'
}[e.name] || e.name,
message: {
'The operation is insecure.': 'The request is not allowed by the ' +
'user agent or the platform in the current context.'
}[e.message] || e.message,
constraint: e.constraint,
toString: function() {
return this.name + (this.message && ': ') + this.message;
}
};
};
// getUserMedia constraints shim.
var getUserMedia_ = function(constraints, onSuccess, onError) {
var constraintsToFF37_ = function(c) {
if (typeof c !== 'object' || c.require) {
return c;
}
var require = [];
Object.keys(c).forEach(function(key) {
if (key === 'require' || key === 'advanced' || key === 'mediaSource') {
return;
}
var r = c[key] = (typeof c[key] === 'object') ?
c[key] : {ideal: c[key]};
if (r.min !== undefined ||
r.max !== undefined || r.exact !== undefined) {
require.push(key);
}
if (r.exact !== undefined) {
if (typeof r.exact === 'number') {
r. min = r.max = r.exact;
} else {
c[key] = r.exact;
}
delete r.exact;
}
if (r.ideal !== undefined) {
c.advanced = c.advanced || [];
var oc = {};
if (typeof r.ideal === 'number') {
oc[key] = {min: r.ideal, max: r.ideal};
} else {
oc[key] = r.ideal;
}
c.advanced.push(oc);
delete r.ideal;
if (!Object.keys(r).length) {
delete c[key];
}
}
});
if (require.length) {
c.require = require;
}
return c;
};
constraints = JSON.parse(JSON.stringify(constraints));
if (browserDetails.version < 38) {
logging('spec: ' + JSON.stringify(constraints));
if (constraints.audio) {
constraints.audio = constraintsToFF37_(constraints.audio);
}
if (constraints.video) {
constraints.video = constraintsToFF37_(constraints.video);
}
logging('ff37: ' + JSON.stringify(constraints));
}
return navigator.mozGetUserMedia(constraints, onSuccess, function(e) {
onError(shimError_(e));
});
};
// Returns the result of getUserMedia as a Promise.
var getUserMediaPromise_ = function(constraints) {
return new Promise(function(resolve, reject) {
getUserMedia_(constraints, resolve, reject);
});
};
// Shim for mediaDevices on older versions.
if (!navigator.mediaDevices) {
navigator.mediaDevices = {getUserMedia: getUserMediaPromise_,
addEventListener: function() { },
removeEventListener: function() { }
};
}
navigator.mediaDevices.enumerateDevices =
navigator.mediaDevices.enumerateDevices || function() {
return new Promise(function(resolve) {
var infos = [
{kind: 'audioinput', deviceId: 'default', label: '', groupId: ''},
{kind: 'videoinput', deviceId: 'default', label: '', groupId: ''}
];
resolve(infos);
});
};
if (browserDetails.version < 41) {
// Work around http://bugzil.la/1169665
var orgEnumerateDevices =
navigator.mediaDevices.enumerateDevices.bind(navigator.mediaDevices);
navigator.mediaDevices.enumerateDevices = function() {
return orgEnumerateDevices().then(undefined, function(e) {
if (e.name === 'NotFoundError') {
return [];
}
throw e;
});
};
}
if (browserDetails.version < 49) {
var origGetUserMedia = navigator.mediaDevices.getUserMedia.
bind(navigator.mediaDevices);
navigator.mediaDevices.getUserMedia = function(c) {
return origGetUserMedia(c).then(function(stream) {
// Work around https://bugzil.la/802326
if (c.audio && !stream.getAudioTracks().length ||
c.video && !stream.getVideoTracks().length) {
stream.getTracks().forEach(function(track) {
track.stop();
});
throw new DOMException('The object can not be found here.',
'NotFoundError');
}
return stream;
}, function(e) {
return Promise.reject(shimError_(e));
});
};
}
if (!(browserDetails.version > 55 &&
'autoGainControl' in navigator.mediaDevices.getSupportedConstraints())) {
var remap = function(obj, a, b) {
if (a in obj && !(b in obj)) {
obj[b] = obj[a];
delete obj[a];
}
};
var nativeGetUserMedia = navigator.mediaDevices.getUserMedia.
bind(navigator.mediaDevices);
navigator.mediaDevices.getUserMedia = function(c) {
if (typeof c === 'object' && typeof c.audio === 'object') {
c = JSON.parse(JSON.stringify(c));
remap(c.audio, 'autoGainControl', 'mozAutoGainControl');
remap(c.audio, 'noiseSuppression', 'mozNoiseSuppression');
}
return nativeGetUserMedia(c);
};
if (MediaStreamTrack && MediaStreamTrack.prototype.getSettings) {
var nativeGetSettings = MediaStreamTrack.prototype.getSettings;
MediaStreamTrack.prototype.getSettings = function() {
var obj = nativeGetSettings.apply(this, arguments);
remap(obj, 'mozAutoGainControl', 'autoGainControl');
remap(obj, 'mozNoiseSuppression', 'noiseSuppression');
return obj;
};
}
if (MediaStreamTrack && MediaStreamTrack.prototype.applyConstraints) {
var nativeApplyConstraints = MediaStreamTrack.prototype.applyConstraints;
MediaStreamTrack.prototype.applyConstraints = function(c) {
if (this.kind === 'audio' && typeof c === 'object') {
c = JSON.parse(JSON.stringify(c));
remap(c, 'autoGainControl', 'mozAutoGainControl');
remap(c, 'noiseSuppression', 'mozNoiseSuppression');
}
return nativeApplyConstraints.apply(this, [c]);
};
}
}
navigator.getUserMedia = function(constraints, onSuccess, onError) {
if (browserDetails.version < 44) {
return getUserMedia_(constraints, onSuccess, onError);
}
// Replace Firefox 44+'s deprecation warning with unprefixed version.
utils.deprecated('navigator.getUserMedia',
'navigator.mediaDevices.getUserMedia');
navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
};
};
},{"../utils":14}],13:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
'use strict';
var utils = require('../utils');
module.exports = {
shimLocalStreamsAPI: function(window) {
if (typeof window !== 'object' || !window.RTCPeerConnection) {
return;
}
if (!('getLocalStreams' in window.RTCPeerConnection.prototype)) {
window.RTCPeerConnection.prototype.getLocalStreams = function() {
if (!this._localStreams) {
this._localStreams = [];
}
return this._localStreams;
};
}
if (!('getStreamById' in window.RTCPeerConnection.prototype)) {
window.RTCPeerConnection.prototype.getStreamById = function(id) {
var result = null;
if (this._localStreams) {
this._localStreams.forEach(function(stream) {
if (stream.id === id) {
result = stream;
}
});
}
if (this._remoteStreams) {
this._remoteStreams.forEach(function(stream) {
if (stream.id === id) {
result = stream;
}
});
}
return result;
};
}
if (!('addStream' in window.RTCPeerConnection.prototype)) {
var _addTrack = window.RTCPeerConnection.prototype.addTrack;
window.RTCPeerConnection.prototype.addStream = function(stream) {
if (!this._localStreams) {
this._localStreams = [];
}
if (this._localStreams.indexOf(stream) === -1) {
this._localStreams.push(stream);
}
var pc = this;
stream.getTracks().forEach(function(track) {
_addTrack.call(pc, track, stream);
});
};
window.RTCPeerConnection.prototype.addTrack = function(track, stream) {
if (stream) {
if (!this._localStreams) {
this._localStreams = [stream];
} else if (this._localStreams.indexOf(stream) === -1) {
this._localStreams.push(stream);
}
}
return _addTrack.call(this, track, stream);
};
}
if (!('removeStream' in window.RTCPeerConnection.prototype)) {
window.RTCPeerConnection.prototype.removeStream = function(stream) {
if (!this._localStreams) {
this._localStreams = [];
}
var index = this._localStreams.indexOf(stream);
if (index === -1) {
return;
}
this._localStreams.splice(index, 1);
var pc = this;
var tracks = stream.getTracks();
this.getSenders().forEach(function(sender) {
if (tracks.indexOf(sender.track) !== -1) {
pc.removeTrack(sender);
}
});
};
}
},
shimRemoteStreamsAPI: function(window) {
if (typeof window !== 'object' || !window.RTCPeerConnection) {
return;
}
if (!('getRemoteStreams' in window.RTCPeerConnection.prototype)) {
window.RTCPeerConnection.prototype.getRemoteStreams = function() {
return this._remoteStreams ? this._remoteStreams : [];
};
}
if (!('onaddstream' in window.RTCPeerConnection.prototype)) {
Object.defineProperty(window.RTCPeerConnection.prototype, 'onaddstream', {
get: function() {
return this._onaddstream;
},
set: function(f) {
if (this._onaddstream) {
this.removeEventListener('addstream', this._onaddstream);
}
this.addEventListener('addstream', this._onaddstream = f);
}
});
var origSetRemoteDescription =
window.RTCPeerConnection.prototype.setRemoteDescription;
window.RTCPeerConnection.prototype.setRemoteDescription = function() {
var pc = this;
if (!this._onaddstreampoly) {
this.addEventListener('track', this._onaddstreampoly = function(e) {
e.streams.forEach(function(stream) {
if (!pc._remoteStreams) {
pc._remoteStreams = [];
}
if (pc._remoteStreams.indexOf(stream) >= 0) {
return;
}
pc._remoteStreams.push(stream);
var event = new Event('addstream');
event.stream = stream;
pc.dispatchEvent(event);
});
});
}
return origSetRemoteDescription.apply(pc, arguments);
};
}
},
shimCallbacksAPI: function(window) {
if (typeof window !== 'object' || !window.RTCPeerConnection) {
return;
}
var prototype = window.RTCPeerConnection.prototype;
var createOffer = prototype.createOffer;
var createAnswer = prototype.createAnswer;
var setLocalDescription = prototype.setLocalDescription;
var setRemoteDescription = prototype.setRemoteDescription;
var addIceCandidate = prototype.addIceCandidate;
prototype.createOffer = function(successCallback, failureCallback) {
var options = (arguments.length >= 2) ? arguments[2] : arguments[0];
var promise = createOffer.apply(this, [options]);
if (!failureCallback) {
return promise;
}
promise.then(successCallback, failureCallback);
return Promise.resolve();
};
prototype.createAnswer = function(successCallback, failureCallback) {
var options = (arguments.length >= 2) ? arguments[2] : arguments[0];
var promise = createAnswer.apply(this, [options]);
if (!failureCallback) {
return promise;
}
promise.then(successCallback, failureCallback);
return Promise.resolve();
};
var withCallback = function(description, successCallback, failureCallback) {
var promise = setLocalDescription.apply(this, [description]);
if (!failureCallback) {
return promise;
}
promise.then(successCallback, failureCallback);
return Promise.resolve();
};
prototype.setLocalDescription = withCallback;
withCallback = function(description, successCallback, failureCallback) {
var promise = setRemoteDescription.apply(this, [description]);
if (!failureCallback) {
return promise;
}
promise.then(successCallback, failureCallback);
return Promise.resolve();
};
prototype.setRemoteDescription = withCallback;
withCallback = function(candidate, successCallback, failureCallback) {
var promise = addIceCandidate.apply(this, [candidate]);
if (!failureCallback) {
return promise;
}
promise.then(successCallback, failureCallback);
return Promise.resolve();
};
prototype.addIceCandidate = withCallback;
},
shimGetUserMedia: function(window) {
var navigator = window && window.navigator;
if (!navigator.getUserMedia) {
if (navigator.webkitGetUserMedia) {
navigator.getUserMedia = navigator.webkitGetUserMedia.bind(navigator);
} else if (navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia) {
navigator.getUserMedia = function(constraints, cb, errcb) {
navigator.mediaDevices.getUserMedia(constraints)
.then(cb, errcb);
}.bind(navigator);
}
}
},
shimRTCIceServerUrls: function(window) {
// migrate from non-spec RTCIceServer.url to RTCIceServer.urls
var OrigPeerConnection = window.RTCPeerConnection;
window.RTCPeerConnection = function(pcConfig, pcConstraints) {
if (pcConfig && pcConfig.iceServers) {
var newIceServers = [];
for (var i = 0; i < pcConfig.iceServers.length; i++) {
var server = pcConfig.iceServers[i];
if (!server.hasOwnProperty('urls') &&
server.hasOwnProperty('url')) {
utils.deprecated('RTCIceServer.url', 'RTCIceServer.urls');
server = JSON.parse(JSON.stringify(server));
server.urls = server.url;
delete server.url;
newIceServers.push(server);
} else {
newIceServers.push(pcConfig.iceServers[i]);
}
}
pcConfig.iceServers = newIceServers;
}
return new OrigPeerConnection(pcConfig, pcConstraints);
};
window.RTCPeerConnection.prototype = OrigPeerConnection.prototype;
// wrap static methods. Currently just generateCertificate.
if ('generateCertificate' in window.RTCPeerConnection) {
Object.defineProperty(window.RTCPeerConnection, 'generateCertificate', {
get: function() {
return OrigPeerConnection.generateCertificate;
}
});
}
},
shimTrackEventTransceiver: function(window) {
// Add event.transceiver member over deprecated event.receiver
if (typeof window === 'object' && window.RTCPeerConnection &&
('receiver' in window.RTCTrackEvent.prototype) &&
// can't check 'transceiver' in window.RTCTrackEvent.prototype, as it is
// defined for some reason even when window.RTCTransceiver is not.
!window.RTCTransceiver) {
Object.defineProperty(window.RTCTrackEvent.prototype, 'transceiver', {
get: function() {
return {receiver: this.receiver};
}
});
}
},
shimCreateOfferLegacy: function(window) {
var origCreateOffer = window.RTCPeerConnection.prototype.createOffer;
window.RTCPeerConnection.prototype.createOffer = function(offerOptions) {
var pc = this;
if (offerOptions) {
if (typeof offerOptions.offerToReceiveAudio !== 'undefined') {
// support bit values
offerOptions.offerToReceiveAudio = !!offerOptions.offerToReceiveAudio;
}
var audioTransceiver = pc.getTransceivers().find(function(transceiver) {
return transceiver.sender.track &&
transceiver.sender.track.kind === 'audio';
});
if (offerOptions.offerToReceiveAudio === false && audioTransceiver) {
if (audioTransceiver.direction === 'sendrecv') {
if (audioTransceiver.setDirection) {
audioTransceiver.setDirection('sendonly');
} else {
audioTransceiver.direction = 'sendonly';
}
} else if (audioTransceiver.direction === 'recvonly') {
if (audioTransceiver.setDirection) {
audioTransceiver.setDirection('inactive');
} else {
audioTransceiver.direction = 'inactive';
}
}
} else if (offerOptions.offerToReceiveAudio === true &&
!audioTransceiver) {
pc.addTransceiver('audio');
}
if (typeof offerOptions.offerToReceiveVideo !== 'undefined') {
// support bit values
offerOptions.offerToReceiveVideo = !!offerOptions.offerToReceiveVideo;
}
var videoTransceiver = pc.getTransceivers().find(function(transceiver) {
return transceiver.sender.track &&
transceiver.sender.track.kind === 'video';
});
if (offerOptions.offerToReceiveVideo === false && videoTransceiver) {
if (videoTransceiver.direction === 'sendrecv') {
videoTransceiver.setDirection('sendonly');
} else if (videoTransceiver.direction === 'recvonly') {
videoTransceiver.setDirection('inactive');
}
} else if (offerOptions.offerToReceiveVideo === true &&
!videoTransceiver) {
pc.addTransceiver('video');
}
}
return origCreateOffer.apply(pc, arguments);
};
}
};
},{"../utils":14}],14:[function(require,module,exports){
/*
* Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
*/
/* eslint-env node */
'use strict';
var logDisabled_ = true;
var deprecationWarnings_ = true;
/**
* Extract browser version out of the provided user agent string.
*
* @param {!string} uastring userAgent string.
* @param {!string} expr Regular expression used as match criteria.
* @param {!number} pos position in the version string to be returned.
* @return {!number} browser version.
*/
function extractVersion(uastring, expr, pos) {
var match = uastring.match(expr);
return match && match.length >= pos && parseInt(match[pos], 10);
}
// Wraps the peerconnection event eventNameToWrap in a function
// which returns the modified event object (or false to prevent
// the event).
function wrapPeerConnectionEvent(window, eventNameToWrap, wrapper) {
if (!window.RTCPeerConnection) {
return;
}
var proto = window.RTCPeerConnection.prototype;
var nativeAddEventListener = proto.addEventListener;
proto.addEventListener = function(nativeEventName, cb) {
if (nativeEventName !== eventNameToWrap) {
return nativeAddEventListener.apply(this, arguments);
}
var wrappedCallback = function(e) {
var modifiedEvent = wrapper(e);
if (modifiedEvent) {
cb(modifiedEvent);
}
};
this._eventMap = this._eventMap || {};
this._eventMap[cb] = wrappedCallback;
return nativeAddEventListener.apply(this, [nativeEventName,
wrappedCallback]);
};
var nativeRemoveEventListener = proto.removeEventListener;
proto.removeEventListener = function(nativeEventName, cb) {
if (nativeEventName !== eventNameToWrap || !this._eventMap
|| !this._eventMap[cb]) {
return nativeRemoveEventListener.apply(this, arguments);
}
var unwrappedCb = this._eventMap[cb];
delete this._eventMap[cb];
return nativeRemoveEventListener.apply(this, [nativeEventName,
unwrappedCb]);
};
Object.defineProperty(proto, 'on' + eventNameToWrap, {
get: function() {
return this['_on' + eventNameToWrap];
},
set: function(cb) {
if (this['_on' + eventNameToWrap]) {
this.removeEventListener(eventNameToWrap,
this['_on' + eventNameToWrap]);
delete this['_on' + eventNameToWrap];
}
if (cb) {
this.addEventListener(eventNameToWrap,
this['_on' + eventNameToWrap] = cb);
}
},
enumerable: true,
configurable: true
});
}
// Utility methods.
module.exports = {
extractVersion: extractVersion,
wrapPeerConnectionEvent: wrapPeerConnectionEvent,
disableLog: function(bool) {
if (typeof bool !== 'boolean') {
return new Error('Argument type: ' + typeof bool +
'. Please use a boolean.');
}
logDisabled_ = bool;
return (bool) ? 'adapter.js logging disabled' :
'adapter.js logging enabled';
},
/**
* Disable or enable deprecation warnings
* @param {!boolean} bool set to true to disable warnings.
*/
disableWarnings: function(bool) {
if (typeof bool !== 'boolean') {
return new Error('Argument type: ' + typeof bool +
'. Please use a boolean.');
}
deprecationWarnings_ = !bool;
return 'adapter.js deprecation warnings ' + (bool ? 'disabled' : 'enabled');
},
log: function() {
if (typeof window === 'object') {
if (logDisabled_) {
return;
}
if (typeof console !== 'undefined' && typeof console.log === 'function') {
console.log.apply(console, arguments);
}
}
},
/**
* Shows a deprecation warning suggesting the modern and spec-compatible API.
*/
deprecated: function(oldMethod, newMethod) {
if (!deprecationWarnings_) {
return;
}
console.warn(oldMethod + ' is deprecated, please use ' + newMethod +
' instead.');
},
/**
* Browser detector.
*
* @return {object} result containing browser and version
* properties.
*/
detectBrowser: function(window) {
var navigator = window && window.navigator;
// Returned result object.
var result = {};
result.browser = null;
result.version = null;
// Fail early if it's not a browser
if (typeof window === 'undefined' || !window.navigator) {
result.browser = 'Not a browser.';
return result;
}
if (navigator.mozGetUserMedia) { // Firefox.
result.browser = 'firefox';
result.version = extractVersion(navigator.userAgent,
/Firefox\/(\d+)\./, 1);
} else if (navigator.webkitGetUserMedia) {
// Chrome, Chromium, Webview, Opera.
// Version matches Chrome/WebRTC version.
result.browser = 'chrome';
result.version = extractVersion(navigator.userAgent,
/Chrom(e|ium)\/(\d+)\./, 2);
} else if (navigator.mediaDevices &&
navigator.userAgent.match(/Edge\/(\d+).(\d+)$/)) { // Edge.
result.browser = 'edge';
result.version = extractVersion(navigator.userAgent,
/Edge\/(\d+).(\d+)$/, 2);
} else if (window.RTCPeerConnection &&
navigator.userAgent.match(/AppleWebKit\/(\d+)\./)) { // Safari.
result.browser = 'safari';
result.version = extractVersion(navigator.userAgent,
/AppleWebKit\/(\d+)\./, 1);
} else { // Default fallthrough: not supported.
result.browser = 'Not a supported browser.';
return result;
}
return result;
}
};
},{}]},{},[3])(3)
});
================================================
FILE: FileBufferReader/demo/index.html
================================================
WebRTC File Sharing | FileBufferReader
FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io. It is Open Sourced on Github
================================================
FILE: FileBufferReader/dev/FileBufferReader.js
================================================
function FileBufferReader() {
var fbr = this;
var fbrHelper = new FileBufferReaderHelper();
fbr.chunks = {};
fbr.users = {};
fbr.readAsArrayBuffer = function(file, callback, extra) {
var options = {
file: file,
earlyCallback: function(chunk) {
callback(fbrClone(chunk, {
currentPosition: -1
}));
},
extra: extra || {
userid: 0
}
};
if (file.extra && Object.keys(file.extra).length) {
Object.keys(file.extra).forEach(function(key) {
options.extra[key] = file.extra[key];
});
}
fbrHelper.readAsArrayBuffer(fbr, options);
};
fbr.getNextChunk = function(fileUUID, callback, userid) {
var currentPosition;
if (typeof fileUUID.currentPosition !== 'undefined') {
currentPosition = fileUUID.currentPosition;
fileUUID = fileUUID.uuid;
}
var allFileChunks = fbr.chunks[fileUUID];
if (!allFileChunks) {
return;
}
if (typeof userid !== 'undefined') {
if (!fbr.users[userid + '']) {
fbr.users[userid + ''] = {
fileUUID: fileUUID,
userid: userid,
currentPosition: -1
};
}
if (typeof currentPosition !== 'undefined') {
fbr.users[userid + ''].currentPosition = currentPosition;
}
fbr.users[userid + ''].currentPosition++;
currentPosition = fbr.users[userid + ''].currentPosition;
} else {
if (typeof currentPosition !== 'undefined') {
fbr.chunks[fileUUID].currentPosition = currentPosition;
}
fbr.chunks[fileUUID].currentPosition++;
currentPosition = fbr.chunks[fileUUID].currentPosition;
}
var nextChunk = allFileChunks[currentPosition];
if (!nextChunk) {
delete fbr.chunks[fileUUID];
fbr.convertToArrayBuffer({
chunkMissing: true,
currentPosition: currentPosition,
uuid: fileUUID
}, callback);
return;
}
nextChunk = fbrClone(nextChunk);
if (typeof userid !== 'undefined') {
nextChunk.remoteUserId = userid + '';
}
if (!!nextChunk.start) {
fbr.onBegin(nextChunk);
}
if (!!nextChunk.end) {
fbr.onEnd(nextChunk);
}
fbr.onProgress(nextChunk);
fbr.convertToArrayBuffer(nextChunk, function(buffer) {
if (nextChunk.currentPosition == nextChunk.maxChunks) {
callback(buffer, true);
return;
}
callback(buffer, false);
});
};
var fbReceiver = new FileBufferReceiver(fbr);
fbr.addChunk = function(chunk, callback) {
if (!chunk) {
return;
}
fbReceiver.receive(chunk, function(chunk) {
fbr.convertToArrayBuffer({
readyForNextChunk: true,
currentPosition: chunk.currentPosition,
uuid: chunk.uuid
}, callback);
});
};
fbr.chunkMissing = function(chunk) {
delete fbReceiver.chunks[chunk.uuid];
delete fbReceiver.chunksWaiters[chunk.uuid];
};
fbr.onBegin = function() {};
fbr.onEnd = function() {};
fbr.onProgress = function() {};
fbr.convertToObject = FileConverter.ConvertToObject;
fbr.convertToArrayBuffer = FileConverter.ConvertToArrayBuffer
// for backward compatibility----it is redundant.
fbr.setMultipleUsers = function() {};
// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function fbrClone(from, to) {
if (from == null || typeof from != "object") return from;
if (from.constructor != Object && from.constructor != Array) return from;
if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
from.constructor == String || from.constructor == Number || from.constructor == Boolean)
return new from.constructor(from);
to = to || new from.constructor();
for (var name in from) {
to[name] = typeof to[name] == "undefined" ? fbrClone(from[name], null) : to[name];
}
return to;
}
}
================================================
FILE: FileBufferReader/dev/FileBufferReaderHelper.js
================================================
function FileBufferReaderHelper() {
var fbrHelper = this;
function processInWebWorker(_function) {
var blob = URL.createObjectURL(new Blob([_function.toString(),
'this.onmessage = function (e) {' + _function.name + '(e.data);}'
], {
type: 'application/javascript'
}));
var worker = new Worker(blob);
return worker;
}
fbrHelper.readAsArrayBuffer = function(fbr, options) {
var earlyCallback = options.earlyCallback;
delete options.earlyCallback;
function processChunk(chunk) {
if (!fbr.chunks[chunk.uuid]) {
fbr.chunks[chunk.uuid] = {
currentPosition: -1
};
}
options.extra = options.extra || {
userid: 0
};
chunk.userid = options.userid || options.extra.userid || 0;
chunk.extra = options.extra;
fbr.chunks[chunk.uuid][chunk.currentPosition] = chunk;
if (chunk.end && earlyCallback) {
earlyCallback(chunk.uuid);
earlyCallback = null;
}
// for huge files
if ((chunk.maxChunks > 200 && chunk.currentPosition == 200) && earlyCallback) {
earlyCallback(chunk.uuid);
earlyCallback = null;
}
}
if (false && typeof Worker !== 'undefined') {
var webWorker = processInWebWorker(fileReaderWrapper);
webWorker.onmessage = function(event) {
processChunk(event.data);
};
webWorker.postMessage(options);
} else {
fileReaderWrapper(options, processChunk);
}
};
function fileReaderWrapper(options, callback) {
callback = callback || function(chunk) {
postMessage(chunk);
};
var file = options.file;
if (!file.uuid) {
file.uuid = (Math.random() * 100).toString().replace(/\./g, '');
}
var chunkSize = options.chunkSize || 15 * 1000;
if (options.extra && options.extra.chunkSize) {
chunkSize = options.extra.chunkSize;
}
var sliceId = 0;
var cacheSize = chunkSize;
var chunksPerSlice = Math.floor(Math.min(100000000, cacheSize) / chunkSize);
var sliceSize = chunksPerSlice * chunkSize;
var maxChunks = Math.ceil(file.size / chunkSize);
file.maxChunks = maxChunks;
var numOfChunksInSlice;
var currentPosition = 0;
var hasEntireFile;
var chunks = [];
callback({
currentPosition: currentPosition,
uuid: file.uuid,
maxChunks: maxChunks,
size: file.size,
name: file.name,
type: file.type,
lastModifiedDate: (file.lastModifiedDate || new Date()).toString(),
start: true
});
var blob, reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
addChunks(file.name, evt.target.result, function() {
sliceId++;
if ((sliceId + 1) * sliceSize < file.size) {
blob = file.slice(sliceId * sliceSize, (sliceId + 1) * sliceSize);
reader.readAsArrayBuffer(blob);
} else if (sliceId * sliceSize < file.size) {
blob = file.slice(sliceId * sliceSize, file.size);
reader.readAsArrayBuffer(blob);
} else {
file.url = URL.createObjectURL(file);
callback({
currentPosition: currentPosition,
uuid: file.uuid,
maxChunks: maxChunks,
size: file.size,
name: file.name,
lastModifiedDate: (file.lastModifiedDate || new Date()).toString(),
url: URL.createObjectURL(file),
type: file.type,
end: true
});
}
});
}
};
currentPosition += 1;
blob = file.slice(sliceId * sliceSize, (sliceId + 1) * sliceSize);
reader.readAsArrayBuffer(blob);
function addChunks(fileName, binarySlice, addChunkCallback) {
numOfChunksInSlice = Math.ceil(binarySlice.byteLength / chunkSize);
for (var i = 0; i < numOfChunksInSlice; i++) {
var start = i * chunkSize;
chunks[currentPosition] = binarySlice.slice(start, Math.min(start + chunkSize, binarySlice.byteLength));
callback({
uuid: file.uuid,
buffer: chunks[currentPosition],
currentPosition: currentPosition,
maxChunks: maxChunks,
size: file.size,
name: file.name,
lastModifiedDate: (file.lastModifiedDate || new Date()).toString(),
type: file.type
});
currentPosition++;
}
if (currentPosition == maxChunks) {
hasEntireFile = true;
}
addChunkCallback();
}
}
}
================================================
FILE: FileBufferReader/dev/FileBufferReceiver.js
================================================
function FileBufferReceiver(fbr) {
var fbReceiver = this;
fbReceiver.chunks = {};
fbReceiver.chunksWaiters = {};
function receive(chunk, callback) {
if (!chunk.uuid) {
fbr.convertToObject(chunk, function(object) {
receive(object);
});
return;
}
if (chunk.start && !fbReceiver.chunks[chunk.uuid]) {
fbReceiver.chunks[chunk.uuid] = {};
if (fbr.onBegin) fbr.onBegin(chunk);
}
if (!chunk.end && chunk.buffer) {
fbReceiver.chunks[chunk.uuid][chunk.currentPosition] = chunk.buffer;
}
if (chunk.end) {
var chunksObject = fbReceiver.chunks[chunk.uuid];
var chunksArray = [];
Object.keys(chunksObject).forEach(function(item, idx) {
chunksArray.push(chunksObject[item]);
});
var blob = new Blob(chunksArray, {
type: chunk.type
});
blob = merge(blob, chunk);
blob.url = URL.createObjectURL(blob);
blob.uuid = chunk.uuid;
if (!blob.size) console.error('Something went wrong. Blob Size is 0.');
if (fbr.onEnd) fbr.onEnd(blob);
// clear system memory
delete fbReceiver.chunks[chunk.uuid];
delete fbReceiver.chunksWaiters[chunk.uuid];
}
if (chunk.buffer && fbr.onProgress) fbr.onProgress(chunk);
if (!chunk.end) {
callback(chunk);
fbReceiver.chunksWaiters[chunk.uuid] = function() {
function looper() {
if (!chunk.buffer) {
return;
}
if (!fbReceiver.chunks[chunk.uuid]) {
return;
}
if (chunk.currentPosition != chunk.maxChunks && !fbReceiver.chunks[chunk.uuid][chunk.currentPosition]) {
callback(chunk);
setTimeout(looper, 5000);
}
}
setTimeout(looper, 5000);
};
fbReceiver.chunksWaiters[chunk.uuid]();
}
}
fbReceiver.receive = receive;
}
================================================
FILE: FileBufferReader/dev/FileConverter.js
================================================
var FileConverter = {
ConvertToArrayBuffer: function(object, callback) {
binarize.pack(object, function(dataView) {
callback(dataView.buffer);
});
},
ConvertToObject: function(buffer, callback) {
binarize.unpack(buffer, callback);
}
};
================================================
FILE: FileBufferReader/dev/FileSelector.js
================================================
function FileSelector() {
var selector = this;
var noFileSelectedCallback = function() {};
selector.selectSingleFile = function(callback, failure) {
if (failure) {
noFileSelectedCallback = failure;
}
selectFile(callback);
};
selector.selectMultipleFiles = function(callback, failure) {
if (failure) {
noFileSelectedCallback = failure;
}
selectFile(callback, true);
};
selector.selectDirectory = function(callback, failure) {
if (failure) {
noFileSelectedCallback = failure;
}
selectFile(callback, true, true);
};
selector.accept = '*.*';
function selectFile(callback, multiple, directory) {
callback = callback || function() {};
var file = document.createElement('input');
file.type = 'file';
if (multiple) {
file.multiple = true;
}
if (directory) {
file.webkitdirectory = true;
}
file.accept = selector.accept;
file.onclick = function() {
file.clickStarted = true;
};
document.body.onfocus = function() {
setTimeout(function() {
if (!file.clickStarted) return;
file.clickStarted = false;
if (!file.value) {
noFileSelectedCallback();
}
}, 500);
};
file.onchange = function() {
if (multiple) {
if (!file.files.length) {
console.error('No file selected.');
return;
}
var arr = [];
Array.from(file.files).forEach(function(file) {
file.url = file.webkitRelativePath;
arr.push(file);
});
callback(arr);
return;
}
if (!file.files[0]) {
console.error('No file selected.');
return;
}
callback(file.files[0]);
file.parentNode.removeChild(file);
};
file.style.display = 'none';
(document.body || document.documentElement).appendChild(file);
fireClickEvent(file);
}
function getValidFileName(fileName) {
if (!fileName) {
fileName = 'file' + (new Date).toISOString().replace(/:|\.|-/g, '')
}
var a = fileName;
a = a.replace(/^.*[\\\/]([^\\\/]*)$/i, "$1");
a = a.replace(/\s/g, "_");
a = a.replace(/,/g, '');
a = a.toLowerCase();
return a;
}
function fireClickEvent(element) {
if (typeof element.click === 'function') {
element.click();
return;
}
if (typeof element.change === 'function') {
element.change();
return;
}
if (typeof document.createEvent('Event') !== 'undefined') {
var event = document.createEvent('Event');
if (typeof event.initEvent === 'function' && typeof element.dispatchEvent === 'function') {
event.initEvent('click', true, true);
element.dispatchEvent(event);
return;
}
}
var event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
element.dispatchEvent(event);
}
}
================================================
FILE: FileBufferReader/dev/binarize.js
================================================
/*
Copyright 2013 Eiji Kitamura
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Author: Eiji Kitamura (agektmr@gmail.com)
*/
var debug = false;
var BIG_ENDIAN = false,
LITTLE_ENDIAN = true,
TYPE_LENGTH = Uint8Array.BYTES_PER_ELEMENT,
LENGTH_LENGTH = Uint16Array.BYTES_PER_ELEMENT,
BYTES_LENGTH = Uint32Array.BYTES_PER_ELEMENT;
var Types = {
NULL: 0,
UNDEFINED: 1,
STRING: 2,
NUMBER: 3,
BOOLEAN: 4,
ARRAY: 5,
OBJECT: 6,
INT8ARRAY: 7,
INT16ARRAY: 8,
INT32ARRAY: 9,
UINT8ARRAY: 10,
UINT16ARRAY: 11,
UINT32ARRAY: 12,
FLOAT32ARRAY: 13,
FLOAT64ARRAY: 14,
ARRAYBUFFER: 15,
BLOB: 16,
FILE: 16,
BUFFER: 17 // Special type for node.js
};
if (debug) {
var TypeNames = [
'NULL',
'UNDEFINED',
'STRING',
'NUMBER',
'BOOLEAN',
'ARRAY',
'OBJECT',
'INT8ARRAY',
'INT16ARRAY',
'INT32ARRAY',
'UINT8ARRAY',
'UINT16ARRAY',
'UINT32ARRAY',
'FLOAT32ARRAY',
'FLOAT64ARRAY',
'ARRAYBUFFER',
'BLOB',
'BUFFER'
];
}
var Length = [
null, // Types.NULL
null, // Types.UNDEFINED
'Uint16', // Types.STRING
'Float64', // Types.NUMBER
'Uint8', // Types.BOOLEAN
null, // Types.ARRAY
null, // Types.OBJECT
'Int8', // Types.INT8ARRAY
'Int16', // Types.INT16ARRAY
'Int32', // Types.INT32ARRAY
'Uint8', // Types.UINT8ARRAY
'Uint16', // Types.UINT16ARRAY
'Uint32', // Types.UINT32ARRAY
'Float32', // Types.FLOAT32ARRAY
'Float64', // Types.FLOAT64ARRAY
'Uint8', // Types.ARRAYBUFFER
'Uint8', // Types.BLOB, Types.FILE
'Uint8' // Types.BUFFER
];
var binary_dump = function(view, start, length) {
var table = [],
endianness = BIG_ENDIAN,
ROW_LENGTH = 40;
table[0] = [];
for (var i = 0; i < ROW_LENGTH; i++) {
table[0][i] = i < 10 ? '0' + i.toString(10) : i.toString(10);
}
for (i = 0; i < length; i++) {
var code = view.getUint8(start + i, endianness);
var index = ~~(i / ROW_LENGTH) + 1;
if (typeof table[index] === 'undefined') table[index] = [];
table[index][i % ROW_LENGTH] = code < 16 ? '0' + code.toString(16) : code.toString(16);
}
console.log('%c' + table[0].join(' '), 'font-weight: bold;');
for (i = 1; i < table.length; i++) {
console.log(table[i].join(' '));
}
};
var find_type = function(obj) {
var type = undefined;
if (obj === undefined) {
type = Types.UNDEFINED;
} else if (obj === null) {
type = Types.NULL;
} else {
var const_name = obj.constructor.name;
var const_name_reflection = obj.constructor.toString().match(/\w+/g)[1];
if (const_name !== undefined && Types[const_name.toUpperCase()] !== undefined) {
// return type by .constructor.name if possible
type = Types[const_name.toUpperCase()];
} else if (const_name_reflection !== undefined && Types[const_name_reflection.toUpperCase()] !== undefined) {
type = Types[const_name_reflection.toUpperCase()];
} else {
// Work around when constructor.name is not defined
switch (typeof obj) {
case 'string':
type = Types.STRING;
break;
case 'number':
type = Types.NUMBER;
break;
case 'boolean':
type = Types.BOOLEAN;
break;
case 'object':
if (obj instanceof Array) {
type = Types.ARRAY;
} else if (obj instanceof Int8Array) {
type = Types.INT8ARRAY;
} else if (obj instanceof Int16Array) {
type = Types.INT16ARRAY;
} else if (obj instanceof Int32Array) {
type = Types.INT32ARRAY;
} else if (obj instanceof Uint8Array) {
type = Types.UINT8ARRAY;
} else if (obj instanceof Uint16Array) {
type = Types.UINT16ARRAY;
} else if (obj instanceof Uint32Array) {
type = Types.UINT32ARRAY;
} else if (obj instanceof Float32Array) {
type = Types.FLOAT32ARRAY;
} else if (obj instanceof Float64Array) {
type = Types.FLOAT64ARRAY;
} else if (obj instanceof ArrayBuffer) {
type = Types.ARRAYBUFFER;
} else if (obj instanceof Blob) { // including File
type = Types.BLOB;
} else if (obj instanceof Buffer) { // node.js only
type = Types.BUFFER;
} else if (obj instanceof Object) {
type = Types.OBJECT;
}
break;
default:
break;
}
}
}
return type;
};
var utf16_utf8 = function(string) {
return unescape(encodeURIComponent(string));
};
var utf8_utf16 = function(bytes) {
return decodeURIComponent(escape(bytes));
};
/**
* packs seriarized elements array into a packed ArrayBuffer
* @param {Array} serialized Serialized array of elements.
* @return {DataView} view of packed binary
*/
var pack = function(serialized) {
var cursor = 0,
i = 0,
j = 0,
endianness = BIG_ENDIAN;
var ab = new ArrayBuffer(serialized[0].byte_length + serialized[0].header_size);
var view = new DataView(ab);
for (i = 0; i < serialized.length; i++) {
var start = cursor,
header_size = serialized[i].header_size,
type = serialized[i].type,
length = serialized[i].length,
value = serialized[i].value,
byte_length = serialized[i].byte_length,
type_name = Length[type],
unit = type_name === null ? 0 : window[type_name + 'Array'].BYTES_PER_ELEMENT;
// Set type
if (type === Types.BUFFER) {
// on node.js Blob is emulated using Buffer type
view.setUint8(cursor, Types.BLOB, endianness);
} else {
view.setUint8(cursor, type, endianness);
}
cursor += TYPE_LENGTH;
if (debug) {
console.info('Packing', type, TypeNames[type]);
}
// Set length if required
if (type === Types.ARRAY || type === Types.OBJECT) {
view.setUint16(cursor, length, endianness);
cursor += LENGTH_LENGTH;
if (debug) {
console.info('Content Length', length);
}
}
// Set byte length
view.setUint32(cursor, byte_length, endianness);
cursor += BYTES_LENGTH;
if (debug) {
console.info('Header Size', header_size, 'bytes');
console.info('Byte Length', byte_length, 'bytes');
}
switch (type) {
case Types.NULL:
case Types.UNDEFINED:
// NULL and UNDEFINED doesn't have any payload
break;
case Types.STRING:
if (debug) {
console.info('Actual Content %c"' + value + '"', 'font-weight:bold;');
}
for (j = 0; j < length; j++, cursor += unit) {
view.setUint16(cursor, value.charCodeAt(j), endianness);
}
break;
case Types.NUMBER:
case Types.BOOLEAN:
if (debug) {
console.info('%c' + value.toString(), 'font-weight:bold;');
}
view['set' + type_name](cursor, value, endianness);
cursor += unit;
break;
case Types.INT8ARRAY:
case Types.INT16ARRAY:
case Types.INT32ARRAY:
case Types.UINT8ARRAY:
case Types.UINT16ARRAY:
case Types.UINT32ARRAY:
case Types.FLOAT32ARRAY:
case Types.FLOAT64ARRAY:
var _view = new Uint8Array(view.buffer, cursor, byte_length);
_view.set(new Uint8Array(value.buffer));
cursor += byte_length;
break;
case Types.ARRAYBUFFER:
case Types.BUFFER:
var _view = new Uint8Array(view.buffer, cursor, byte_length);
_view.set(new Uint8Array(value));
cursor += byte_length;
break;
case Types.BLOB:
case Types.ARRAY:
case Types.OBJECT:
break;
default:
throw 'TypeError: Unexpected type found.';
}
if (debug) {
binary_dump(view, start, cursor - start);
}
}
return view;
};
/**
* Unpack binary data into an object with value and cursor
* @param {DataView} view [description]
* @param {Number} cursor [description]
* @return {Object}
*/
var unpack = function(view, cursor) {
var i = 0,
endianness = BIG_ENDIAN,
start = cursor;
var type, length, byte_length, value, elem;
// Retrieve "type"
type = view.getUint8(cursor, endianness);
cursor += TYPE_LENGTH;
if (debug) {
console.info('Unpacking', type, TypeNames[type]);
}
// Retrieve "length"
if (type === Types.ARRAY || type === Types.OBJECT) {
length = view.getUint16(cursor, endianness);
cursor += LENGTH_LENGTH;
if (debug) {
console.info('Content Length', length);
}
}
// Retrieve "byte_length"
byte_length = view.getUint32(cursor, endianness);
cursor += BYTES_LENGTH;
if (debug) {
console.info('Byte Length', byte_length, 'bytes');
}
var type_name = Length[type];
var unit = type_name === null ? 0 : window[type_name + 'Array'].BYTES_PER_ELEMENT;
switch (type) {
case Types.NULL:
case Types.UNDEFINED:
if (debug) {
binary_dump(view, start, cursor - start);
}
// NULL and UNDEFINED doesn't have any octet
value = null;
break;
case Types.STRING:
length = byte_length / unit;
var string = [];
for (i = 0; i < length; i++) {
var code = view.getUint16(cursor, endianness);
cursor += unit;
string.push(String.fromCharCode(code));
}
value = string.join('');
if (debug) {
console.info('Actual Content %c"' + value + '"', 'font-weight:bold;');
binary_dump(view, start, cursor - start);
}
break;
case Types.NUMBER:
value = view.getFloat64(cursor, endianness);
cursor += unit;
if (debug) {
console.info('Actual Content %c"' + value.toString() + '"', 'font-weight:bold;');
binary_dump(view, start, cursor - start);
}
break;
case Types.BOOLEAN:
value = view.getUint8(cursor, endianness) === 1 ? true : false;
cursor += unit;
if (debug) {
console.info('Actual Content %c"' + value.toString() + '"', 'font-weight:bold;');
binary_dump(view, start, cursor - start);
}
break;
case Types.INT8ARRAY:
case Types.INT16ARRAY:
case Types.INT32ARRAY:
case Types.UINT8ARRAY:
case Types.UINT16ARRAY:
case Types.UINT32ARRAY:
case Types.FLOAT32ARRAY:
case Types.FLOAT64ARRAY:
case Types.ARRAYBUFFER:
elem = view.buffer.slice(cursor, cursor + byte_length);
cursor += byte_length;
// If ArrayBuffer
if (type === Types.ARRAYBUFFER) {
value = elem;
// If other TypedArray
} else {
value = new window[type_name + 'Array'](elem);
}
if (debug) {
binary_dump(view, start, cursor - start);
}
break;
case Types.BLOB:
if (debug) {
binary_dump(view, start, cursor - start);
}
// If Blob is available (on browser)
if (window.Blob) {
var mime = unpack(view, cursor);
var buffer = unpack(view, mime.cursor);
cursor = buffer.cursor;
value = new Blob([buffer.value], {
type: mime.value
});
} else {
// node.js implementation goes here
elem = view.buffer.slice(cursor, cursor + byte_length);
cursor += byte_length;
// node.js implementatino uses Buffer to help Blob
value = new Buffer(elem);
}
break;
case Types.ARRAY:
if (debug) {
binary_dump(view, start, cursor - start);
}
value = [];
for (i = 0; i < length; i++) {
// Retrieve array element
elem = unpack(view, cursor);
cursor = elem.cursor;
value.push(elem.value);
}
break;
case Types.OBJECT:
if (debug) {
binary_dump(view, start, cursor - start);
}
value = {};
for (i = 0; i < length; i++) {
// Retrieve object key and value in sequence
var key = unpack(view, cursor);
var val = unpack(view, key.cursor);
cursor = val.cursor;
value[key.value] = val.value;
}
break;
default:
throw 'TypeError: Type not supported.';
}
return {
value: value,
cursor: cursor
};
};
/**
* deferred function to process multiple serialization in order
* @param {array} array [description]
* @param {Function} callback [description]
* @return {void} no return value
*/
var deferredSerialize = function(array, callback) {
var length = array.length,
results = [],
count = 0,
byte_length = 0;
for (var i = 0; i < array.length; i++) {
(function(index) {
serialize(array[index], function(result) {
// store results in order
results[index] = result;
// count byte length
byte_length += result[0].header_size + result[0].byte_length;
// when all results are on table
if (++count === length) {
// finally concatenate all reuslts into a single array in order
var array = [];
for (var j = 0; j < results.length; j++) {
array = array.concat(results[j]);
}
callback(array, byte_length);
}
});
})(i);
}
};
/**
* Serializes object and return byte_length
* @param {mixed} obj JavaScript object you want to serialize
* @return {Array} Serialized array object
*/
var serialize = function(obj, callback) {
var subarray = [],
unit = 1,
header_size = TYPE_LENGTH + BYTES_LENGTH,
type, byte_length = 0,
length = 0,
value = obj;
type = find_type(obj);
unit = Length[type] === undefined || Length[type] === null ? 0 :
window[Length[type] + 'Array'].BYTES_PER_ELEMENT;
switch (type) {
case Types.UNDEFINED:
case Types.NULL:
break;
case Types.NUMBER:
case Types.BOOLEAN:
byte_length = unit;
break;
case Types.STRING:
length = obj.length;
byte_length += length * unit;
break;
case Types.INT8ARRAY:
case Types.INT16ARRAY:
case Types.INT32ARRAY:
case Types.UINT8ARRAY:
case Types.UINT16ARRAY:
case Types.UINT32ARRAY:
case Types.FLOAT32ARRAY:
case Types.FLOAT64ARRAY:
length = obj.length;
byte_length += length * unit;
break;
case Types.ARRAY:
deferredSerialize(obj, function(subarray, byte_length) {
callback([{
type: type,
length: obj.length,
header_size: header_size + LENGTH_LENGTH,
byte_length: byte_length,
value: null
}].concat(subarray));
});
return;
case Types.OBJECT:
var deferred = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
deferred.push(key);
deferred.push(obj[key]);
length++;
}
}
deferredSerialize(deferred, function(subarray, byte_length) {
callback([{
type: type,
length: length,
header_size: header_size + LENGTH_LENGTH,
byte_length: byte_length,
value: null
}].concat(subarray));
});
return;
case Types.ARRAYBUFFER:
byte_length += obj.byteLength;
break;
case Types.BLOB:
var mime_type = obj.type;
var reader = new FileReader();
reader.onload = function(e) {
deferredSerialize([mime_type, e.target.result], function(subarray, byte_length) {
callback([{
type: type,
length: length,
header_size: header_size,
byte_length: byte_length,
value: null
}].concat(subarray));
});
};
reader.onerror = function(e) {
throw 'FileReader Error: ' + e;
};
reader.readAsArrayBuffer(obj);
return;
case Types.BUFFER:
byte_length += obj.length;
break;
default:
throw 'TypeError: Type "' + obj.constructor.name + '" not supported.';
}
callback([{
type: type,
length: length,
header_size: header_size,
byte_length: byte_length,
value: value
}].concat(subarray));
};
/**
* Deserialize binary and return JavaScript object
* @param ArrayBuffer buffer ArrayBuffer you want to deserialize
* @return mixed Retrieved JavaScript object
*/
var deserialize = function(buffer, callback) {
var view = buffer instanceof DataView ? buffer : new DataView(buffer);
var result = unpack(view, 0);
return result.value;
};
if (debug) {
window.Test = {
BIG_ENDIAN: BIG_ENDIAN,
LITTLE_ENDIAN: LITTLE_ENDIAN,
Types: Types,
pack: pack,
unpack: unpack,
serialize: serialize,
deserialize: deserialize
};
}
var binarize = {
pack: function(obj, callback) {
try {
if (debug) console.info('%cPacking Start', 'font-weight: bold; color: red;', obj);
serialize(obj, function(array) {
if (debug) console.info('Serialized Object', array);
callback(pack(array));
});
} catch (e) {
throw e;
}
},
unpack: function(buffer, callback) {
try {
if (debug) console.info('%cUnpacking Start', 'font-weight: bold; color: red;', buffer);
var result = deserialize(buffer);
if (debug) console.info('Deserialized Object', result);
callback(result);
} catch (e) {
throw e;
}
}
};
================================================
FILE: FileBufferReader/dev/common.js
================================================
function merge(mergein, mergeto) {
if (!mergein) mergein = {};
if (!mergeto) return mergein;
for (var item in mergeto) {
try {
mergein[item] = mergeto[item];
} catch (e) {}
}
return mergein;
}
================================================
FILE: FileBufferReader/dev/head.js
================================================
(function() {
================================================
FILE: FileBufferReader/dev/tail.js
================================================
window.FileConverter = FileConverter;
window.FileSelector = FileSelector;
window.FileBufferReader = FileBufferReader;
})();
================================================
FILE: FileBufferReader/fbr-client/.gitignore
================================================
node_modules
bower_components
make-tar.sh
*.tar.gz
lib-cov
.*.swp
._*
.DS_Store
.git
.hg
.npmrc
.lock-wscript
.svn
.wafpickle-*
config.gypi
CVS
npm-debug.log
rmc-debug.log
================================================
FILE: FileBufferReader/fbr-client/.npmignore
================================================
node_modules
lib-cov
npm-debug.log
================================================
FILE: FileBufferReader/fbr-client/README.md
================================================
## fbr-client [](https://npmjs.org/package/fbr-client) [](https://npmjs.org/package/fbr-client)
Socket.io client for [FileBufferReader.js](https://github.com/muaz-khan/FileBufferReader).
```sh
npm install fbr-client
```
Then run the server:
```sh
cd ./node_modules/fbr-client/
node server.js
```
Then open: `http://localhost:9001/` or `http://local-ip:9001/`.
# Change Port
```sh
node server.js port=80
# or
node server.js port=8888
```
## Credits
[Muaz Khan](https://github.com/muaz-khan):
1. Personal Webpage: http://www.muazkhan.com
2. Email: muazkh@gmail.com
3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
4. Google+: https://plus.google.com/+WebRTC-Experiment
5. Facebook: https://www.facebook.com/WebRTC
## License
[FileBufferReader.js](https://github.com/muaz-khan/FileBufferReader) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
================================================
FILE: FileBufferReader/fbr-client/demo/circular-progress-bar.css
================================================
.rect-auto,
.c100.p51 .slice,
.c100.p52 .slice,
.c100.p53 .slice,
.c100.p54 .slice,
.c100.p55 .slice,
.c100.p56 .slice,
.c100.p57 .slice,
.c100.p58 .slice,
.c100.p59 .slice,
.c100.p60 .slice,
.c100.p61 .slice,
.c100.p62 .slice,
.c100.p63 .slice,
.c100.p64 .slice,
.c100.p65 .slice,
.c100.p66 .slice,
.c100.p67 .slice,
.c100.p68 .slice,
.c100.p69 .slice,
.c100.p70 .slice,
.c100.p71 .slice,
.c100.p72 .slice,
.c100.p73 .slice,
.c100.p74 .slice,
.c100.p75 .slice,
.c100.p76 .slice,
.c100.p77 .slice,
.c100.p78 .slice,
.c100.p79 .slice,
.c100.p80 .slice,
.c100.p81 .slice,
.c100.p82 .slice,
.c100.p83 .slice,
.c100.p84 .slice,
.c100.p85 .slice,
.c100.p86 .slice,
.c100.p87 .slice,
.c100.p88 .slice,
.c100.p89 .slice,
.c100.p90 .slice,
.c100.p91 .slice,
.c100.p92 .slice,
.c100.p93 .slice,
.c100.p94 .slice,
.c100.p95 .slice,
.c100.p96 .slice,
.c100.p97 .slice,
.c100.p98 .slice,
.c100.p99 .slice,
.c100.p100 .slice {
clip: rect(auto, auto, auto, auto);
}
.pie,
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill {
position: absolute;
border: 0.08em solid #307bbb;
width: 0.84em;
height: 0.84em;
clip: rect(0em, 0.5em, 1em, 0em);
border-radius: 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.pie-fill,
.c100.p51 .bar:after,
.c100.p51 .fill,
.c100.p52 .bar:after,
.c100.p52 .fill,
.c100.p53 .bar:after,
.c100.p53 .fill,
.c100.p54 .bar:after,
.c100.p54 .fill,
.c100.p55 .bar:after,
.c100.p55 .fill,
.c100.p56 .bar:after,
.c100.p56 .fill,
.c100.p57 .bar:after,
.c100.p57 .fill,
.c100.p58 .bar:after,
.c100.p58 .fill,
.c100.p59 .bar:after,
.c100.p59 .fill,
.c100.p60 .bar:after,
.c100.p60 .fill,
.c100.p61 .bar:after,
.c100.p61 .fill,
.c100.p62 .bar:after,
.c100.p62 .fill,
.c100.p63 .bar:after,
.c100.p63 .fill,
.c100.p64 .bar:after,
.c100.p64 .fill,
.c100.p65 .bar:after,
.c100.p65 .fill,
.c100.p66 .bar:after,
.c100.p66 .fill,
.c100.p67 .bar:after,
.c100.p67 .fill,
.c100.p68 .bar:after,
.c100.p68 .fill,
.c100.p69 .bar:after,
.c100.p69 .fill,
.c100.p70 .bar:after,
.c100.p70 .fill,
.c100.p71 .bar:after,
.c100.p71 .fill,
.c100.p72 .bar:after,
.c100.p72 .fill,
.c100.p73 .bar:after,
.c100.p73 .fill,
.c100.p74 .bar:after,
.c100.p74 .fill,
.c100.p75 .bar:after,
.c100.p75 .fill,
.c100.p76 .bar:after,
.c100.p76 .fill,
.c100.p77 .bar:after,
.c100.p77 .fill,
.c100.p78 .bar:after,
.c100.p78 .fill,
.c100.p79 .bar:after,
.c100.p79 .fill,
.c100.p80 .bar:after,
.c100.p80 .fill,
.c100.p81 .bar:after,
.c100.p81 .fill,
.c100.p82 .bar:after,
.c100.p82 .fill,
.c100.p83 .bar:after,
.c100.p83 .fill,
.c100.p84 .bar:after,
.c100.p84 .fill,
.c100.p85 .bar:after,
.c100.p85 .fill,
.c100.p86 .bar:after,
.c100.p86 .fill,
.c100.p87 .bar:after,
.c100.p87 .fill,
.c100.p88 .bar:after,
.c100.p88 .fill,
.c100.p89 .bar:after,
.c100.p89 .fill,
.c100.p90 .bar:after,
.c100.p90 .fill,
.c100.p91 .bar:after,
.c100.p91 .fill,
.c100.p92 .bar:after,
.c100.p92 .fill,
.c100.p93 .bar:after,
.c100.p93 .fill,
.c100.p94 .bar:after,
.c100.p94 .fill,
.c100.p95 .bar:after,
.c100.p95 .fill,
.c100.p96 .bar:after,
.c100.p96 .fill,
.c100.p97 .bar:after,
.c100.p97 .fill,
.c100.p98 .bar:after,
.c100.p98 .fill,
.c100.p99 .bar:after,
.c100.p99 .fill,
.c100.p100 .bar:after,
.c100.p100 .fill {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.c100 {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
margin: 0 0.1em 0.1em 0;
background-color: #cccccc;
}
.c100 *,
.c100 *:before,
.c100 *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.c100.center {
float: none;
margin: 0 auto;
}
.c100.big {
font-size: 240px;
}
.c100.small {
font-size: 80px;
}
.c100 > span {
position: absolute;
width: 100%;
z-index: 1;
left: 0;
top: 0;
width: 5em;
line-height: 5em;
font-size: 0.2em;
color: #cccccc;
display: block;
text-align: center;
white-space: nowrap;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.c100:after {
position: absolute;
top: 0.08em;
left: 0.08em;
display: block;
content: " ";
border-radius: 50%;
background-color: #f5f5f5;
width: 0.84em;
height: 0.84em;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.c100 .slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
-webkit-transform: rotate(3.6deg);
-moz-transform: rotate(3.6deg);
-ms-transform: rotate(3.6deg);
-o-transform: rotate(3.6deg);
transform: rotate(3.6deg);
}
.c100.p2 .bar {
-webkit-transform: rotate(7.2deg);
-moz-transform: rotate(7.2deg);
-ms-transform: rotate(7.2deg);
-o-transform: rotate(7.2deg);
transform: rotate(7.2deg);
}
.c100.p3 .bar {
-webkit-transform: rotate(10.8deg);
-moz-transform: rotate(10.8deg);
-ms-transform: rotate(10.8deg);
-o-transform: rotate(10.8deg);
transform: rotate(10.8deg);
}
.c100.p4 .bar {
-webkit-transform: rotate(14.4deg);
-moz-transform: rotate(14.4deg);
-ms-transform: rotate(14.4deg);
-o-transform: rotate(14.4deg);
transform: rotate(14.4deg);
}
.c100.p5 .bar {
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
.c100.p6 .bar {
-webkit-transform: rotate(21.6deg);
-moz-transform: rotate(21.6deg);
-ms-transform: rotate(21.6deg);
-o-transform: rotate(21.6deg);
transform: rotate(21.6deg);
}
.c100.p7 .bar {
-webkit-transform: rotate(25.2deg);
-moz-transform: rotate(25.2deg);
-ms-transform: rotate(25.2deg);
-o-transform: rotate(25.2deg);
transform: rotate(25.2deg);
}
.c100.p8 .bar {
-webkit-transform: rotate(28.8deg);
-moz-transform: rotate(28.8deg);
-ms-transform: rotate(28.8deg);
-o-transform: rotate(28.8deg);
transform: rotate(28.8deg);
}
.c100.p9 .bar {
-webkit-transform: rotate(32.4deg);
-moz-transform: rotate(32.4deg);
-ms-transform: rotate(32.4deg);
-o-transform: rotate(32.4deg);
transform: rotate(32.4deg);
}
.c100.p10 .bar {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.c100.p11 .bar {
-webkit-transform: rotate(39.6deg);
-moz-transform: rotate(39.6deg);
-ms-transform: rotate(39.6deg);
-o-transform: rotate(39.6deg);
transform: rotate(39.6deg);
}
.c100.p12 .bar {
-webkit-transform: rotate(43.2deg);
-moz-transform: rotate(43.2deg);
-ms-transform: rotate(43.2deg);
-o-transform: rotate(43.2deg);
transform: rotate(43.2deg);
}
.c100.p13 .bar {
-webkit-transform: rotate(46.800000000000004deg);
-moz-transform: rotate(46.800000000000004deg);
-ms-transform: rotate(46.800000000000004deg);
-o-transform: rotate(46.800000000000004deg);
transform: rotate(46.800000000000004deg);
}
.c100.p14 .bar {
-webkit-transform: rotate(50.4deg);
-moz-transform: rotate(50.4deg);
-ms-transform: rotate(50.4deg);
-o-transform: rotate(50.4deg);
transform: rotate(50.4deg);
}
.c100.p15 .bar {
-webkit-transform: rotate(54deg);
-moz-transform: rotate(54deg);
-ms-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
.c100.p16 .bar {
-webkit-transform: rotate(57.6deg);
-moz-transform: rotate(57.6deg);
-ms-transform: rotate(57.6deg);
-o-transform: rotate(57.6deg);
transform: rotate(57.6deg);
}
.c100.p17 .bar {
-webkit-transform: rotate(61.2deg);
-moz-transform: rotate(61.2deg);
-ms-transform: rotate(61.2deg);
-o-transform: rotate(61.2deg);
transform: rotate(61.2deg);
}
.c100.p18 .bar {
-webkit-transform: rotate(64.8deg);
-moz-transform: rotate(64.8deg);
-ms-transform: rotate(64.8deg);
-o-transform: rotate(64.8deg);
transform: rotate(64.8deg);
}
.c100.p19 .bar {
-webkit-transform: rotate(68.4deg);
-moz-transform: rotate(68.4deg);
-ms-transform: rotate(68.4deg);
-o-transform: rotate(68.4deg);
transform: rotate(68.4deg);
}
.c100.p20 .bar {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.c100.p21 .bar {
-webkit-transform: rotate(75.60000000000001deg);
-moz-transform: rotate(75.60000000000001deg);
-ms-transform: rotate(75.60000000000001deg);
-o-transform: rotate(75.60000000000001deg);
transform: rotate(75.60000000000001deg);
}
.c100.p22 .bar {
-webkit-transform: rotate(79.2deg);
-moz-transform: rotate(79.2deg);
-ms-transform: rotate(79.2deg);
-o-transform: rotate(79.2deg);
transform: rotate(79.2deg);
}
.c100.p23 .bar {
-webkit-transform: rotate(82.8deg);
-moz-transform: rotate(82.8deg);
-ms-transform: rotate(82.8deg);
-o-transform: rotate(82.8deg);
transform: rotate(82.8deg);
}
.c100.p24 .bar {
-webkit-transform: rotate(86.4deg);
-moz-transform: rotate(86.4deg);
-ms-transform: rotate(86.4deg);
-o-transform: rotate(86.4deg);
transform: rotate(86.4deg);
}
.c100.p25 .bar {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.c100.p26 .bar {
-webkit-transform: rotate(93.60000000000001deg);
-moz-transform: rotate(93.60000000000001deg);
-ms-transform: rotate(93.60000000000001deg);
-o-transform: rotate(93.60000000000001deg);
transform: rotate(93.60000000000001deg);
}
.c100.p27 .bar {
-webkit-transform: rotate(97.2deg);
-moz-transform: rotate(97.2deg);
-ms-transform: rotate(97.2deg);
-o-transform: rotate(97.2deg);
transform: rotate(97.2deg);
}
.c100.p28 .bar {
-webkit-transform: rotate(100.8deg);
-moz-transform: rotate(100.8deg);
-ms-transform: rotate(100.8deg);
-o-transform: rotate(100.8deg);
transform: rotate(100.8deg);
}
.c100.p29 .bar {
-webkit-transform: rotate(104.4deg);
-moz-transform: rotate(104.4deg);
-ms-transform: rotate(104.4deg);
-o-transform: rotate(104.4deg);
transform: rotate(104.4deg);
}
.c100.p30 .bar {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.c100.p31 .bar {
-webkit-transform: rotate(111.60000000000001deg);
-moz-transform: rotate(111.60000000000001deg);
-ms-transform: rotate(111.60000000000001deg);
-o-transform: rotate(111.60000000000001deg);
transform: rotate(111.60000000000001deg);
}
.c100.p32 .bar {
-webkit-transform: rotate(115.2deg);
-moz-transform: rotate(115.2deg);
-ms-transform: rotate(115.2deg);
-o-transform: rotate(115.2deg);
transform: rotate(115.2deg);
}
.c100.p33 .bar {
-webkit-transform: rotate(118.8deg);
-moz-transform: rotate(118.8deg);
-ms-transform: rotate(118.8deg);
-o-transform: rotate(118.8deg);
transform: rotate(118.8deg);
}
.c100.p34 .bar {
-webkit-transform: rotate(122.4deg);
-moz-transform: rotate(122.4deg);
-ms-transform: rotate(122.4deg);
-o-transform: rotate(122.4deg);
transform: rotate(122.4deg);
}
.c100.p35 .bar {
-webkit-transform: rotate(126deg);
-moz-transform: rotate(126deg);
-ms-transform: rotate(126deg);
-o-transform: rotate(126deg);
transform: rotate(126deg);
}
.c100.p36 .bar {
-webkit-transform: rotate(129.6deg);
-moz-transform: rotate(129.6deg);
-ms-transform: rotate(129.6deg);
-o-transform: rotate(129.6deg);
transform: rotate(129.6deg);
}
.c100.p37 .bar {
-webkit-transform: rotate(133.20000000000002deg);
-moz-transform: rotate(133.20000000000002deg);
-ms-transform: rotate(133.20000000000002deg);
-o-transform: rotate(133.20000000000002deg);
transform: rotate(133.20000000000002deg);
}
.c100.p38 .bar {
-webkit-transform: rotate(136.8deg);
-moz-transform: rotate(136.8deg);
-ms-transform: rotate(136.8deg);
-o-transform: rotate(136.8deg);
transform: rotate(136.8deg);
}
.c100.p39 .bar {
-webkit-transform: rotate(140.4deg);
-moz-transform: rotate(140.4deg);
-ms-transform: rotate(140.4deg);
-o-transform: rotate(140.4deg);
transform: rotate(140.4deg);
}
.c100.p40 .bar {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.c100.p41 .bar {
-webkit-transform: rotate(147.6deg);
-moz-transform: rotate(147.6deg);
-ms-transform: rotate(147.6deg);
-o-transform: rotate(147.6deg);
transform: rotate(147.6deg);
}
.c100.p42 .bar {
-webkit-transform: rotate(151.20000000000002deg);
-moz-transform: rotate(151.20000000000002deg);
-ms-transform: rotate(151.20000000000002deg);
-o-transform: rotate(151.20000000000002deg);
transform: rotate(151.20000000000002deg);
}
.c100.p43 .bar {
-webkit-transform: rotate(154.8deg);
-moz-transform: rotate(154.8deg);
-ms-transform: rotate(154.8deg);
-o-transform: rotate(154.8deg);
transform: rotate(154.8deg);
}
.c100.p44 .bar {
-webkit-transform: rotate(158.4deg);
-moz-transform: rotate(158.4deg);
-ms-transform: rotate(158.4deg);
-o-transform: rotate(158.4deg);
transform: rotate(158.4deg);
}
.c100.p45 .bar {
-webkit-transform: rotate(162deg);
-moz-transform: rotate(162deg);
-ms-transform: rotate(162deg);
-o-transform: rotate(162deg);
transform: rotate(162deg);
}
.c100.p46 .bar {
-webkit-transform: rotate(165.6deg);
-moz-transform: rotate(165.6deg);
-ms-transform: rotate(165.6deg);
-o-transform: rotate(165.6deg);
transform: rotate(165.6deg);
}
.c100.p47 .bar {
-webkit-transform: rotate(169.20000000000002deg);
-moz-transform: rotate(169.20000000000002deg);
-ms-transform: rotate(169.20000000000002deg);
-o-transform: rotate(169.20000000000002deg);
transform: rotate(169.20000000000002deg);
}
.c100.p48 .bar {
-webkit-transform: rotate(172.8deg);
-moz-transform: rotate(172.8deg);
-ms-transform: rotate(172.8deg);
-o-transform: rotate(172.8deg);
transform: rotate(172.8deg);
}
.c100.p49 .bar {
-webkit-transform: rotate(176.4deg);
-moz-transform: rotate(176.4deg);
-ms-transform: rotate(176.4deg);
-o-transform: rotate(176.4deg);
transform: rotate(176.4deg);
}
.c100.p50 .bar {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.c100.p51 .bar {
-webkit-transform: rotate(183.6deg);
-moz-transform: rotate(183.6deg);
-ms-transform: rotate(183.6deg);
-o-transform: rotate(183.6deg);
transform: rotate(183.6deg);
}
.c100.p52 .bar {
-webkit-transform: rotate(187.20000000000002deg);
-moz-transform: rotate(187.20000000000002deg);
-ms-transform: rotate(187.20000000000002deg);
-o-transform: rotate(187.20000000000002deg);
transform: rotate(187.20000000000002deg);
}
.c100.p53 .bar {
-webkit-transform: rotate(190.8deg);
-moz-transform: rotate(190.8deg);
-ms-transform: rotate(190.8deg);
-o-transform: rotate(190.8deg);
transform: rotate(190.8deg);
}
.c100.p54 .bar {
-webkit-transform: rotate(194.4deg);
-moz-transform: rotate(194.4deg);
-ms-transform: rotate(194.4deg);
-o-transform: rotate(194.4deg);
transform: rotate(194.4deg);
}
.c100.p55 .bar {
-webkit-transform: rotate(198deg);
-moz-transform: rotate(198deg);
-ms-transform: rotate(198deg);
-o-transform: rotate(198deg);
transform: rotate(198deg);
}
.c100.p56 .bar {
-webkit-transform: rotate(201.6deg);
-moz-transform: rotate(201.6deg);
-ms-transform: rotate(201.6deg);
-o-transform: rotate(201.6deg);
transform: rotate(201.6deg);
}
.c100.p57 .bar {
-webkit-transform: rotate(205.20000000000002deg);
-moz-transform: rotate(205.20000000000002deg);
-ms-transform: rotate(205.20000000000002deg);
-o-transform: rotate(205.20000000000002deg);
transform: rotate(205.20000000000002deg);
}
.c100.p58 .bar {
-webkit-transform: rotate(208.8deg);
-moz-transform: rotate(208.8deg);
-ms-transform: rotate(208.8deg);
-o-transform: rotate(208.8deg);
transform: rotate(208.8deg);
}
.c100.p59 .bar {
-webkit-transform: rotate(212.4deg);
-moz-transform: rotate(212.4deg);
-ms-transform: rotate(212.4deg);
-o-transform: rotate(212.4deg);
transform: rotate(212.4deg);
}
.c100.p60 .bar {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
}
.c100.p61 .bar {
-webkit-transform: rotate(219.6deg);
-moz-transform: rotate(219.6deg);
-ms-transform: rotate(219.6deg);
-o-transform: rotate(219.6deg);
transform: rotate(219.6deg);
}
.c100.p62 .bar {
-webkit-transform: rotate(223.20000000000002deg);
-moz-transform: rotate(223.20000000000002deg);
-ms-transform: rotate(223.20000000000002deg);
-o-transform: rotate(223.20000000000002deg);
transform: rotate(223.20000000000002deg);
}
.c100.p63 .bar {
-webkit-transform: rotate(226.8deg);
-moz-transform: rotate(226.8deg);
-ms-transform: rotate(226.8deg);
-o-transform: rotate(226.8deg);
transform: rotate(226.8deg);
}
.c100.p64 .bar {
-webkit-transform: rotate(230.4deg);
-moz-transform: rotate(230.4deg);
-ms-transform: rotate(230.4deg);
-o-transform: rotate(230.4deg);
transform: rotate(230.4deg);
}
.c100.p65 .bar {
-webkit-transform: rotate(234deg);
-moz-transform: rotate(234deg);
-ms-transform: rotate(234deg);
-o-transform: rotate(234deg);
transform: rotate(234deg);
}
.c100.p66 .bar {
-webkit-transform: rotate(237.6deg);
-moz-transform: rotate(237.6deg);
-ms-transform: rotate(237.6deg);
-o-transform: rotate(237.6deg);
transform: rotate(237.6deg);
}
.c100.p67 .bar {
-webkit-transform: rotate(241.20000000000002deg);
-moz-transform: rotate(241.20000000000002deg);
-ms-transform: rotate(241.20000000000002deg);
-o-transform: rotate(241.20000000000002deg);
transform: rotate(241.20000000000002deg);
}
.c100.p68 .bar {
-webkit-transform: rotate(244.8deg);
-moz-transform: rotate(244.8deg);
-ms-transform: rotate(244.8deg);
-o-transform: rotate(244.8deg);
transform: rotate(244.8deg);
}
.c100.p69 .bar {
-webkit-transform: rotate(248.4deg);
-moz-transform: rotate(248.4deg);
-ms-transform: rotate(248.4deg);
-o-transform: rotate(248.4deg);
transform: rotate(248.4deg);
}
.c100.p70 .bar {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
}
.c100.p71 .bar {
-webkit-transform: rotate(255.6deg);
-moz-transform: rotate(255.6deg);
-ms-transform: rotate(255.6deg);
-o-transform: rotate(255.6deg);
transform: rotate(255.6deg);
}
.c100.p72 .bar {
-webkit-transform: rotate(259.2deg);
-moz-transform: rotate(259.2deg);
-ms-transform: rotate(259.2deg);
-o-transform: rotate(259.2deg);
transform: rotate(259.2deg);
}
.c100.p73 .bar {
-webkit-transform: rotate(262.8deg);
-moz-transform: rotate(262.8deg);
-ms-transform: rotate(262.8deg);
-o-transform: rotate(262.8deg);
transform: rotate(262.8deg);
}
.c100.p74 .bar {
-webkit-transform: rotate(266.40000000000003deg);
-moz-transform: rotate(266.40000000000003deg);
-ms-transform: rotate(266.40000000000003deg);
-o-transform: rotate(266.40000000000003deg);
transform: rotate(266.40000000000003deg);
}
.c100.p75 .bar {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.c100.p76 .bar {
-webkit-transform: rotate(273.6deg);
-moz-transform: rotate(273.6deg);
-ms-transform: rotate(273.6deg);
-o-transform: rotate(273.6deg);
transform: rotate(273.6deg);
}
.c100.p77 .bar {
-webkit-transform: rotate(277.2deg);
-moz-transform: rotate(277.2deg);
-ms-transform: rotate(277.2deg);
-o-transform: rotate(277.2deg);
transform: rotate(277.2deg);
}
.c100.p78 .bar {
-webkit-transform: rotate(280.8deg);
-moz-transform: rotate(280.8deg);
-ms-transform: rotate(280.8deg);
-o-transform: rotate(280.8deg);
transform: rotate(280.8deg);
}
.c100.p79 .bar {
-webkit-transform: rotate(284.40000000000003deg);
-moz-transform: rotate(284.40000000000003deg);
-ms-transform: rotate(284.40000000000003deg);
-o-transform: rotate(284.40000000000003deg);
transform: rotate(284.40000000000003deg);
}
.c100.p80 .bar {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.c100.p81 .bar {
-webkit-transform: rotate(291.6deg);
-moz-transform: rotate(291.6deg);
-ms-transform: rotate(291.6deg);
-o-transform: rotate(291.6deg);
transform: rotate(291.6deg);
}
.c100.p82 .bar {
-webkit-transform: rotate(295.2deg);
-moz-transform: rotate(295.2deg);
-ms-transform: rotate(295.2deg);
-o-transform: rotate(295.2deg);
transform: rotate(295.2deg);
}
.c100.p83 .bar {
-webkit-transform: rotate(298.8deg);
-moz-transform: rotate(298.8deg);
-ms-transform: rotate(298.8deg);
-o-transform: rotate(298.8deg);
transform: rotate(298.8deg);
}
.c100.p84 .bar {
-webkit-transform: rotate(302.40000000000003deg);
-moz-transform: rotate(302.40000000000003deg);
-ms-transform: rotate(302.40000000000003deg);
-o-transform: rotate(302.40000000000003deg);
transform: rotate(302.40000000000003deg);
}
.c100.p85 .bar {
-webkit-transform: rotate(306deg);
-moz-transform: rotate(306deg);
-ms-transform: rotate(306deg);
-o-transform: rotate(306deg);
transform: rotate(306deg);
}
.c100.p86 .bar {
-webkit-transform: rotate(309.6deg);
-moz-transform: rotate(309.6deg);
-ms-transform: rotate(309.6deg);
-o-transform: rotate(309.6deg);
transform: rotate(309.6deg);
}
.c100.p87 .bar {
-webkit-transform: rotate(313.2deg);
-moz-transform: rotate(313.2deg);
-ms-transform: rotate(313.2deg);
-o-transform: rotate(313.2deg);
transform: rotate(313.2deg);
}
.c100.p88 .bar {
-webkit-transform: rotate(316.8deg);
-moz-transform: rotate(316.8deg);
-ms-transform: rotate(316.8deg);
-o-transform: rotate(316.8deg);
transform: rotate(316.8deg);
}
.c100.p89 .bar {
-webkit-transform: rotate(320.40000000000003deg);
-moz-transform: rotate(320.40000000000003deg);
-ms-transform: rotate(320.40000000000003deg);
-o-transform: rotate(320.40000000000003deg);
transform: rotate(320.40000000000003deg);
}
.c100.p90 .bar {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
}
.c100.p91 .bar {
-webkit-transform: rotate(327.6deg);
-moz-transform: rotate(327.6deg);
-ms-transform: rotate(327.6deg);
-o-transform: rotate(327.6deg);
transform: rotate(327.6deg);
}
.c100.p92 .bar {
-webkit-transform: rotate(331.2deg);
-moz-transform: rotate(331.2deg);
-ms-transform: rotate(331.2deg);
-o-transform: rotate(331.2deg);
transform: rotate(331.2deg);
}
.c100.p93 .bar {
-webkit-transform: rotate(334.8deg);
-moz-transform: rotate(334.8deg);
-ms-transform: rotate(334.8deg);
-o-transform: rotate(334.8deg);
transform: rotate(334.8deg);
}
.c100.p94 .bar {
-webkit-transform: rotate(338.40000000000003deg);
-moz-transform: rotate(338.40000000000003deg);
-ms-transform: rotate(338.40000000000003deg);
-o-transform: rotate(338.40000000000003deg);
transform: rotate(338.40000000000003deg);
}
.c100.p95 .bar {
-webkit-transform: rotate(342deg);
-moz-transform: rotate(342deg);
-ms-transform: rotate(342deg);
-o-transform: rotate(342deg);
transform: rotate(342deg);
}
.c100.p96 .bar {
-webkit-transform: rotate(345.6deg);
-moz-transform: rotate(345.6deg);
-ms-transform: rotate(345.6deg);
-o-transform: rotate(345.6deg);
transform: rotate(345.6deg);
}
.c100.p97 .bar {
-webkit-transform: rotate(349.2deg);
-moz-transform: rotate(349.2deg);
-ms-transform: rotate(349.2deg);
-o-transform: rotate(349.2deg);
transform: rotate(349.2deg);
}
.c100.p98 .bar {
-webkit-transform: rotate(352.8deg);
-moz-transform: rotate(352.8deg);
-ms-transform: rotate(352.8deg);
-o-transform: rotate(352.8deg);
transform: rotate(352.8deg);
}
.c100.p99 .bar {
-webkit-transform: rotate(356.40000000000003deg);
-moz-transform: rotate(356.40000000000003deg);
-ms-transform: rotate(356.40000000000003deg);
-o-transform: rotate(356.40000000000003deg);
transform: rotate(356.40000000000003deg);
}
.c100.p100 .bar {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.c100:hover {
cursor: default;
}
.c100:hover > span {
width: 3.33em;
line-height: 3.33em;
font-size: 0.3em;
color: #307bbb;
}
.c100:hover:after {
top: 0.04em;
left: 0.04em;
width: 0.92em;
height: 0.92em;
}
.c100.dark {
background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
border-color: #c6ff00 !important;
}
.c100.dark > span {
color: #777777;
}
.c100.dark:after {
background-color: #666666;
}
.c100.dark:hover > span {
color: #c6ff00;
}
.c100.green .bar,
.c100.green .fill {
border-color: #4db53c !important;
}
.c100.green:hover > span {
color: #4db53c;
}
.c100.green.dark .bar,
.c100.green.dark .fill {
border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
color: #5fd400;
}
.c100.orange .bar,
.c100.orange .fill {
border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
color: #dd9d22;
}
.c100.orange.dark .bar,
.c100.orange.dark .fill {
border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
color: #e08833;
}
================================================
FILE: FileBufferReader/fbr-client/demo/style.css
================================================
@import url(https://fonts.googleapis.com/css?family=Open+Sans);h1,h2,strong{font-weight:400}.gh-btn,.gh-count,.td-style2,a,footer a{text-decoration:none}html{background:#eee}body{font-family:'-apple-system',BlinkMacSystemFont,'Segoe UI','Open Sans',Myriad,Arial;font-size:1.2em;line-height:1.5em;margin:0}article,footer{display:block;max-width:900px;min-width:360px;width:80%}article{background:#fff;border:1px solid;border-color:#ddd #aaa #aaa #ddd;margin:2.5em auto 0;padding:2em}h1{margin-top:0}article p:first-of-type{margin-top:1.6em}article p:last-child{margin-bottom:0}footer{margin:0 auto 2em;text-align:center}footer a{color:#666;font-size:inherit;padding:1em;text-shadow:0 1px 1px #fff}footer a:focus,footer a:hover{color:#111}h1,h2{border-bottom:1px solid #bdbdbd;display:inline;line-height:36px;padding:0 0 3px}a{color:#2844FA}a:focus,a:hover{color:#1B29A4}a:active{color:#000}:-moz-any-link:focus{border:0;color:#000}::selection{background:#ccc}::-moz-selection{background:#ccc}button,input[type=button]{-moz-border-radius:3px;-moz-transition:none;-webkit-transition:none;background:#0370ea;background:-moz-linear-gradient(top,#008dfd 0,#0370ea 100%);background:-webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);border:1px solid #076bd2;border-radius:3px;color:#fff;display:inline-block;font-family:inherit;line-height:1.3;padding:5px 12px;text-align:center;text-shadow:1px 1px 1px #076bd2;font-size:1.5em}button:hover,input[type=button]:hover{background:#0993f0}button:active,input[type=button]:active{background:#0a76be}button[disabled],input[type=button][disabled]{background:0 0;border:1px solid #bbb5b5;color:gray;text-shadow:none}strong{color:#cc0e0e;font-family:inherit}td,th,tr{vertical-align:top;padding:.7em 1.4em;border-top:1px dotted #BBA9A9;border-right:1px dotted #BBA9A9}.gh-ico,.gravatar{vertical-align:middle}.table-style,.tr-style{border-top-style:solid;border-top-color:#ccc}table,tbody,td,tr{width:100%!important}.table-style{border-collapse:collapse;border-spacing:0;margin-top:0;margin-bottom:16px;display:block;width:728px;overflow:auto;word-break:normal;color:#333;font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:25.6px}.tr-style{border-top-width:1px;background-color:#f8f8f8}.td-style{padding:6px 13px;border:1px solid #ddd}.td-style2{color:#4183c4;background:0 0}.logo img{border-radius:50%;box-shadow:0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000}.experiment{border:1px solid #bdbdbd;margin:1em 3em;border-radius:.2em;text-align:left}.experiment .header{padding:.2em .4em}.experiment .description{padding:.8em 1.4em}ol{margin-left:1em}pre{border-left:2px solid red;margin-left:2em;padding-left:1em;overflow:auto}.commit{font-size:.8em;margin:1em .6em;padding:8px 8px 0;background:#e6f1f6;border:1px solid #c5d5dd;border-radius:4px}.commit-desc{display:block;margin:-5px 0 10px}.commit-desc img{max-width:100%}.commit-meta{margin-left:-8px;width:100%;padding:8px;background:#fff;border-top:1px solid #d8e6ec;border-bottom-right-radius:4px;border-bottom-left-radius:4px}.fork-left,.fork-right,.gh-btn,.gh-ico{background-repeat:no-repeat}.authorship{margin-top:-2px;margin-left:-4px;margin-bottom:-4px;font-size:14px;color:#999}.gravatar{margin-top:-2px;margin-right:3px;border-radius:3px}.author-name{color:#444}.commit-url{float:right;margin-left:15px;color:#888;font-size:12px}.dim{color:#dfdfdf}.roshan{color:red}.github-stargazers{position:absolute;right:14%;top:8%;font:700 11px/14px "Helvetica Neue",Helvetica,Arial,sans-serif;text-rendering:optimizeLegibility;overflow:hidden}.github-btn{height:20px;overflow:hidden}.gh-btn,.gh-count,.gh-ico{float:left;margin-left:5px}.gh-btn,.gh-count{padding:2px 5px 2px 4px;color:#555;text-shadow:0 1px 0 #fff;white-space:nowrap;cursor:pointer;border-radius:3px}.gh-btn{background-color:#e6e6e6;background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),to(#eaeaea));background-image:-webkit-linear-gradient(#fafafa,#eaeaea);background-image:-moz-linear-gradient(top,#fafafa,#eaeaea);background-image:-ms-linear-gradient(#fafafa,#eaeaea);background-image:-o-linear-gradient(#fafafa,#eaeaea);background-image:linear-gradient(#fafafa,#eaeaea);border:1px solid #d4d4d4;border-bottom-color:#bcbcbc}.gh-btn:active,.gh-btn:focus,.gh-btn:hover{color:#fff;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,.25);border-color:#518cc6 #518cc6 #2a65a0;background-color:#3072b3}.gh-btn:focus,.gh-btn:hover{background-image:-webkit-gradient(linear,0 0,0 100%,from(#599bdc),to(#3072b3));background-image:-webkit-linear-gradient(#599bdc,#3072b3);background-image:-moz-linear-gradient(top,#599bdc,#3072b3);background-image:-ms-linear-gradient(#599bdc,#3072b3);background-image:-o-linear-gradient(#599bdc,#3072b3);background-image:linear-gradient(#599bdc,#3072b3)}.gh-btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 5px rgba(0,0,0,.1);-moz-box-shadow:inset 0 2px 5px rgba(0,0,0,.1);box-shadow:inset 0 2px 5px rgba(0,0,0,.1)}.gh-ico{width:14px;height:15px;margin-top:-1px;margin-right:4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAtCAQAAABGtvB0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB7RJREFUWMPt12tQVPcZx/HHGw0VG6yo1Y42YGIbjamT6JhEbc1AUodaJNbnsNwsFRQUsUSQQUEUNILGotFITTA2olVCI7FoiLdquOgEcFBAQS5Z5bLcXFZcdvfs7ZxfX+yqoLvQ6btO+5w3e3bOdz87+9/5n12i/3RGkSfNoV/RQppDnjTq3yjYg9O4kg2s50pOY48hg/E+v63NNtXIomww1dRmey+hCUMRywVthDKntKy8rDynNEIp9LEwaDAhL0XWohzRWIRFiEa53HdqK00cjBAEU16N9RD8MRuz4W899GWNYOQgp4FLfopsvJs4Zj79jKbRdPIas6AxURYLUukHzoiJAfqz1bsPsoq38G4+xLu4a+en528GiDzFcfGnuZIOIU0Jorr8SM3JhoKqk6YH9akQJEPSAifIij9vuo930rMYT46kfCxK7g77i+Oi7oh4hejqLvSb6uM0QrxQf8IJsrItv4AorLk/ojDx6NOnwrocF1qlOoRIq+yPWI07x/cK+lYniEI6H0IkSP0RRuys4uWC7LiQzcWvkYtsxYCp/GXhDFlyiuxcwhPDjQORfd7JvoGSM+SCb+lUa8dA5M6cc0slkxMkWpewJXNWfkWA/IRI78z2iUuP0jkujA1l2xqn1W+ApZ9xHL+4mWFUOkH2V0eVn5iR9mlb6VGlAEaK+kalnIypa69n1jouTLs7r6bNbN72/rs1ByEDPUV4C8PIo/Oqcb8TpCE+0LQ6cveRkMKIpmBrhBh7DzMxjP0VlltbHBeYJOvO7mhJMp7VVUl6Y8fD74ho4snNsogXnCAYd/amYMrMunhsW/06bXxXch0RBwni11X4CTlrgmXjhV3HVnec6WvqrWj/hl4vSJUNCCbnA5/CqgDxD5XrGyO061VRbVwRYCysgg8N1gRCpy/vKTO0aaq0tWI19AiiwQfeqiuZFZH3Ay2BlqiefTdU38KbhmqmIB3V0EOPaqRjylDXExEmYBU+wzmcw2dYhaF21P/P//yMpMn0Cr1BC2khvUGv0GQaOUTBY3kNn2Yl93EfK/k0r+Gxg1w+nDzn+17cqyo1tFsNVoOhXVV6ce98X/Kk4c4AV94u6GwbZKg51Gx7JOh4B7s6DFynL6jMsRrsG6QGGvudxXDj2PQF5KhhL+EWQyHtaS+pNhSjAAW64pLqPe0KiSHU8ovPEpHLtUoAJhyGL0YTEcENvsiGCdDeixaeYfhFoYuRrL5Xio2Yh+eIiOCKeYhvKU1RM4Tup5jhsctMPYBcmDv3qTUY+de51q8BkyZ2GY0Y8EEp6hkHWjs/ilvFPxqAu69f27I/q4WhaGK3J8/P/7n2HoB9yS/nprz2G3qBvGgGzaTp5PXm4q+2fzAbHwK6Fp9Z/V4qKJWxo0uOWb2aIfRyCqfzCc7jTzhDeMhYvQFRGR2MoI8eB6OuHwbkPAyrXwdY+iqOVP2t+VLrlYYzVScsOqAxkUjKAW5/QS6P3u04hRhmup+OYemZA2/BtmNHNlF36gpzgJkn2Yq4GVa9VQ13ojsJcDA3dxHBXdJIpqQ5diQ8hnHkNtyI0g47QqLLieD2+W3Gym22omwroN9KRCOufewIUZXSWCIxCajea0eiyhgVG4jYTWFwhDDYm+hmjICoGlvRVQJgGlHCZIseDudyEBGmQlZX2JGVPREiJhNFejsh8H4WESZEGlbobYW+1dhBRHR7MZzMvUwiIrHVpLEjgZZYNRHRvnBnyNYzRERxnQxbIYnaKiKidqdI18dERL0VsBekkGNVRESn/ZwhmV8QEW1ofoTIFk0ljSWPU3OdId+nkgd5qMsfI+HGMB37sH9CeJjJMZJ2nP3Y748Pw+w/3cxdolrpZ30P/nK3EyURfr2/N3Ra1HZkcwfj89AHb2PBtZIQy7NERgeC8NbVpQI2dtsK3T+B/CVwoR+3L0avA+IoEVHaXMj6a3bk6DnG+j0YyYvzlnVezPk+URNqp9bqMzqLq7GJiChiK+NQsX3h1wLlWTSy9b3EgMJp2CRftvTZXt3UiBwsISKiEWUHAHGzHakNDrIG9fLzuUEK5fb5CNYcXCnakEM3sAlvEhHxmBCNQrq9xlZggqw3ad6dh1fNyoRQennhr433bUjN4z8bb78uqmUzJttP4Z7dyAjMg1fud0IvHxduBJsZa/UrzBF3HyWBxxj7mzHu0bmUBjRfIi8pUuptL9TeseoAUWl9oK2zX+Cp/AaQnmxEROqoGB2Ddxn9Dt+JUkU+SOpmJLYmd0T1EBHxME5jROvUcU8KuMk1QNXJsa+atuG6pV5TAmiK1N/qG4nIxWVW5VFAqsWYfghclXlhJobwj4YYfHLxUnwTI74prnGNhogn8VeMMFPTKfyw//4MT7kbUJX+bim9VBSuKQI0RZqiviZ6yd9fVQLI3Xj6HoRJzedj+hiCng/E5mxsYCTWxTeGGvmAoGOs0929gJ/S042nXA1Yxbr8qhPtpUDblY5r5od1+VYDIN/CNHp2MEl3NKsl0MpgCDIj2L74gVJWi/bY4wUc2IzGh7DdfiXAorV/gUXsgRs5HjyHKPXl3MbknpVGAYIcbkzuyW1UX8EauJLTwXjEohAqyJDQhkLEYjwNPnDHcmTgS1zGZfwdGVgOd/pvmX8Bbv8r+TZ9z+kAAAAASUVORK5CYII=);background-position:0 0}.gh-btn:active .gh-ico,.gh-btn:focus .gh-ico,.gh-btn:hover .gh-ico{background-position:-25px 0}.gh-count{position:relative;margin-left:0;background-color:#fafafa;border:1px solid #d4d4d4}.gh-count:focus,.gh-count:hover{color:#4183C4}.gh-count:after,.gh-count:before{content:' ';position:absolute;display:inline-block;width:0;height:0;border-color:transparent;border-style:solid}.gh-count:before{top:50%;left:-3px;margin-top:-4px;border-width:4px 4px 4px 0;border-right-color:#fafafa}.gh-count:after{top:50%;left:-4px;z-index:-1;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#d4d4d4}.github-btn-large{height:30px}.github-btn-large .gh-btn,.github-btn-large .gh-count{padding:3px 10px 3px 8px;font-size:16px;line-height:22px;border-radius:4px}.github-btn-large .gh-ico{width:22px;height:23px;background-position:0 -20px}.github-btn-large .gh-btn:active .gh-ico,.github-btn-large .gh-btn:focus .gh-ico,.github-btn-large .gh-btn:hover .gh-ico{background-position:-25px -20px}.github-btn-large .gh-count{margin-left:6px}.github-btn-large .gh-count:before{left:-5px;margin-top:-6px;border-width:6px 6px 6px 0}.github-btn-large .gh-count:after{left:-6px;margin-top:-7px;border-width:7px 7px 7px 0}@media (-moz-min-device-pixel-ratio:2),(-o-min-device-pixel-ratio:2/1),(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){.gh-ico{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABaCAQAAADkmzsCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAE81JREFUeNrtnGl0VFW2gHcIIggINLQoaj9bQHmgjUwRBZMK2A4Iora7CAFjGBIRFESZmwZkEgkiAg0oiigIggJhkkGgAjIpgyAkEAhICCGQkEDmoaru937UkKqQhFTwvbd6Lc5dK6tycm/t8917zj57uhH5/2h+Uk+aSGt5UoIkSJ6UVtJY6omf/Ec1P7lPnhBTKUd7afQHwqi//l1n6V69rHa16SXdox9pZ63yB319LWknplqdFgw78V32EdsV7Nhsadm/xn07793qwWKSdlLrj4CoqkP0vFLKcVYHaNWbFnCXBNbpvHNOYQqltIILP86s01kC5c83i/GYHncMO6Rg9JlPT648tSJ+wclRZ0MKnTDHtOVNCWgoQWP655x1jjub1UzkbQYzibXkODvPjO4nQXLXzWD00AJFGXZ5128FO7EUHwU7Y469m6oomq+vVlpAbQn8/n17EYARQ1eqe/6R6nQ3fgKwF64YL4FSu7IYvdSmvFawNRYLFn5gIn14hVfoyxQ2YcGyNbZ3oaI2NVdKQBUJiJ5s2IErW0dIkLSQO0Skhtwp9aSWVJWa8qgEbR7JVTDs302QAKnMqtQ2WqhE5p3fn7onYx5PUM3rblWjw5UFF/ad2x+Zp2iBtq6EiPsnRBpFwBkefOXFNi+ISQKlo4fGChJT+25hr9KEM2AvGhch9/uOcbvGK+FF5/aztu9hten32kz9tLE+oZ21ldbT5rpR7eFxrD+3P6xI0RN6u68q976gnCQglSYiGQcNe9LOt8OqBvcLnTZo3rtjI9p3G/p6yn7DyDwuQhOuQE7ifUE+q2IdppiN/UdYxj3mK4qihXrNQ2PZFMV8jXtZtv+IGUXf9VFEg93zATtPi0jVoqsAdqs1p1hjGXYAa7bUFeFpDPjp31LfN4zbNEWJusga7hXpf7VU5YsSni3CvaydnqLoRb3NFxl/aVGYDnwhIiJ/zU2ijJafKgEiInwJhVf+0tw3kO6K2Ti/jzYiemf/3LJAzIaaRGiTuM+Mol19kbHmPcDOgyIi7TrnpZQFYthnvyM1RWiMAd8P9Qmkx+fKqAxGiIjolLIwFEVPqJ8II4dmKT0W+iLjzHoo2OX4fGQJ5bScxNr1RUSKDkPCWp9AwuKVpQncIyJi/r1cEPRRERotPquExfsiI/M0ZI91fM67SLlt21MiItkTIfOUTyCh+crm1Y7PZnv5ID26iIhs3aiE5vsiw5YLSS87PjuWddkt6RURkaRXwJrj2xpB2T7C8TnkBiDj+omI7PinovgiA2DV03Kn1JXaRmH5IGfNUltqf/cMgM8gS8Icn/vnlw/ydR8RkaWvVwZkyUtyp9SWWrYL5YMc6iS1pdZXL/sM0tuqvDNe22ugthuXWh6G2Vg4QFtr2yETld5WX2TYc+DgVNoTSDvWlcth5yla0/bQh2DP8glkSLbyxpcaoK211br9ZqNskLHp0/poW23Zf5kyJNsXGUXHIHbl+adovTco8Q1s5YBs4mnang04tRaKfvMJZPp5JfIozfkbzZiyKa6XrXSMoZnpP/E3mvJwRKwyI9GnJ/I5pB6SZiJyhwT88h7ZZWD8jMMXaZZ2FPjUJ5Aftihm49tnaDr1tc9G2Xek714VP/5KZL7ZCdDT/nZ2VErMMXsMH9KGh7/uZDaUzZt9WiPdwTAiekldOiV3rx4c0S59aMGm/GQM53wqLDjBIrrjsHjrRvQyDKCbTyB5I/sUKrpYRB/SuMHr+QELlo1xLpDwwkt7sWBhPnVFRHSx0rewYIRPINVIgbObpUPCI8RdWu6weNdOdYEUpQ99yn3y7fLk2c3ARXwyg4QOSxMUNTSYVitD1PranLXDNi3vm6soDnW84BAj6ICfiIgGq6EsS+BJ36xGRgDGnKHyeEIbrGkLvjBv7J+fCmAUASTMcp5YQx6fMxQDGOajYUrVgjUDchVNXRrA4rF71VBDDWVMujL1Ur+CAVlhi9yq+j69rLyZW7AaH/13biceiq6azdIh8ysMDAzI3A1X1hWk5p+9uMzp03d8VYsygJP46iqIEHLsYIhd0VNLA23b5yzvu3HAuhD71EvKzAv988ddGbXNidFYzygh9uMH6eG7Z0U7CiE36fWedTrv/yBvFYvsRWnr4dLy/EsZO5OXSwN5TEz9QvOSgULaVMJ54zaWbIozG4qmL1nCDnawo7d1bJwy4ee+eaOS/rVbRER76lXFbGyJ5WsfZ69LTi/sYM1cNVFMYpKO1pyLmyB5eX5a6u74aDGJadUkWxZgI6SSHjvN+HFrbIhNUfrHbfiqcFSobfRRZdye3kXDTg87rN11p6KE2LYd50ceqmz8gR4UAFw9snB4nc62gnPbID7ampOyN3HH0n9m/OpwSqh8gEOEp9kRe3BglnPXuKYMuGBm2OEe9ogrrp1kUNaJA2yn081EhGjNcafKzYLMExiJOwxr3ln3TnKMx24yqkUwW4t2rjzdJ7u07bBP1venbDFsIehmY3RUYzDnS90OExnEzQcBRWjKl1hsMXuPfnJ2aGZYvqJGeOGQ1LlJ+4/YYrCwiCZ/TNwUf55hFj+TChhcZi8z6Yz/Hxb3pSqvsMIzOOc+VvDSHyjo/6JRhba8xXzWYGEHa5jLQFpTRW61W+1Wu9VutVvtVvtfbf5SXx6URyVAOkqgBEoHCZBH5EH5k/zH2BJ+0kAekcBSs+4mMUmgtJD6f0juXWtpF/1A1+kJzdBCLdB0jdNonaLPaM2b/vKGEiAmMT3a5cuRR79J2ZuTaM2yW+1FRVk555J3H1m6cPjDz4lJTNLu5rK8VfRFXeXI9JZ65OlK7VrpQoKa0kpM1YOXjEne5cj0lhp2LEyyLB5dPVhM0koqc+PUT3tp3A1SDI7juIao74++kQRWDY6ekpNIBVrWuVUTqwZLoDTyFaOF/lRywD3tkXlDsgdnR+aVErHfqS18WhdNxTS8b/qx6zNvnOEwv3LG4RB7tvSj74aLSZr6sF40Uj1i8q9Zo1I2x17YZ49xeSb2mKR9P8RNT+lt9UDJ1YgKY7QQ09aP7J7JhQwW0ZMHil0FqvBXevMl1zymWcHWGWKS5hVCUX+dXTy8t3I2xRW6aiC2sIzPWMgytrrqITbGDczxgJldofXyUK1OJ6M9IH6jV9kRLKrzmsvHBzgZXauTPFQRjGWuYb1eFH3SHoOF9YygM3fjvg/4cQ9/ZyQbsNhj1sSHFblRvtEb6f17a3VKsrjHlUY/bnh/qUJ/0lyXnLfU6iT33ghknmtIYzLS9mBhEU+XHcGiGs+wGEvanjEZbpR55QqoJYHxxU9jy9Tm0lYelnrlTsT60kLaj3mMLa7LTq29QaWKvukazsxkWwzRvFCBu+VHV9baYmYmu1HeLGdQbbfPcmPMw18ecW57baSuiPhLbakvDaWRNJQGUlP8pI60dZ7REn/muS7dMVvalrlStKVrx5iThIWoAeF6RL/QTuXuM930O02MfIsoLHOTnCAFWlZcqtHYCLvVOZaPREQ2js5MSNj476HOTS/oul3dVD148eikmLzLu6JERIhyLnvruIgyVLH662HHQCZfNiy8RxVd5RzYQQ0U0ZraVrvpaxqpvfRFfVRv00A94jxjE1V4z7BMuez8/XCpK6VK7Q6Zp50Yyx3POiXG8eu1+FmDxfTwc++/8dWYtVO3zoievGTM8L71n/5osOuKtIPO57/c8XvmmXodSq0e0n6OQbyZm7OLt0REwhLck8XQWLWW2DkK1J2i65UmIsKgvF0DXVUTpanihltnODHicO7ReaeLSx6yfi+ZtrYXubInUJDsnMp3EOvo+XGmNLweo6omKIqZw4cZ57hbfa5WaF9HCctx3q1/HTnkzEAmarWSMv7SxpENwU57V19hMhVsRVfFWaZGAHaAvEv3t70eRB1DmnaJr6nh6BuaUlGQwRlunb94uuuqniVEVFszyTmmL919ddOPVBTk2ilp41refO7oi54sJW+X+QdH8vn3/Tzi6puaUFGQ8AK9zymiReK+HoaimEtmGBte+gUAK43dfW3P/FDhJ3Ktp9k1lfgrVoDUgyUml9Yz2xRl7BVGu/sCy0tTX3cccC1vRo5PUxSzXb1qrfq3NwwAY527q/bsd25UzOH1TOIbuOv2jGgAw4jwTv/py47hbDnOfe6+Az5geEwlGm37zdnzD08Z28Y4x+POfNS4P/MUPrUNE92710uOHss/vUB6z3VMrLRZboxHfcTwmEoZMxzPsvd8TxmnvwPAxp2unmXd8LGlHnApXGobVoAzq7xA+u9XlCHZBLtB3vIVJMRdB0Hg0CxF6fOrp4yMIwB5R4t7Tk7yFaQos9iDz/sVIMO7MiI8TVGmpuC2XwbM9RVEUZd6vGNaiqK8fsVTRt5lgGvfFfdcXIDvzW0lZ6wAyE/zAulVoCizDxf3jFlVCRC3Izr3gKKEFnjKsOYCXJxR3JO+sBIg7lud8iGALc9b+RqKMttDYU5e5ztIcaXw3I2ONedlXAKQMKm4J2u67xwea25CyR4RcWj+qJXFPXOW+ooRZi0uEJ/xTVkgh6ZLA2kgDaWh/ClxpK8YthxpIHdJfblL7v55SikgYVZFGe+hAX6Y7CvI0Mziq8evVErWc9lyAI5/KjWlljSQ+lL/QBdfQfKPSSOpL3+WBlL32AIAe64XyBt5ihIZqy/pSxqmofr8x7NCbb6BjErV7mrWLhqi4RGxihLpVfNoTQZIO3S+Z7rZ9hqhPEcfcn0k2UZ3zHQh5FpE6mEA6yUvkDGXFaVvkjbXlvqidtUXJg6efNk3kBlHNVK76qv6sgb1vaAoI7y0VuE+gMzT6zvSkhfpygu8zAofQT4mkm68SvdfXsk8A1D4sxfIxyccc/rzQds1swudeZxns38ckFdxjDHpRNEBE4/TaVcfR3nUTK9yWttcAMP2RS8edDnP1OW0Dxjbi/3VMc87DHybt2O9drVzng+jMU/yBO15ivEpe9/JqhjGiKsZuxlIV54giKcmjHL0Rq/3WuyvOkazcpw4rOu7pJ00TXyQgxXE2EUD95fVcFvS3qU9F4c59FafXdzjqjvgDpbYYtaeHHatfOPxnaz1J+wxRHkYPFsdz/fCKC+Q+o46xot7pJkz/t5cgqT17Nvpxx7KNx4PEe6VHG+WvMfp2Xi/wkTHsVecte9Nnd5JrH6y8iEWYMFyee/6E7OSR5Zws8ZkzL6w4cSFfViw8EmxBaWNHSXQY9MJ9LbjjS0OizUyVO4UoQexyUuDusnD4idCI8Jzvkj7tYRtdShrIeE8UMIhqOMsE4StJSMhtX90WaxLRES0pn6rNv15zJ10YS47sGB5v0QZ7ftphiNs9ynPecZaXHGxLceL4ZxSQp3lyZslQPypxQps1+KaPSuPSUOpJ40kIHmXN0jyrtsfKiWTEnDWFRjqdd1fi6Y7VLAa+qQIJhYPO6RW/VyriFCf56LnXz+pVs/jWe4u4WmaHJ58ZF7R9FKiYOcdz+SDgdJcBD++MWwJG6oHS5AEStDC4dfPqfXX+/7NPxrs9OR/LyXiRtC6E84BxmtNqjMu7adQq9p0p4bq3/XN4ri8R1Rx1nUOc0096fjb2pPFlrSHlAjX+whNnpUmIjQk17CnHVkzacGwHz/OOecOOlx1V8kvLfEVTZs86z7vjdLCbP62ZUNcOmqt+ovwr3nnFLWrVfMc7/OMTe9lU5acUULsY9OVyM3XJSKWO75hSLZteWnlN/hz2FnNtKNqsDQTP6IAu2EzChyqIGe7vQguTAXI3w5p673Cew9XDU7c5sQ4WkY5FM+fPNDTlS6Yr37UK9gyLs1zKn17WlG+ilOU1fHK8AMlMJzh1hD7yQN0KSMu2cqVLohdWTVYWs6rx3qvcq1xABcmApwb7gVSTVpWDT65xnliIa3KDhR/tjrePeyv9TbewLLv13mJ05M++31IlrJoi6LMXKQoK9cro496hZO+cF27Kp7Pyq4kYpD7nYRNdTpLR7nH+gxRfM7k3Fj4fRS4fp5+0w3iJ/dIhzqdEza4iQeVF8VtzJZZxRFcy1tNmOrKiEy9pER9pigffaEos2d4gmgjtbium5XMVo84SWly3BHc1MNms5ikndwtVURSN8CZ0d4glzZKFblbAsTU7R+ph4ujxjcKSHezxUy75Ea5pv0L2jGA4fQbf1r5cL7i+jljigtE/TVC013XTEuxxdD9BlL8XWFPsOZsiqoeLCZ5Sv47aQs4TPvL7wHED4Rz26SjmKoHb55RlOnGWF6B8jfescfMvuCxMo5pmNYQGXXUjTDHBfLeCa2h4Z55xtlJ9hjeuXGmB3/meOQHz6yf+sCzYkrcDo5Y/a6JAGsmQfKeB57dMK1YnwGzK1QARxVGY4k+6WXEZ+s3YdnKrFmK8vV4RZn6kaKGZhafFWpbexILoytaZ0ckeR4uU965bYXpsGEawPz3ADZFAYbV09TPpX+F84f48TaW07+MuC7ya7YrZsITSrO9Rl5N+BkLb+NDdpcW7Lr+5T3AuHbKMEqxuGLw7a1EEV5gs2HZEuuVHyzzeCtna6xhYXNZKrfcm9aTuArZvsfpQWWqH3iAT7DYY2J+m5Ra9utjofbJl3cfNSxY+Jj/qlzVAFXoxvfXJ6PdLY8VdKHyJRz40YnFWLDk7Np99NPECWkDc18vCrWH2sKLBuW8n7bw3N6jebuwYGERwdxkrQi1eJ4PiCaONPLIJZXjrGYyz3DzZSIi+PEkE1zJ6FKOzYwngP+U/5xBDQKIYDKLiWYzm1nDl0ykH229/0PArXarlWz/A3bbfoDcyFIFAAAAAElFTkSuQmCC);background-size:50px 45px}}.plusone-gplus{position:absolute;top:8%}@media all and (max-width:800px){body{font-size:1.1em}article{margin:1.5em auto 0;padding:1.5em}.experiment{margin:1em .2em}}@media all and (max-width:500px){body{font-size:.9em}article{margin:.5em auto 0;padding:.5em}.experiment{margin:1em .1em}}@media all and (max-width:300px){body{font-size:.8em}article{margin:0 auto;padding:0}.experiment{margin:1em 0}}@media all and (min-width:1300px){.latest-commits{position:fixed;left:-3em;bottom:-1em;height:50%;overflow:auto;width:20%;font-size:1em}}.fork-left,.fork-right{position:absolute;top:0}li pre{margin:0}li h2{color:red}li li h2{font-size:1em;color:#0665f3}.commit pre,code{font-size:1.2em}.fork-left,.fork-right{background-position:center center;width:140px;height:140px}.fork-left{left:0;background:url(https://cdn.webrtc-experiment.com/images/fork-left.png)}.fork-right{right:0;background:url(https://cdn.webrtc-experiment.com/images/fork-right.png)}select{border:1px solid #d9d9d9;border-radius:1px;height:50px;margin-left:1em;margin-right:-5px;padding:1.1em;vertical-align:6px}p{padding:0 .8em .4em}li{border-bottom:1px solid #bdbdbd;border-left:1px solid #bdbdbd;padding:.5em}.commit pre{border:1px dotted #000;margin:1em}blockquote{background:#f1f1f1;padding:1em;border:1px dotted gray;margin:0 1em}.answer{border-left:1px dotted gray;margin-left:5em;padding:0 1em}pre a{text-decoration:underline}blockquote.inline{margin:1em;border-radius:3px;box-shadow:2px 2px #b6aaaa}
article p:first-of-type {
margin-top: inherit;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
.image-container {
margin: 2em 0;
text-align: center;
}
.image-parent {
border: 2px solid black;
border-radius: 5px;
margin: 0 2em;
}
.image-parent img {
width: 100%;
}
blockquote {
margin: 10px;
border-radius: 10px;
background: rgb(253, 253, 253);
padding: 8px 20px;
font-size: 25px;
font-weight: 200;
line-height: 1.5;
word-spacing: 5px;
}
section blockquote {
color: #EC008C;
}
.specific-h2,
h1 {
font-size: 35px;
font-weight: 200;
padding: 5px 10px;
border-bottom: 1px dotted #EC008C;
}
button,
.output-panel,
.highlighted-name {
font-size: 25px;
font-weight: 200;
line-height: 1.5;
word-spacing: 5px;
}
.highlighted-name {
color: #EC008C;
}
.output-panel {
overflow: hidden;
margin-left: 0;
padding-left: 0;
border-left: 0;
}
.specific-h2 a {
color: #EC008C;
}
h1 {
font-size: 40px;
color: #EC008C;
}
.inline-iframe {
width: 100%;
border: 0;
padding: 0;
outline: none;
}
video {
width: 100%:
}
video,
img {
max-width: 100%;
}
.single-line-text {
white-space: nowrap;
display: block;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
}
button {
text-align: center;
display: inline-block;
}
pre {
border: 0;
margin-left: 0;
font-size: 14px;
}
.button {
width: 200px;
margin-top: 30px;
margin-bottom: 30px;
}
.button a {
display: block;
height: 50px;
width: 200px;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea;
/* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00b7ea), color-stop(100%, #009ec3));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
/* IE10+ */
background: linear-gradient(top, #00b7ea 0%, #009ec3 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);
/* IE6-9 */
}
.button a,
.button p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}
.button p {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*TYPE*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*POSITION*/
position: absolute;
z-index: -1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/*HOVER*/
.button:hover .bottom {
margin: -10px 0 0 10px;
}
.button:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
/*ACTIVE*/
.button a:active {
background: #00b7ea;
/* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%, #00b7ea), color-stop(100%, #009ec3));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* IE10+ */
background: linear-gradient(top, #00b7ea 36%, #009ec3 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=0);
/* IE6-9 */
}
.button:active .bottom {
margin: -20px 0 0 10px;
}
.button:active .top {
margin: -70px 0 0 10px;
}
.fit-screen {
position: fixed;
top: -20px;
left: -20px;
width: 100%;
height: 100%;
background: white;
z-index: 999999999999999;
padding: 0;
}
.fit-screen li {
border-left: 0;
padding: 0;
margin: 0;
}
================================================
FILE: FileBufferReader/fbr-client/demo/ui.js
================================================
window.addEventListener('load', function() {
var socket = io.connect();
socket.on('connect', function() {
console.info('socket.io connection opened.');
btnSelectFile.disabled = false;
btnSelectFile.innerHTML = 'Select or Drop a File';
});
socket.on('disconnect', function() {
btnSelectFile.disabled = true;
resetButtons();
var helper = progressHelper[progressHelper.lastFileUUID];
if (helper && helper.li && helper.li.parentNode) {
isStoppedTimer = true;
helper.li.parentNode.removeChild(helper.li);
}
});
socket.on('error', function() {
btnSelectFile.disabled = true;
resetButtons();
});
var progressHelper = {};
var outputPanel = document.querySelector('.output-panel');
function previewFile(file) {
try {
file.url = URL.createObjectURL(fileSelector.lastSelectedFile || file);
} catch (e) {
return;
}
var html = 'Download ' + file.name + ' on your Disk!';
html += '';
if (file.name.match(/\.jpg|\.png|\.jpeg|\.gif/gi)) {
html += '';
} else if (file.name.match(/\.wav|\.mp3/gi)) {
html += '';
} else if (file.name.match(/\.webm|\.flv|\.mp4/gi)) {
html += '';
} else if (file.name.match(/\.pdf|\.js|\.txt|\.sh/gi)) {
html += '';
html += '
'; } progressHelper[file.uuid].li.innerHTML = html; fileSelector.lastSelectedFile = false; } var FileHelper = { onBegin: function(file) { var li = document.createElement('li'); li.innerHTML = '
'; li.style['min-height'] = '350px'; outputPanel.insertBefore(li, outputPanel.firstChild); outputPanel.className = 'fit-screen'; outputPanel.style.height = innerHeight + 'px'; progressHelper[file.uuid] = { li: li, progress: li.querySelector('progress'), label: li.querySelector('label') }; progressHelper[file.uuid].progress.max = file.maxChunks; btnSelectFile.disabled = true; if (fileSelector.lastSelectedFile) { btnSelectFile.innerHTML = 'File Sending In-Progress...'; } else { btnSelectFile.innerHTML = 'File Receiving In-Progress...'; } resetTimeCalculator(); timeCalculator(progressHelper[file.uuid].progress); progressHelper.lastFileUUID = file.uuid; }, onEnd: function(file) { previewFile(file); btnSelectFile.innerHTML = 'Select or Drop a File'; progressHelper.lastFileUUID = null; outputPanel.className = ''; outputPanel.style.height = 'auto'; }, onProgress: function(chunk) { var helper = progressHelper[chunk.uuid]; helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max; if (helper.progress.position > 0 && helper.li.querySelector('.circular-progress-bar-percentage')) { var position = +helper.progress.position.toFixed(2).split('.')[1] || 100; helper.li.querySelector('.circular-progress-bar-percentage').innerHTML = position + '%'; helper.li.querySelector('.circular-progress-bar').className = 'circular-progress-bar c100 p' + position; } if (chunk.currentPosition + 2 != chunk.maxChunks && helper.li.querySelector('.file-name')) { progressHelper[chunk.uuid].lastChunk = chunk; progressHelper.callback = function(timeRemaining) { var lastChunk = progressHelper[chunk.uuid].lastChunk; var singleChunkSize = chunk.size / lastChunk.maxChunks; var html = 'File name: ' + lastChunk.name + ' (File size: ' + bytesToSize(chunk.size) + ')'; html += '
Pieces (total/remaining): ' + lastChunk.maxChunks + '/' + lastChunk.currentPosition; html += ' (Single piece size: ' + bytesToSize(singleChunkSize) + ')'; var endedAt = (new Date).getTime(); var timeElapsed = endedAt - (progressHelper.startedAt || (new Date).getTime()); progressHelper.latencies.push(timeElapsed); var avg = calculateAverage(progressHelper.latencies); html += '
Latency in millseconds: ' + timeElapsed + ' (Average): ' + avg + ''; var remainingFileSize = singleChunkSize * (lastChunk.maxChunks - lastChunk.currentPosition); html += '
Remaining (time): ' + timeRemaining + ' (Remaining file size): ' + bytesToSize(remainingFileSize); helper.li.querySelector('.file-name').innerHTML = html; progressHelper.startedAt = (new Date).getTime(); }; } else { btnSelectFile.innerHTML = 'Select or Drop a File'; } } }; // RTCPeerConection // ---------------- function resetButtons() { btnSelectFile.innerHTML = 'Select or Drop a File'; btnSelectFile.disabled = false; } // getNextChunkCallback gets next available buffer // you need to send that buffer using socket.io function getNextChunkCallback(nextChunk, isLastChunk) { if (isLastChunk) { // alert('File Successfully sent.'); } socket.emit('buffer-stream', nextChunk); }; socket.on('buffer-stream', onBufferStream); function onBufferStream(chunk) { if (chunk instanceof ArrayBuffer || chunk instanceof DataView) { // array buffers are passed using socket.io // need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) { onBufferStream(object); }); return; } // if target user requested next chunk if (chunk.readyForNextChunk) { fileBufferReader.getNextChunk(chunk /*aka metadata*/ , getNextChunkCallback); return; } // if any of the chunks missed if (chunk.chunkMissing) { fileBufferReader.chunkMissing(chunk); return; } // if chunk is received fileBufferReader.addChunk(chunk, function(promptNextChunk) { socket.emit('buffer-stream', promptNextChunk); }); }; var progressIterations = 0; var ONE_SECOND = 1000; function resetTimeCalculator() { progressIterations = 0; isStoppedTimer = false; progressHelper.callback = function() {}; progressHelper.latencies = []; } function calculateAverage(arr) { var sum = 0; for (var i = 0; i < arr.length; i++) { sum += parseInt(arr[i], 10); //don't forget to add the base } var avg = sum / arr.length; return avg.toFixed(1); } var isStoppedTimer = false; // https://github.com/23/resumable.js/issues/168#issuecomment-65297110 function timeCalculator(progress, selfInvoker) { if (isStoppedTimer) return; var step = 1; var remainingProgress = 1.0 - progress.position; var estimatedCompletionTime = Math.round((remainingProgress / progress.position) * progressIterations); var estimatedHours, estimatedMinutes, estimatedSeconds, displayHours, displayMinutes, displaySeconds; progressIterations += step; if (progress.position < 1.0) { if (isFinite(estimatedCompletionTime)) { estimatedHours = Math.floor(estimatedCompletionTime / 3600); displayHours = estimatedHours > 9 ? estimatedHours : '0' + estimatedHours; estimatedMinutes = Math.floor((estimatedCompletionTime / 60) % 60); displayMinutes = estimatedMinutes > 9 ? estimatedMinutes : '0' + estimatedMinutes; estimatedSeconds = estimatedCompletionTime % 60; displaySeconds = estimatedSeconds > 9 ? estimatedSeconds : '0' + estimatedSeconds; } var output = ''; if (displayHours > 0) { output += displayHours + ' hours '; } if (displayMinutes > 0) { output += displayMinutes + ' minutes '; } if (displaySeconds > 0) { output += displaySeconds + ' seconds '; } if (output.length) { progressHelper.callback(output); } } setTimeout(function() { timeCalculator(progress, true); }, step * ONE_SECOND); } // ------------------------- // using FileBufferReader.js var fileSelector = new FileSelector(); // you can force specific files e.g. // image/png, image/*, image/jpeg, video/webm, audio/ogg etc. fileSelector.accept = '*.*'; var fileBufferReader = new FileBufferReader(); fileBufferReader.chunkSize = 100 * 1000; // 100k fileBufferReader.onBegin = FileHelper.onBegin; fileBufferReader.onProgress = FileHelper.onProgress; fileBufferReader.onEnd = FileHelper.onEnd; function onFileSelected(file) { fileSelector.lastSelectedFile = file; btnSelectFile.innerHTML = 'Please wait..';; btnSelectFile.disabled = true; fileBufferReader.readAsArrayBuffer(file, function(metadata) { fileBufferReader.getNextChunk(metadata, getNextChunkCallback); }, { chunkSize: fileBufferReader.chunkSize }); setTimeout(function() { if (fileSelector.lastSelectedFile) return; btnSelectFile.innerHTML = 'Select or Drop a File'; btnSelectFile.disabled = false; }, 5000); } var btnSelectFile = document.getElementById('select-file'); btnSelectFile.onclick = function() { btnSelectFile.disabled = true; fileSelector.selectSingleFile(function(file) { onFileSelected(file); }); }; // drag-drop support function onDragOver() { mainContainer.style.border = '7px solid #98a90f'; mainContainer.style.background = '#ffff13'; mainContainer.style.borderRadisu = '16px'; } function onDragLeave() { mainContainer.style.border = '1px solid rgb(189, 189, 189)'; mainContainer.style.background = 'transparent'; mainContainer.style.borderRadisu = 0; } var mainContainer = document.getElementById('main-container'); document.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragLeave(); }, false); document.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); onDragLeave(); if (!e.dataTransfer.files || !e.dataTransfer.files.length) { return; } var file = e.dataTransfer.files[0]; onFileSelected(file); }, false); // -------------------------------------------------------- function millsecondsToSeconds(millis) { var seconds = ((millis % 60000) / 1000).toFixed(1); return seconds; } function bytesToSize(bytes) { var k = 1000; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) { return '0 Bytes'; } var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } function getToken() { if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) { var a = window.crypto.getRandomValues(new Uint32Array(3)), token = ''; for (var i = 0, l = a.length; i < l; i++) { token += a[i].toString(36); } return token; } else { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } } }, false); ================================================ FILE: FileBufferReader/fbr-client/index.html ================================================ FileBufferReader over Socket.io
================================================
FILE: FileBufferReader/fbr-client/package.json
================================================
{
"name": "fbr-client",
"preferGlobal": true,
"version": "1.0.3",
"author": "Muaz Khan (http://www.muazkhan.com/)",
"description": "FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io. Share files same as Skype do!",
"scripts": {
"start": "node server.js port=9001"
},
"main": "server.js",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/FileBufferReader.git"
},
"keywords": [
"webrtc",
"file",
"file-sharing",
"datachannel",
"data-channels",
"file-reading",
"file-buffer",
"buffer",
"arraybuffer",
"buffers",
"chunkifier",
"fragmenter",
"library",
"javascript",
"webrtc-experiment",
"javascript-library",
"muaz",
"muaz-khan"
],
"analyze": false,
"license": "MIT",
"bugs": {
"url": "https://github.com/muaz-khan/FileBufferReader/issues",
"email": "muazkh@gmail.com"
},
"homepage": "https://www.WebRTC-Experiment.com/FileBufferReader/",
"_from": "fbr@",
"dependencies": {
"fbr": "latest",
"socket.io": "latest"
}
}
================================================
FILE: FileBufferReader/fbr-client/server.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Documentation - github.com/muaz-khan/FileBufferReader
var port = 9001;
port == 9001 && process.argv.forEach(function (val, index, array) {
if(val.toString().indexOf('port=') != -1) {
val = val.toString().split('=')[1];
val = parseInt(val);
port = val;
}
});
var fs = require('fs');
var path = require('path');
// force auto reboot on failures
var autoRebootServerOnFailure = true;
var server = require('http');
var url = require('url');
function serverHandler(request, response) {
try {
var uri = url.parse(request.url).pathname,
filename = path.join(process.cwd(), uri);
var stats;
try {
stats = fs.lstatSync(filename);
} catch (e) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write('404 Not Found: ' + path.join('/', uri) + '\n');
response.end();
return;
}
var contentType;
if (fs.statSync(filename).isDirectory()) {
contentType = {
'Content-Type': 'text/html'
};
filename += '/index.html';
}
fs.readFile(filename, 'binary', function(err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.write('404 Not Found: ' + path.join('/', uri) + '\n');
response.end();
return;
}
response.writeHead(200, contentType);
response.write(file, 'binary');
response.end();
});
} catch (e) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write('
' + e.stack || e.message || JSON.stringify(e)); response.end(); } } var app = server.createServer(serverHandler); function cmd_exec(cmd, args, cb_stdout, cb_end) { var spawn = require('child_process').spawn, child = spawn(cmd, args), me = this; me.exit = 0; me.stdout = ""; child.stdout.on('data', function(data) { cb_stdout(me, data) }); child.stdout.on('end', function() { cb_end(me) }); } function log_console() { console.log(foo.stdout); try { var pidToBeKilled = foo.stdout.split('\nnode ')[1].split(' ')[0]; console.log('------------------------------'); console.log('Please execute below command:'); console.log('\x1b[31m%s\x1b[0m ', 'kill ' + pidToBeKilled); console.log('Then try to run "server.js" again.'); console.log('------------------------------'); } catch (e) {} } function runServer() { app.on('error', function(e) { if (e.code == 'EADDRINUSE') { if (e.address === '0.0.0.0') { e.address = 'localhost'; } var socketURL = 'http://' + e.address + ':' + e.port + '/'; console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'Unable to listen on port: ' + e.port); console.log('\x1b[31m%s\x1b[0m ', socketURL + ' is already in use. Please kill below processes using "kill PID".'); console.log('------------------------------'); foo = new cmd_exec('lsof', ['-n', '-i4TCP:9001'], function(me, data) { me.stdout += data.toString(); }, function(me) { me.exit = 1; } ); setTimeout(log_console, 250); } }); app = app.listen(port, process.env.IP || '0.0.0.0', function(error) { var addr = app.address(); if (addr.address === '0.0.0.0') { addr.address = 'localhost'; } var domainURL = 'http://' + addr.address + ':' + addr.port + '/'; console.log('------------------------------'); console.log('socket.io is listening at:'); console.log('\x1b[31m%s\x1b[0m ', '\t' + domainURL); }); var io = require('socket.io')(app); io.on('connection', function(socket){ socket.on('buffer-stream', function(buffer) { socket.broadcast.emit('buffer-stream', buffer); }); }); } if (autoRebootServerOnFailure) { // auto restart app on failure var cluster = require('cluster'); if (cluster.isMaster) { cluster.fork(); cluster.on('exit', function(worker, code, signal) { cluster.fork(); }); } if (cluster.isWorker) { runServer(); } } else { runServer(); } ================================================ FILE: FileBufferReader/index.html ================================================WebRTC File Sharing | FileBufferReader
================================================
FILE: FileBufferReader/package.json
================================================
{
"name": "fbr",
"preferGlobal": true,
"version": "2.0.8",
"author": {
"name": "Muaz Khan",
"email": "muazkh@gmail.com",
"url": "http://www.muazkhan.com/"
},
"description": "FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io. Share files same as Skype do!",
"scripts": {
"start": "node FileBufferReader.js"
},
"main": "./FileBufferReader.js",
"repository": {
"type": "git",
"url": "https://github.com/muaz-khan/FileBufferReader.git"
},
"keywords": [
"webrtc",
"file",
"file-sharing",
"datachannel",
"data-channels",
"file-reading",
"file-buffer",
"buffer",
"arraybuffer",
"buffers",
"chunkifier",
"fragmenter",
"library",
"javascript",
"webrtc-experiment",
"javascript-library",
"muaz",
"muaz-khan"
],
"analyze": false,
"license": "MIT",
"readmeFilename": "README.md",
"bugs": {
"url": "https://github.com/muaz-khan/FileBufferReader/issues",
"email": "muazkh@gmail.com"
},
"homepage": "https://www.WebRTC-Experiment.com/FileBufferReader/",
"_id": "fbr@",
"_from": "fbr@",
"devDependencies": {
"grunt": "0.4.5",
"grunt-bump": "0.7.0",
"grunt-cli": "0.1.13",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.8.2",
"grunt-contrib-uglify": "0.11.0",
"grunt-jsbeautifier": "0.2.10",
"grunt-replace": "0.11.0",
"load-grunt-tasks": "3.4.0"
}
}
================================================
FILE: FileBufferReader/server.js
================================================
// http://127.0.0.1:9001
// http://localhost:9001
var server = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');
function serverHandler(request, response) {
var uri = url.parse(request.url).pathname,
filename = path.join(process.cwd(), uri);
fs.exists(filename, function(exists) {
if (!exists) {
response.writeHead(404, {
'Content-Type': 'text/plain'
});
response.write('404 Not Found: ' + filename + '\n');
response.end();
return;
}
if (filename.indexOf('favicon.ico') !== -1) {
return;
}
var isWin = !!process.platform.match(/^win/);
if (fs.statSync(filename).isDirectory() && !isWin) {
filename += '/index.html';
} else if (fs.statSync(filename).isDirectory() && !!isWin) {
filename += '\\index.html';
}
fs.readFile(filename, 'binary', function(err, file) {
if (err) {
response.writeHead(500, {
'Content-Type': 'text/plain'
});
response.write(err + '\n');
response.end();
return;
}
var contentType;
if (filename.indexOf('.html') !== -1) {
contentType = 'text/html';
}
if (filename.indexOf('.js') !== -1) {
contentType = 'application/javascript';
}
if (contentType) {
response.writeHead(200, {
'Content-Type': contentType
});
} else response.writeHead(200);
response.write(file, 'binary');
response.end();
});
});
}
var app;
app = server.createServer(serverHandler);
app = app.listen(process.env.PORT || 9001, process.env.IP || "0.0.0.0", function() {
var addr = app.address();
console.log("Server listening at", addr.address + ":" + addr.port);
});
================================================
FILE: Firefox-Extensions/README.md
================================================
# Firefox doesn't need add-ons in order to do screen sharing, since Firefox 52 already. [More info](https://wiki.mozilla.org/Screensharing)
# This repository is discontinued from September 01, 2017.
----
# [Firefox Extensions](https://github.com/muaz-khan/Firefox-Extensions)
> Enable screen capturing in Firefox for both localhost/127.0.0.1 and `https://www.webrtc-experiment.com` pages.
## Install from Firefox Addons Store
* [https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/](https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/)
## Simplest Demo
Try this demo after installing above addon:
* [https://www.webrtc-experiment.com/getScreenId/](https://www.webrtc-experiment.com/getScreenId/)
## Wanna Deploy it Yourself?
1. Open [`index.js`](https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js)
2. Go to line 7
3. Replace `arrayOfMyOwnDomains` array with your own list of domains
```javascript
// replace your own domains with below array
var arrayOfMyOwnDomains = ['webrtc-experiment.com', 'www.webrtc-experiment.com', 'localhost', '127.0.0.1'];
```
## How to Deploy?
1) Signup here:
* https://addons.mozilla.org/en-US/firefox/users/register
2) Use unique-addon-name here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/package.json#L3
3) Add your own domains here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js#L7
4) Make XPI of the directory.
```
[sudo] npm install jpm --global
jpm run -b nightly # test in Firefox Nightly without making the XPI
jpm xpi # it will create xpi file
```
5) Submit the XPI here:
* https://addons.mozilla.org/en-US/developers/addon/submit/1
Follow all steps. Read them carefully. This is hard/tough step to follow. Select valid browsers. E.g. Firefox 38 to Firefox 45. And submit your addon for "review".
It will take 2-3 hours for a Mozilla guy to review your addon. Then it will be available to public.
## License
[Firefox-Extensions](https://github.com/muaz-khan/Firefox-Extensions) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
================================================
FILE: Firefox-Extensions/enable-screen-capturing/README.md
================================================
# Firefox doesn't need add-ons in order to do screen sharing, since Firefox 52 already. [More info](https://wiki.mozilla.org/Screensharing)
# This repository is discontinued from September 01, 2017.
----
# [Firefox Extensions](https://github.com/muaz-khan/Firefox-Extensions)
> Enable screen capturing in Firefox for both localhost/127.0.0.1 and `https://www.webrtc-experiment.com` pages.
>
> You have to deploy this addon on Firefox addons-store, yourselves.
## Install from Firefox Addons Store
* [https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/](https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/)
### Check if screen capturing is enabled for your domains:
```javascript
// ask addon to check if screen capturing enabled for specific domains
window.postMessage({
checkIfScreenCapturingEnabled: true
}, "*");
// watch addon's response
// addon will return "isScreenCapturingEnabled=true|false"
window.addEventListener("message", function(event) {
if (event.source !== window) return;
var addonMessage = event.data;
if(!addonMessage || typeof addonMessage.isScreenCapturingEnabled === 'undefined') return;
if(addonMessage.isScreenCapturingEnabled === true) {
alert(JSON.stringify(addonMessage.domains) + '\n are enabled for screen capturing.');
}
else {
alert(JSON.stringify(addonMessage.domains) + '\n are NOT enabled for screen capturing.');
}
}, false);
```
### Insights:
Your requests to addon: `checkIfScreenCapturingEnabled`: ask addon to check if screen is already enabled for specific domains.
Addon responses:
1. `isScreenCapturingEnabled` - Here `true` means domain is already enabled for specific domains.
2. `domains` - list of same domains that are enabled for screen capturing.
## Simplest Demo
Try this demo after installing above addon:
* [https://www.webrtc-experiment.com/getScreenId/](https://www.webrtc-experiment.com/getScreenId/)
## Wanna Deploy it Yourself?
1. Open [`index.js`](https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js)
2. Go to line 7
3. Replace `arrayOfMyOwnDomains` array with your own list of domains
```javascript
// replace your own domains with below array
var arrayOfMyOwnDomains = ['webrtc-experiment.com', 'www.webrtc-experiment.com', 'localhost', '127.0.0.1'];
```
## How to Deploy?
1) Signup here:
* https://addons.mozilla.org/en-US/firefox/users/register
2) Use unique-addon-name here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/package.json#L3
3) Add your own domains here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js#L7
4) Make XPI of the directory.
```
[sudo] npm install jpm --global
jpm run -b nightly # test in Firefox Nightly without making the XPI
jpm xpi # it will create xpi file
```
5) Submit the XPI here:
* https://addons.mozilla.org/en-US/developers/addon/submit/1
Follow all steps. Read them carefully. This is hard/tough step to follow. Select valid browsers. E.g. Firefox 38 to Firefox 45. And submit your addon for "review".
It will take 2-3 hours for a Mozilla AMO reviewer to review your addon. Then it will be available to public.
## License
[Firefox-Extensions](https://github.com/muaz-khan/Firefox-Extensions) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
================================================
FILE: Firefox-Extensions/enable-screen-capturing/content-script.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Github - github.com/muaz-khan/Firefox-Extensions
// window.postMessage({ enableScreenCapturing: true }, "*");
window.addEventListener("message", function(event) {
// do NOT allow external domains
// via: https://github.com/muaz-khan/Firefox-Extensions/issues/11
if (event.source !== document.defaultView) return;
var addonMessage = event.data;
// this content-script is used to check whether screen capturing is enabled for your own domain or not.
if(addonMessage && addonMessage.checkIfScreenCapturingEnabled) {
self.port.on('is-screen-capturing-enabled-response', function(response) {
window.postMessage(response, '*');
});
self.port.emit('is-screen-capturing-enabled');
}
}, false);
================================================
FILE: Firefox-Extensions/enable-screen-capturing/index.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Github - github.com/muaz-khan/Firefox-Extensions
var prefService = require('sdk/preferences/service');
var configToReferListOfAllowedDomains = 'media.getusermedia.screensharing.allowed_domains';
var configToEnableScreenCapturing = 'media.getusermedia.screensharing.enabled';
// replace your own domains with below array
var arrayOfMyOwnDomains = ['webrtc-experiment.com', 'www.webrtc-experiment.com', 'rtcmulticonnection.herokuapp.com', 'localhost', '127.0.0.1'];
// Patterns to match the websites that may check whether ther add-on is installed.
// See https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern
var patternsOfMyDomains = ['*.webrtc-experiment.com', '*.rtcmulticonnection.herokuapp.com', /https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?\/.*/];
// e.g. if 127.0.0.1 or localhost is already allowed by anyone else
var listOfSimilarAlreadyAllowedDomains = [];
// if(prefService.has(configToEnableScreenCapturing)) {}
// this flag is enabled by default since Firefox version 37 or 38.
// it maybe get removed in version 47-48. (As far as I can assume)
// i.e. screen capturing will always be allowed to list of allowed_domains.
prefService.set(configToEnableScreenCapturing, true);
function addMyOwnDomains() {
var existingDomains = prefService.get(configToReferListOfAllowedDomains).split(',');
arrayOfMyOwnDomains.forEach(function(domain) {
if (existingDomains.indexOf(domain) === -1) {
existingDomains.push(domain);
}
// else { }
else if (existingDomains.indexOf(domain) !== -1) {
// Seems domain is already in the list.
// Keep it when this addon is uninstalled.
listOfSimilarAlreadyAllowedDomains.push(domain);
}
});
prefService.set(configToReferListOfAllowedDomains, existingDomains.join(','));
}
addMyOwnDomains();
// below code handles addon-uninstall
function removeMyDomainOnUnInstall() {
var externalDomains = [];
prefService.get(configToReferListOfAllowedDomains).split(',').forEach(function(domain) {
// Skip Others Domains
if (arrayOfMyOwnDomains.indexOf(domain) === -1) {
// if its NOT mine, keep it.
externalDomains.push(domain);
} else if (listOfSimilarAlreadyAllowedDomains.indexOf(domain) !== -1) {
// seems that localhost/127.0.0.1 are already added by external users
externalDomains.push(domain);
}
});
prefService.set(configToReferListOfAllowedDomains, externalDomains.join(','));
}
var {
when: unload
} = require("sdk/system/unload");
// By AMO policy global preferences must be changed back to their original value
unload(function() {
// remove only my own domains
removeMyDomainOnUnInstall();
});
var tabs = require("sdk/tabs");
var mod = require("sdk/page-mod");
var self = require("sdk/self");
var pageMod = mod.PageMod({
include: patternsOfMyDomains,
contentScriptFile: "./../content-script.js",
contentScriptWhen: "start", // or "ready"
onAttach: function(worker) {
// webpages can verify if their domains are REALLY enabled or not.
worker.port.on("is-screen-capturing-enabled", function() {
var isScreenCapturingEnabled = false;
var arrayOfEnabledDomains = [];
prefService.get(configToReferListOfAllowedDomains).split(',').forEach(function(domain) {
if(arrayOfMyOwnDomains.indexOf(domain) !== -1) {
// maybe we need to check whether all of, my own, domains are enabled?
isScreenCapturingEnabled = true;
// we will pass this to the webpage
// so webpage can understand which domain is enabled; and which is NOT.
arrayOfEnabledDomains.push(domain);
}
});
worker.port.emit('is-screen-capturing-enabled-response', {
isScreenCapturingEnabled: isScreenCapturingEnabled,
// pass only those domains that are enabled for screen capturing
// however those domains MUST be our own
domains: arrayOfEnabledDomains
});
});
}
});
================================================
FILE: Firefox-Extensions/enable-screen-capturing/package.json
================================================
{
"title": "Enable Screen Capturing in Firefox",
"name": "enable-screen-capturing",
"id": "{3ef085b0-fe60-11df-8cff-0800200c9a66}",
"version": "1.2.001",
"description": "This firefox extension enables screen capturing support in Firefox for https://www.webrtc-experiment.com pages.",
"main": "index.js",
"author": "Muaz Khan ",
"engines": {
"firefox": ">=38.0a1"
},
"license": "MIT",
"permissions": {
"unsafe-content-script": true
}
}
================================================
FILE: Firefox-Extensions/enable-screen-capturing/test/test-index.js
================================================
var main = require("../");
exports["test main"] = function(assert) {
assert.pass("Unit test running!");
};
exports["test main async"] = function(assert, done) {
assert.pass("async Unit test running!");
done();
};
require("sdk/test").run(exports);
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old/README.md
================================================
# Enable Screen Capturing using [Firefox Extensions API](https://github.com/muaz-khan/Firefox-Extensions)
Enable screen capturing using Firefox (for https://www.webrtc-experiment.com demos only):
* [enable-screen-capturing.xpi](https://www.webrtc-experiment.com/store/firefox-extension/enable-screen-capturing.xpi)
# To Install
1. type `about:config` into the URL bar in Firefox
2. in the Search box type `xpinstall.signatures.required`
3. double-click the preference, or right-click and select **"Toggle"**, to set it to `false`.
To use in your own domains:
Modify `bootstrap.js` file, line 18:
```javascript
['yourDomain.com', 'www.yourDomain.com'].forEach(function(domain) {
if (values.indexOf(domain) === -1) {
values.push(domain);
addon_domains.push(domain);
}
});
```
And modify `install.rdf` for you extension information (name, URL, icon etc.)
## Credits
[Muaz Khan](https://github.com/muaz-khan):
1. Personal Webpage: http://www.muazkhan.com
2. Email: muazkh@gmail.com
3. Twitter: https://twitter.com/muazkh and https://twitter.com/WebRTCWeb
4. Google+: https://plus.google.com/+WebRTC-Experiment
## License
[Firefox-Extensions](https://github.com/muaz-khan/Firefox-Extensions) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old/bootstrap.js
================================================
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/.
* taken from: HenrikJoreteg/getScreenMedia/firefox-extension-sample
* original source: https://hg.mozilla.org/users/blassey_mozilla.com/screenshare-whitelist/
*/
var addon_domains = []; // list of domains the addon added
var allowed_domains_pref = 'media.getusermedia.screensharing.allowed_domains';
var enable_screensharing_pref = 'media.getusermedia.screensharing.enabled';
function startup(data, reason) {
if (reason === APP_STARTUP) {
return;
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
var values = prefs.getCharPref(allowed_domains_pref).split(',');
['webrtc-experiment.com', 'www.webrtc-experiment.com'].forEach(function(domain) {
if (values.indexOf(domain) === -1) {
values.push(domain);
addon_domains.push(domain);
}
});
if(prefs.getBoolPref(enable_screensharing_pref) == false) {
prefs.setBoolPref(enable_screensharing_pref, 1);
}
prefs.setCharPref(allowed_domains_pref, values.join(','));
}
function shutdown(data, reason) {
if (reason === APP_SHUTDOWN) {
return;
}
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
.getService(Components.interfaces.nsIPrefBranch);
var values = prefs.getCharPref(allowed_domains_pref).split(',');
values = values.filter(function(value) {
return addon_domains.indexOf(value) === -1;
});
prefs.setCharPref(allowed_domains_pref, values.join(','));
}
function install(data, reason) {}
function uninstall(data, reason) {}
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old/install.rdf
================================================
muazkh@gmail.com
2
Screen Capturing in Firefox
Firefox extension to enable screen capturing
1.0
true
Muaz Khan
https://www.webrtc-experiment.com/
icon.png
{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
33.0
100000.*
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/FirefoxScreenAddon.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Github - github.com/muaz-khan/Firefox-Extensions
// FirefoxScreenAddon.checkIfScreenCapturingEnabled(domains, callback);
// FirefoxScreenAddon.enableScreenCapturing(domains, callback);
var FirefoxScreenAddon = (function() {
return {
checkIfScreenCapturingEnabled: function(domains, callback) {
var isCallbackFired = false;
// ask addon to check if screen capturing enabled for specific domains
window.postMessage({
checkIfScreenCapturingEnabled: true,
domains: domains
}, "*");
// watch addon's response
// addon will return "isScreenCapturingEnabled=true|false"
window.addEventListener("message", function(event) {
if(!isCallbackFired) return;
var addonMessage = event.data;
if(!addonMessage || typeof addonMessage.isScreenCapturingEnabled === 'undefined') return;
isCallbackFired = true;
callback(addonMessage);
}, false);
},
enableScreenCapturing: function(domains, callback) {
var isCallbackFired = false;
// request addon to enable screen capturing for your domains
window.postMessage({
enableScreenCapturing: true,
domains: domains
}, "*");
// watch addon's response
// addon will return "enabledScreenCapturing=true" for success
// else "enabledScreenCapturing=false" for failure (i.e. user rejection)
window.addEventListener("message", function(event) {
if(!isCallbackFired) return;
var addonMessage = event.data;
if(!addonMessage || typeof addonMessage.enabledScreenCapturing === 'undefined') return;
isCallbackFired = true;
callback(addonMessage);
}, false);
}
};
})();
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/README.md
================================================
# [Firefox Extensions](https://github.com/muaz-khan/Firefox-Extensions)
> Enable screen capturing in Firefox for both localhost/127.0.0.1 and `https://www.webrtc-experiment.com` pages.
## Install from Firefox Addons Store
* [https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/](https://addons.mozilla.org/en-US/firefox/addon/enable-screen-capturing/)
## How to reuse same addon for your own domains?
Means that, you **don't need to publish your own addon**, you can reuse above link in your own domains/applications!
You should copy/paste following code in your own webpage/domain (HTML/PHP/Python/etc.):
```javascript
// request addon to enable screen capturing for your domains
window.postMessage({
enableScreenCapturing: true,
domains: ["www.yourdomain.com", "yourdomain.com"]
}, "*");
// watch addon's response
// addon will return "enabledScreenCapturing=true" for success
// else "enabledScreenCapturing=false" for failure (i.e. user rejection)
window.addEventListener("message", function(event) {
var addonMessage = event.data;
if(!addonMessage || typeof addonMessage.enabledScreenCapturing === 'undefined') return;
if(addonMessage.enabledScreenCapturing === true) {
// addonMessage.domains === [array-of-your-domains]
alert(JSON.stringify(addonMessage.domains) + ' are enabled for screen capturing.');
}
else {
// reason === 'user-rejected'
alert(addonMessage.reason);
}
}, false);
```
## Simplest Demo
Try this demo after installing above addon:
* [https://www.webrtc-experiment.com/getScreenId/](https://www.webrtc-experiment.com/getScreenId/)
## Wanna Deploy it Yourself?
1. Open [`index.js`](https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js)
2. Go to line 7
3. Replace `arrayOfMyOwnDomains` array with your own list of domains
```javascript
// replace your own domains with below array
var arrayOfMyOwnDomains = ['webrtc-experiment.com', 'www.webrtc-experiment.com', 'localhost', '127.0.0.1'];
```
## How to Deploy?
1) Signup here:
* https://addons.mozilla.org/en-US/firefox/users/register
2) Use unique-addon-name here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/package.json#L3
3) Add your own domains here:
* https://github.com/muaz-khan/Firefox-Extensions/blob/master/enable-screen-capturing/index.js#L7
4) Make XPI of the directory.
```
[sudo] npm install jpm --global
jpm run -b nightly # test in Firefox Nightly without making the XPI
jpm xpi # it will create xpi file
```
5) Submit the XPI here:
* https://addons.mozilla.org/en-US/developers/addon/submit/1
Follow all steps. Read them carefully. This is hard/tough step to follow. Select valid browsers. E.g. Firefox 38 to Firefox 45. And submit your addon for "review".
It will take 2-3 hours for a Mozilla guy to review your addon. Then it will be available to public.
## License
[Firefox-Extensions](https://github.com/muaz-khan/Firefox-Extensions) are released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](http://www.MuazKhan.com/).
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/content-script.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Github - github.com/muaz-khan/Firefox-Extensions
// window.postMessage({ enableScreenCapturing: true, domains: ["www.firefox.com"] }, "*");
window.addEventListener("message", function(event) {
var addonMessage = event.data;
if(addonMessage && addonMessage.enableScreenCapturing && addonMessage.domains && addonMessage.domains.length) {
var confirmMessage = 'Current webpage requested to enable WebRTC Screen Capturing for following domains:\n';
confirmMessage += JSON.stringify(addonMessage.domains, null, '\t') + '\n\n';
confirmMessage += 'Please confirm to enable "permanent" screen capturing for above domains.';
if(window.confirm(confirmMessage)) {
self.port.emit('installation-confirmed', addonMessage.domains);
// tell webpage that user confirmed screen capturing & its enabled for his domains.
window.postMessage({
enabledScreenCapturing: true,
domains: addonMessage.domains
}, '*');
}
else {
// tell webpage that user denied/rejected screen capturing for his domains.
window.postMessage({
enabledScreenCapturing: false,
domains: addonMessage.domains,
reason: 'user-rejected'
}, '*');
}
}
if(addonMessage && addonMessage.checkIfScreenCapturingEnabled && addonMessage.domains && addonMessage.domains.length) {
self.port.on('is-screen-capturing-enabled-response', function(response) {
window.postMessage(response, '*');
});
self.port.emit('is-screen-capturing-enabled', addonMessage.domains);
}
}, false);
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/index.js
================================================
// Muaz Khan - www.MuazKhan.com
// MIT License - www.WebRTC-Experiment.com/licence
// Github - github.com/muaz-khan/Firefox-Extensions
var prefService = require('sdk/preferences/service');
var configToReferListOfAllowedDomains = 'media.getusermedia.screensharing.allowed_domains';
var configToEnableScreenCapturing = 'media.getusermedia.screensharing.enabled';
// replace your own domains with below array
var arrayOfMyOwnDomains = ['webrtc-experiment.com', 'www.webrtc-experiment.com', 'localhost', '127.0.0.1'];
// e.g. if 127.0.0.1 or localhost is already allowed by anyone else
var listOfSimilarAlreadyAllowedDomains = [];
// if(prefService.has(configToEnableScreenCapturing)) {}
// this flag is enabled by default since Firefox version 37 or 38.
// it maybe get removed in version 47-48. (As far as I can assume)
// i.e. screen capturing will always be allowed to list of allowed_domains.
prefService.set(configToEnableScreenCapturing, true);
function addMyOwnDomains() {
var existingDomains = prefService.get(configToReferListOfAllowedDomains).split(',');
arrayOfMyOwnDomains.forEach(function(domain) {
if (existingDomains.indexOf(domain) === -1) {
existingDomains.push(domain);
}
// else { }
else if (existingDomains.indexOf(domain) !== -1) {
// Seems domain is already in the list.
// Keep it when this addon is uninstalled.
listOfSimilarAlreadyAllowedDomains.push(domain);
}
});
prefService.set(configToReferListOfAllowedDomains, existingDomains.join(','));
}
addMyOwnDomains();
// below code handles addon-uninstall
function removeMyDomainOnUnInstall() {
var externalDomains = [];
prefService.get(configToReferListOfAllowedDomains).split(',').forEach(function(domain) {
// Skip Others Domains
if (arrayOfMyOwnDomains.indexOf(domain) === -1) {
// if its NOT mine, keep it.
externalDomains.push(domain);
} else if (listOfSimilarAlreadyAllowedDomains.indexOf(domain) !== -1) {
// seems that localhost/127.0.0.1 are already added by external users
externalDomains.push(domain);
}
});
prefService.set(configToReferListOfAllowedDomains, externalDomains.join(','));
}
var {
when: unload
} = require("sdk/system/unload");
// By AMO policy global preferences must be changed back to their original value
unload(function() {
// remove only my own domains
removeMyDomainOnUnInstall();
});
/*
* connect with webpage using postMessage
* a webpage can use following API to enable screen capturing for his domains
* window.postMessage({ enableScreenCapturing: true, domains: ["www.firefox.com"] }, "*");
*
* current firefox user is always asked to confirm whether he is OK to enable screen capturing for requested domains.
*/
var tabs = require("sdk/tabs");
var mod = require("sdk/page-mod");
var self = require("sdk/self");
var pageMod = mod.PageMod({
include: ["*"],
contentScriptFile: "./../content-script.js",
contentScriptWhen: "start", // or "ready"
onAttach: function(worker) {
worker.port.on("installation-confirmed", function(domains) {
// make sure that this addon's self-domains (i.e. "arrayOfMyOwnDomains")
// are not included in the "listOfSimilarAlreadyAllowedDomains" array.
removeMyDomainOnUnInstall();
arrayOfMyOwnDomains = arrayOfMyOwnDomains.concat(domains);
addMyOwnDomains();
});
worker.port.on("is-screen-capturing-enabled", function(domains) {
var isScreenCapturingEnabled = false;
prefService.get(configToReferListOfAllowedDomains).split(',').forEach(function(domain) {
if(domains.indexOf(domain) !== -1) {
isScreenCapturingEnabled = true;
}
});
worker.port.emit('is-screen-capturing-enabled-response', {
isScreenCapturingEnabled: isScreenCapturingEnabled,
domains: domains
});
});
}
});
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/package.json
================================================
{
"title": "Enable Screen Capturing in Firefox",
"name": "enable-screen-capturing",
"id": "{3ef085b0-fe60-11df-8cff-0800200c9a66}",
"version": "1.1.001",
"description": "This firefox extension enables screen capturing support in Firefox for https://www.webrtc-experiment.com pages.",
"main": "index.js",
"author": "Muaz Khan ",
"engines": {
"firefox": ">=38.0a1"
},
"license": "MIT",
"permissions": {
"unsafe-content-script": true
}
}
================================================
FILE: Firefox-Extensions/enable-screen-capturing-old2/test/test-index.js
================================================
var main = require("../");
exports["test main"] = function(assert) {
assert.pass("Unit test running!");
};
exports["test main async"] = function(assert, done) {
assert.pass("async Unit test running!");
done();
};
require("sdk/test").run(exports);
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2012-2020 [Muaz Khan](https://github.com/muaz-khan)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: MediaStreamRecorder/.gitignore
================================================
# Node
node_modules
# bower
bower_components
npm-debug.log
================================================
FILE: MediaStreamRecorder/.npmignore
================================================
node_modules
lib-cov
npm-debug.log
bower_components
================================================
FILE: MediaStreamRecorder/.travis.yml
================================================
language: node_js
node_js:
- "0.11"
install: npm install
before_script:
- npm install grunt-cli@0.1.13 -g
- npm install grunt@0.4.5
- grunt
after_failure: npm install && grunt
matrix:
fast_finish: true
================================================
FILE: MediaStreamRecorder/AudioStreamRecorder/FlashAudioRecorder.js
================================================
// muazkh - github.com/muaz-khan
// @neizerth - github.com/neizerth
// MIT License - https://webrtc-experiment.appspot.com/licence/
// Documentation - https://github.com/streamproc/MediaStreamRecorder
// ==========================================================
// FlashAudioRecorder.js
// Based on recorder.js - https://github.com/jwagener/recorder.js
function FlashAudioRecorder(o) {
if (o == null) {
o = {};
}
var self = this,
baseUrl = getBaseUrl(),
defaults = {
swfObjectPath: baseUrl + 'lib/recorder.js/recorder.swf',
jsLibPath: baseUrl + 'lib/recorder.js/recorder.js',
encoderPath: baseUrl + 'lib/wavencoder/wavencoder.js',
flashContainer: null,
dataType: 'url', // url | blob | raw | dataUri | false
uploadParams: {
url: '',
audioParam: "",
params: {}
},
ondataavailable: null,
onstop: function(e) {
},
onstart: function(e) {
},
onFlashSecurity: function(e) {
var flashContainer = Recorder.options.flashContainer;
flashContainer.style.left = ((window.innerWidth || document.body.offsetWidth) / 2) - 115 + "px";
flashContainer.style.top = ((window.innerHeight || document.body.offsetHeight) / 2) - 70 + "px";
},
onready: function(e) {
},
onerror: function(e) {
}
},
_initialized = false,
_startRequest = false,
options = extend(defaults, o);
include(options.jsLibPath, init);
function init() {
if (!_initialized) {
Recorder._defaultOnShowFlash = true;
Recorder.initialize({
swfSrc: options.swfObjectPath,
flashContainer: options.flashContainer,
onFlashSecurity: function(e) {
self.onFlashSecurity(e);
},
initialized: function(e) {
self.onready();
_initialized = true;
if (_startRequest) {
start();
}
}
});
}
}
function initEncoder() {
WavEncoder.defaults = {
numChannels: 1, // mono
sampleRateHz: 44100, // 44100 Hz
bytesPerSample: 2, // 16 bit
clip: true
};
}
function start(interval) {
_startRequest = true;
if (_initialized) {
if (self.state != 'inactive') {
var error = {
message: 'The object is in an invalid state',
code: DOMException.INVALID_STATE_ERR
}
self.onerror(error);
throw error;
}
self.state = 'recording';
_startRequest = false;
Recorder.record({
start: function(e) {
self.onstart(e);
}
});
}
}
function stop() {
if (self.state == 'inactive') {
var error = {
message: 'The object is in an invalid state',
code: DOMException.INVALID_STATE_ERR
}
self.onerror(error);
throw error;
}
self.state = 'inactive';
_startRequest = false;
Recorder.stop();
self.onstop();
if (typeof self.ondataavailable == 'function') {
if (self.dataType == 'url') {
upload();
} else if (self.dataType != false) {
handleBinaryData();
}
}
}
function handleBinaryData() {
Recorder.getAudioData(function(data) {
if (self.dataType == 'raw') {
return self.ondataavailable({
data: data,
dataType: self.dataType
});
};
include(options.encoderPath, function() {
initEncoder();
var datauri = WavEncoder.encode(data);
if (self.dataType == 'datauri') {
return self.ondataavailable({
data: datauri,
dataType: self.dataType
});
};
var audioBlob = new Blob([datauri], {
type: self.mimeType
});
if (self.dataType == 'blob') {
return self.ondataavailable({
data: audioBlob,
dataType: self.dataType
});
};
});
});
}
function upload(params) {
if (params == null)
params = self.uploadParams;
params.success = function(msg) {
self.ondataavailable({
data: msg,
dataType: 'url'
});
};
params.error = function(msg) {
self.onerror({
msg: msg
});
}
Recorder.upload(params);
}
// get script folder
function getBaseUrl() {
var scripts = document.head.getElementsByTagName("script");
var loc = scripts[scripts.length - 1].src;
return loc.substring(0, loc.lastIndexOf('/')) + '/';
}
// extending user options
function extend(o1, o2) {
var obj = {};
for (var i in o1) {
if (o2[i] != null) {
if (typeof o2[i] == "object") {
obj[i] = extend(o2[i], {});
} else {
obj[i] = o2[i];
}
} else {
if (typeof o2[i] == "object") {
obj[i] = extend(o1[i], {});
} else {
obj[i] = o1[i];
}
}
}
return obj;
}
function include(src, callback) {
var scripts = document.getElementsByTagName('script'),
found = false;
for (var i = 0, len = scripts.length; i < len; i++) {
if (scripts[i].getAttribute('src') == src) {
found = true;
}
}
if (found) {
if (typeof callback == 'function') {
callback();
}
} else {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = src;
if (typeof callback == 'function') {
js.onload = callback;
}
document.body.appendChild(js);
}
}
this.ondataavailable = options.ondataavailable;
this.onstop = options.onstop;
this.onstart = options.onstart;
this.onFlashSecurity = options.onFlashSecurity;
this.onerror = options.onerror;
this.onready = options.onready;
this.state = 'inactive';
this.mimeType = 'audio/wav';
this.uploadParams = options.uploadParams;
this.dataType = options.dataType;
this.start = start;
this.upload = upload;
this.stop = stop;
this.baseUrl = baseUrl;
}
================================================
FILE: MediaStreamRecorder/AudioStreamRecorder/FlashAudioRecorder.md
================================================
# FlashAudioRecorder.js usage
This module based on recorder.js library - https://github.com/jwagener/recorder.js
It support uploading file after record or getting them as Blob type ro
## 1. Include this module
```
```
## 2. Basic usage - through serverside
Initialize
```
var flashRecorder = new FlashAudioRecorder({
uploadParams:{
url: "http://url",
audioParam: "qqfile", // same as in recorder.js lib
params: {}
}
});
```
Start capture audio:
```
flashRecorder.start();
```
Stop capture audio
```
flashRecorder.stop();
```
Get uploaded file url (you must write your own serverside script to handle upload.)
```
flashRecorder.ondataavailable = function(e) {
console.log(e.msg); // server answer
}
```
## 3. Attributes
### dataType
Which type of data should be returned this param used when ondataavailable event appended to instance
You can pass value in object instance or directly pass to constructor
Example 1:
```
var flashRecorder = new FlashAudioRecorder({
dataType:'dataUri'
});
```
Example 2:
```
var flashRecorder = new FlashAudioRecorder();
flashRecorder.dataType = 'blob';
```
Values:
#### false
module do nothing after record ends. You can call upload method to upload record manually
#### 'url' - Default
when record ends, module upload this data immediately
#### 'blob'
call ondataavailable event with blob, that contains all recorded data. Note: this case gives a js memory leaks
With 1m record you can get about 300Mb of memory per your process. Use this metho only on short recordings (< 45 sec)
and short-living applications.
If you want upload your data immediately after stop recording, its better to use 'url' dataType
Example
```javascript
var flashRecorder = new FlashAudioRecorder({
dataType:'blob'
});
flashRecorder.start();
flashRecorder.stop();
flashRecorder.ondataavailable = function(e) {
var formData = new FormData();
formData.append('qqFile', e.data);
xhr.send(formData);
}
```
#### 'raw'
get recorded array. You can easily edit your record. Same as 'blob' dataType Limitations
#### 'dataUri'
with that type you can easily listen your pre-recorded data or save it to Computer using Javascript File API
Same as 'blob' dataType Limitations
Example
```javascript
var flashRecorder = new FlashAudioRecorder({
dataType:'dataUri'
});
flashRecorder.start();
flashRecorder.stop();
flashRecorder.ondataavailable = function(e) {
var audio = new Audio(e.data);
audio.play();
}
```
### baseUrl
path to FlashAudioRecorder.js. Readonly
## 4. Constructor methods
### swfObjectPath
path to recorder.swf
default: baseUrl+'lib/recorder.js/recorder.swf'
### jsLibPath
path to recorder.js
default: baseUrl+'lib/recorder.js/recorder.js'
### encoderPath
path to [WavEncoder.js](https://github.com/fritzo/wavencoderjs)
THis lib used in 'blob' and 'dataUri' dataTypes
default: encoderPath: baseUrl+'lib/wavencoder/wavencoder.js'
### uploadParams
params that will be passed to [Recorder.upload function](https://github.com/jwagener/recorder.js)
except success and error events (see onerror and ondataavailiable events)
Example
```
new FlashAudioRecorder({
uploadParams:{
method: "POST" // (not implemented) (optional, defaults to POST) HTTP Method can be either POST or PUT
url: "http://api.soundcloud.com/tracks", // URL to upload to (needs to have a suitable crossdomain.xml for Adobe Flash)
audioParam: "track[asset_data]", // Name for the audio data parameter
params: { // Additional parameters (needs to be a flat object)
"track[title]": "some track",
"oauth_token": "VALID_TOKEN"
}
}
})
```
## 5. Methods
### start
start capture audiostream
### stop
stop capture audiostream
### upload
upload pre-recorded data
```
var flashRecorder = new FlashAudioRecorder({
dataType:false // manual upload
});
flashRecorder.start();
flashRecorder.stop();
flashRecorder.upload({
method: "POST" // (not implemented) (optional, defaults to POST) HTTP Method can be either POST or PUT
url: "http://api.soundcloud.com/tracks", // URL to upload to (needs to have a suitable crossdomain.xml for Adobe Flash)
audioParam: "track[asset_data]", // Name for the audio data parameter
params: { // Additional parameters (needs to be a flat object)
"track[title]": "some track",
"oauth_token": "VALID_TOKEN"
}
});
```
## 6. Events
This module supports all events that you can see in [W3C API](https://dvcs.w3.org/hg/dap/raw-file/tip/media-stream-capture/MediaRecorder.html)
You can pass any event function in object instance or directly pass it to constructor params
```
var flashRecorder = new FlashAudioRecorder({
onstart: function() {
}
});
flashRecorder.onstart = function(e) {
console.log('start');
}
flashRecorder.onstop = function(e) {
console.log('stop');
}
flashRecorder.ondataavailable = function(e) {
console.log('Data availiable')
}
// triggering when upload fails
flashRecorder.onerror = function(e) {
console.log('error');
}
```
Also you can bind this events:
```
// taken from recorder.js onFlashSecurity event
// (optional) callback when the flash swf needs to be visible
// this allows you to hide/show the flashContainer element on demand.
flashRecorder.onFlashSecurity = function(e) {
}
// triggers when flash movie loaded into DOM
flashRecorder.onready = function(e) {
}
```
=
##### License
[MediaStreamRecorder.js](https://github.com/streamproc/MediaStreamRecorder) library is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) 2013 [Muaz Khan](https://github.com/muaz-khan) and [neizerth](https://github.com/neizerth).
================================================
FILE: MediaStreamRecorder/AudioStreamRecorder/MediaRecorderWrapper.js
================================================
// ==================
// MediaRecorder.js
/**
* Implementation of https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
* The MediaRecorder accepts a mediaStream as input source passed from UA. When recorder starts,
* a MediaEncoder will be created and accept the mediaStream as input source.
* Encoder will get the raw data by track data changes, encode it by selected MIME Type, then store the encoded in EncodedBufferCache object.
* The encoded data will be extracted on every timeslice passed from Start function call or by RequestData function.
* Thread model:
* When the recorder starts, it creates a "Media Encoder" thread to read data from MediaEncoder object and store buffer in EncodedBufferCache object.
* Also extract the encoded data and create blobs on every timeslice passed from start function or RequestData function called by UA.
*/
function MediaRecorderWrapper(mediaStream) {
var self = this;
/**
* This method records MediaStream.
* @method
* @memberof MediaStreamRecorder
* @example
* recorder.start(5000);
*/
this.start = function(timeSlice, __disableLogs) {
this.timeSlice = timeSlice || 5000;
if (!self.mimeType) {
self.mimeType = 'video/webm';
}
if (self.mimeType.indexOf('audio') !== -1) {
if (mediaStream.getVideoTracks().length && mediaStream.getAudioTracks().length) {
var stream;
if (!!navigator.mozGetUserMedia) {
stream = new MediaStream();
stream.addTrack(mediaStream.getAudioTracks()[0]);
} else {
// webkitMediaStream
stream = new MediaStream(mediaStream.getAudioTracks());
}
mediaStream = stream;
}
}
if (self.mimeType.indexOf('audio') !== -1) {
self.mimeType = IsChrome ? 'audio/webm' : 'audio/ogg';
}
self.dontFireOnDataAvailableEvent = false;
var recorderHints = {
mimeType: self.mimeType
};
if (!self.disableLogs && !__disableLogs) {
console.log('Passing following params over MediaRecorder API.', recorderHints);
}
if (mediaRecorder) {
// mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page.
mediaRecorder = null;
}
if (IsChrome && !isMediaRecorderCompatible()) {
// to support video-only recording on stable
recorderHints = 'video/vp8';
}
// http://dxr.mozilla.org/mozilla-central/source/content/media/MediaRecorder.cpp
// https://wiki.mozilla.org/Gecko:MediaRecorder
// https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
// starting a recording session; which will initiate "Reading Thread"
// "Reading Thread" are used to prevent main-thread blocking scenarios
try {
mediaRecorder = new MediaRecorder(mediaStream, recorderHints);
} catch (e) {
// if someone passed NON_supported mimeType
// or if Firefox on Android
mediaRecorder = new MediaRecorder(mediaStream);
}
if ('canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(self.mimeType) === false) {
if (!self.disableLogs) {
console.warn('MediaRecorder API seems unable to record mimeType:', self.mimeType);
}
}
// i.e. stop recording when
Open same URL on a new window or tab.'; info.style.display = 'block'; } }; websocket.push = websocket.send; websocket.send = function(data) { if (websocket.readyState != 1) { console.warn('websocket connection is not opened yet.'); return setTimeout(function() { websocket.send(data); }, 1000); } websocket.push(JSON.stringify({ data: data, channel: channel })); }; var progressHelper = {}; var outputPanel = document.querySelector('.output-panel'); function previewFile(file) { try { file.url = URL.createObjectURL(fileSelector.lastSelectedFile || file); } catch (e) { return; } var fname = ''; if (file.extra && file.extra.webkitRelativePath) { fname = file.extra.webkitRelativePath; } else { fname = file.name; } var html = 'Download ' + fname + ' on your Disk!'; html += ''; if (file.name.match(/\.jpg|\.png|\.jpeg|\.gif/gi)) { html += '
'; } progressHelper[file.uuid].div.innerHTML = html; fileSelector.lastSelectedFile = false; } var FileHelper = { onBegin: function(file) { var div = document.createElement('div'); var fName = ''; if (file.extra && file.extra.webkitRelativePath) { fName = file.extra.webkitRelativePath; } else { fName = file.name; } var html = '
';
html += '';
html += '';
html += '
';
div.innerHTML = html;
outputPanel.insertBefore(div, outputPanel.firstChild);
progressHelper[file.uuid] = {
div: div,
file: file
};
btnSelectFile.disabled = true;
btnSelectDirectory.disabled = true;
btnSelectMultiple.disabled = true;
if (fileSelector.lastSelectedFile) {
if (filesRemaining.files) {
if (filesRemaining.directory) {
btnSelectDirectory.innerHTML = 'File Sending In-Progress...';
} else {
btnSelectMultiple.innerHTML = 'File Sending In-Progress...';
}
} else {
btnSelectFile.innerHTML = 'File Sending In-Progress...';
}
} else {
if (filesRemaining.files) {
if (filesRemaining.directory) {
btnSelectDirectory.innerHTML = 'File Receiving In-Progress...';
} else {
btnSelectMultiple.innerHTML = 'File Receiving In-Progress...';
}
} else {
btnSelectFile.innerHTML = 'File Receiving In-Progress...';
}
}
resetTimeCalculator();
timeCalculator(div.querySelector('progress'));
progressHelper.lastFileUUID = file.uuid;
div.querySelector('.btn-close').onclick = function() {
peerConnection.stopCallback = function() {
div.parentNode.removeChild(div);
peerConnection.send('stopped:::' + file.uuid);
isStoppedTimer = true;
};
};
var paused = false;
div.querySelector('.btn-pause').onclick = function() {
var btn = div.querySelector('.btn-pause');
if(paused) {
paused = false;
isPausedTimer = false;
btn.style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/pause-icon.png)';
if(peerConnection.resumeCallback) {
peerConnection.resumeCallback();
}
peerConnection.paused = false;
peerConnection.send('resumed:::' + file.uuid);
return;
}
paused = true;
isPausedTimer = true;
btn.style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/resume-icon.png)';
peerConnection.resumeCallback = null;
peerConnection.paused = true;
peerConnection.send('paused:::' + file.uuid);
};
},
onEnd: function(file) {
previewFile(file);
btnSelectFile.innerHTML = 'Single';
btnSelectDirectory.innerHTML = 'Directory';
btnSelectMultiple.innerHTML = 'Multiple';
if (peerConnection.isOpened) {
btnSelectFile.disabled = false;
btnSelectDirectory.disabled = false;
btnSelectMultiple.disabled = false;
}
progressHelper.lastFileUUID = null;
if (filesRemaining.files) {
filesRemaining.idx++;
sendEntireDirectory();
}
},
onProgress: function(chunk) {
var helper = progressHelper[chunk.uuid];
if(!helper) return;
var div = helper.div;
var file = helper.file;
var progress = div.querySelector('progress');
var percentComplete = div.querySelector('.percent-complete');
var itemsRemaining = div.querySelector('.items-remaining');
var sizeRemaining = div.querySelector('.size-remaining');
var timeRemaining = div.querySelector('.time-remaining');
if(!progress) return;
progress.value = chunk.currentPosition || chunk.maxChunks || progress.max;
if (progress.position > 0) {
var position = +progress.position.toFixed(2).split('.')[1] || 100;
percentComplete.innerHTML = position + '% complete';
}
if (chunk.currentPosition + 2 != chunk.maxChunks) {
progressHelper[chunk.uuid].lastChunk = chunk;
progressHelper.callback = function(tRemaining) {
var lastChunk = progressHelper[chunk.uuid].lastChunk;
var singleChunkSize = chunk.size / lastChunk.maxChunks;
var endedAt = (new Date).getTime();
var timeElapsed = endedAt - (progressHelper.startedAt || (new Date).getTime());
progressHelper.latencies.push(timeElapsed);
var avg = calculateAverage(progressHelper.latencies);
// html += '1% complete
';
html += '';
html += '';
html += '';
html += '';
html += 'Latency in millseconds: ' + timeElapsed + ' (Average): ' + avg + ''; var remainingFileSize = singleChunkSize * (lastChunk.maxChunks - lastChunk.currentPosition); progressHelper.startedAt = (new Date).getTime(); itemsRemaining.innerHTML = (lastChunk.maxChunks - lastChunk.currentPosition); sizeRemaining.innerHTML = bytesToSize(remainingFileSize); timeRemaining.innerHTML = tRemaining; }; } else { btnSelectFile.innerHTML = 'Single'; btnSelectDirectory.innerHTML = 'Directory'; btnSelectMultiple.innerHTML = 'Multiple'; if (peerConnection.isOpened) { btnSelectFile.disabled = false; btnSelectDirectory.disabled = false; btnSelectMultiple.disabled = false; } } } }; // RTCPeerConection // ---------------- var peerConnection = new PeerConnection(websocket); peerConnection.onuserfound = function(userid) { setupOffer.innerHTML = 'Detecting other users...'; setupOffer.disabled = true; peerConnection.sendParticipationRequest(userid); }; peerConnection.onopen = function() { peerConnection.isOpened = true; innerHTML = 'PeerConnection is established.'; setupOffer.innerHTML = innerHTML; setupOffer.disabled = true; btnSelectFile.disabled = false; btnSelectFile.innerHTML = 'Single'; btnSelectDirectory.disabled = false; btnSelectDirectory.innerHTML = 'Directory'; btnSelectMultiple.disabled = false; btnSelectMultiple.innerHTML = 'Multiple'; }; peerConnection.onclose = function() { onCloseOrOnError('PeerConnection is closed.'); resetButtons(); peerConnection.isOpened = false; var helper = progressHelper[progressHelper.lastFileUUID]; if (helper && helper.div && helper.div.parentNode) { isStoppedTimer = true; helper.div.parentNode.removeChild(helper.div); } }; function resetButtons() { btnSelectFile.innerHTML = 'Single'; btnSelectFile.disabled = true; btnSelectDirectory.innerHTML = 'Directory'; btnSelectDirectory.disabled = true; btnSelectMultiple.innerHTML = 'Multiple'; btnSelectMultiple.disabled = true; setupOffer.disabled = false; setupOffer.innerHTML = 'Setup WebRTC Connection'; } peerConnection.onerror = function() { onCloseOrOnError('Something went wrong.'); resetButtons(); }; // getNextChunkCallback gets next available buffer // you need to send that buffer using WebRTC data channels function getNextChunkCallback(nextChunk, isLastChunk) { if (isLastChunk) { // alert('File Successfully sent.'); } // sending using WebRTC data channels peerConnection.send(nextChunk); }; peerConnection.ondata = function(chunk) { if(typeof chunk === 'string' && chunk.indexOf('stopped:::') !== -1) { var div = document.getElementById(chunk.split('stopped:::')[1]); if(div && div.parentNode) { div.parentNode.removeChild(div); } isStoppedTimer = true; return; } if(typeof chunk === 'string' && chunk.indexOf('paused:::') !== -1) { var div = document.getElementById(chunk.split('paused:::')[1]); if(div && div.querySelector('.btn-pause')) { div.querySelector('.btn-pause').style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/resume-icon.png)'; } isPausedTimer = true; return; } if(typeof chunk === 'string' && chunk.indexOf('resumed:::') !== -1) { var div = document.getElementById(chunk.split('resumed:::')[1]); if(div && div.querySelector('.btn-pause')) { div.querySelector('.btn-pause').style.backgroundImage = 'url(https://cdn.webrtc-experiment.com/FileBufferReader/icons/pause-icon.png)'; } isPausedTimer = false; return; } if (chunk instanceof ArrayBuffer || chunk instanceof DataView) { // array buffers are passed using WebRTC data channels // need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) { peerConnection.ondata(object); }); return; } // if target user requested next chunk if (chunk.readyForNextChunk) { if(peerConnection.paused) { peerConnection.resumeCallback = function() { fileBufferReader.getNextChunk(chunk, getNextChunkCallback); }; return; } if(peerConnection.stopCallback) { peerConnection.stopCallback(); return; } fileBufferReader.getNextChunk(chunk /*aka metadata*/ , getNextChunkCallback); return; } // if any of the chunks missed if (chunk.chunkMissing) { fileBufferReader.chunkMissing(chunk); return; } // if chunk is received fileBufferReader.addChunk(chunk, function(promptNextChunk) { // request next chunk if(peerConnection.paused) { peerConnection.resumeCallback = function() { peerConnection.send(promptNextChunk); }; return; } if(peerConnection.stopCallback) { peerConnection.stopCallback(); return; } peerConnection.send(promptNextChunk); }); }; var progressIterations = 0; var ONE_SECOND = 1000; function resetTimeCalculator() { progressIterations = 0; isStoppedTimer = false; progressHelper.callback = function() {}; progressHelper.latencies = []; } function calculateAverage(arr) { var sum = 0; for (var i = 0; i < arr.length; i++) { sum += parseInt(arr[i], 10); //don't forget to add the base } var avg = sum / arr.length; return avg.toFixed(1); } var isStoppedTimer = false; var isPausedTimer = false; // https://github.com/23/resumable.js/issues/168#issuecomment-65297110 function timeCalculator(progress, selfInvoker) { if (isStoppedTimer) return; var step = 1; var remainingProgress = 1.0 - progress.position; var estimatedCompletionTime = Math.round((remainingProgress / progress.position) * progressIterations); var estimatedHours, estimatedMinutes, estimatedSeconds, displayHours, displayMinutes, displaySeconds; progressIterations += step; if (progress.position < 1.0) { if (isFinite(estimatedCompletionTime)) { estimatedHours = Math.floor(estimatedCompletionTime / 3600); displayHours = estimatedHours > 9 ? estimatedHours : '0' + estimatedHours; estimatedMinutes = Math.floor((estimatedCompletionTime / 60) % 60); displayMinutes = estimatedMinutes > 9 ? estimatedMinutes : '0' + estimatedMinutes; estimatedSeconds = estimatedCompletionTime % 60; displaySeconds = estimatedSeconds > 9 ? estimatedSeconds : '0' + estimatedSeconds; } var output = ''; if (displayHours > 0) { output += displayHours + ' hours '; } if (displayMinutes > 0) { output += displayMinutes + ' minutes '; } if (displaySeconds > 0) { output += displaySeconds + ' seconds '; } if (output.length && !isPausedTimer) { progressHelper.callback(output); } } setTimeout(function() { timeCalculator(progress, true); }, step * ONE_SECOND); } // ------------------------- // using FileBufferReader.js var fileSelector = new FileSelector(); // you can force specific files e.g. // image/png, image/*, image/jpeg, video/webm, audio/ogg etc. fileSelector.accept = '*.*'; var fileBufferReader = new FileBufferReader(); fileBufferReader.chunkSize = 60 * 1000; // 60k fileBufferReader.onBegin = FileHelper.onBegin; fileBufferReader.onProgress = FileHelper.onProgress; fileBufferReader.onEnd = FileHelper.onEnd; function onFileSelected(file) { fileSelector.lastSelectedFile = file; if (filesRemaining.files) { if (filesRemaining.directory) { btnSelectDirectory.innerHTML = 'Please wait..'; btnSelectDirectory.disabled = true; } else { btnSelectMultiple.innerHTML = 'Please wait..'; btnSelectMultiple.disabled = true; } } else { btnSelectFile.innerHTML = 'Please wait..';; btnSelectFile.disabled = true; } fileBufferReader.readAsArrayBuffer(file, function(metadata) { fileBufferReader.getNextChunk(metadata, getNextChunkCallback); }, { chunkSize: fileBufferReader.chunkSize, webkitRelativePath: file.webkitRelativePath || file.name }); setTimeout(function() { if (fileSelector.lastSelectedFile) return; btnSelectFile.innerHTML = 'Single'; btnSelectFile.disabled = false; btnSelectDirectory.innerHTML = 'Directory'; btnSelectDirectory.disabled = false; btnSelectMultiple.innerHTML = 'Multiple'; btnSelectMultiple.disabled = false; }, 5000); } var btnSelectFile = document.getElementById('select-file'); btnSelectFile.onclick = function() { btnSelectFile.disabled = true; fileSelector.selectSingleFile(function(file) { onFileSelected(file); }, onNoFileSelected); }; var btnSelectMultiple = document.getElementById('select-multiple'); btnSelectMultiple.onclick = function() { btnSelectMultiple.disabled = true; fileSelector.selectMultipleFiles(function(files) { filesRemaining = { files: files, idx: 0 }; sendEntireDirectory(); }, onNoFileSelected); }; var btnSelectDirectory = document.getElementById('select-directory'); btnSelectDirectory.onclick = function() { btnSelectDirectory.disabled = true; fileSelector.selectDirectory(function(files) { filesRemaining = { files: files, idx: 0, directory: true }; sendEntireDirectory(); }, onNoFileSelected); }; function onNoFileSelected() { peerConnection.onopen(); } var filesRemaining = 'none'; function sendEntireDirectory() { if (filesRemaining === 'none') return; if (!filesRemaining.files[filesRemaining.idx]) { filesRemaining = 'none'; return; } onFileSelected(filesRemaining.files[filesRemaining.idx]); } // drag-drop support function onDragOver() { mainContainer.style.border = '7px solid #98a90f'; mainContainer.style.background = '#ffff13'; mainContainer.style.borderRadisu = '16px'; } function onDragLeave() { mainContainer.style.border = '1px solid rgb(189, 189, 189)'; mainContainer.style.background = 'transparent'; mainContainer.style.borderRadisu = 0; } var mainContainer = document.getElementById('main-container'); document.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragLeave(); }, false); document.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); if (!peerConnection || !peerConnection.isOpened) return; onDragLeave(); if (!e.dataTransfer.files || !e.dataTransfer.files.length) { return; } var file = e.dataTransfer.files[0]; filesRemaining = { files: e.dataTransfer.files, idx: 0 }; if (!peerConnection || !peerConnection.isOpened) { alert('Pleas setup WebRTC connection before sharing this file.'); return; } onFileSelected(file); }, false); // -------------------------------------------------------- setupOffer.onclick = function(event) { if (event !== true) { peerConnection.startBroadcasting(); } setupOffer.innerHTML = 'Detecting other users in this room...'; setupOffer.disabled = true; setTimeout(function() { if (!peerConnection.isOpened) { var innerHTML = 'I am alone in this room.'; setupOffer.innerHTML = innerHTML; setTimeout(function() { setupOffer.onclick(true); }, 2000); } }, 5 * 1000); }; function onCloseOrOnError(_innerHTML) { innerHTML = _innerHTML; setupOffer.innerHTML = innerHTML; setupOffer.disabled = false; setupOffer.className = 'button'; setTimeout(function() { innerHTML = 'Setup WebRTC Connection'; setupOffer.innerHTML = innerHTML; setupOffer.disabled = false; }, 1000); btnSelectFile.disabled = true; btnSelectDirectory.disabled = true; btnSelectMultiple.disabled = true; } function millsecondsToSeconds(millis) { var seconds = ((millis % 60000) / 1000).toFixed(1); return seconds; } function bytesToSize(bytes) { var k = 1000; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) { return '0 Bytes'; } var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } function getToken() { if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) { var a = window.crypto.getRandomValues(new Uint32Array(3)), token = ''; for (var i = 0, l = a.length; i < l; i++) { token += a[i].toString(36); } return token; } else { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } } }, false); ================================================ FILE: FileBufferReader/demo/adapter-latest.js ================================================ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.adapter = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i
WebRTC File Sharing | FileBufferReader
'; } progressHelper[file.uuid].li.innerHTML = html; fileSelector.lastSelectedFile = false; } var FileHelper = { onBegin: function(file) { var li = document.createElement('li'); li.innerHTML = '
' + file.name + '
'; li.style['min-height'] = '350px'; outputPanel.insertBefore(li, outputPanel.firstChild); outputPanel.className = 'fit-screen'; outputPanel.style.height = innerHeight + 'px'; progressHelper[file.uuid] = { li: li, progress: li.querySelector('progress'), label: li.querySelector('label') }; progressHelper[file.uuid].progress.max = file.maxChunks; btnSelectFile.disabled = true; if (fileSelector.lastSelectedFile) { btnSelectFile.innerHTML = 'File Sending In-Progress...'; } else { btnSelectFile.innerHTML = 'File Receiving In-Progress...'; } resetTimeCalculator(); timeCalculator(progressHelper[file.uuid].progress); progressHelper.lastFileUUID = file.uuid; }, onEnd: function(file) { previewFile(file); btnSelectFile.innerHTML = 'Select or Drop a File'; progressHelper.lastFileUUID = null; outputPanel.className = ''; outputPanel.style.height = 'auto'; }, onProgress: function(chunk) { var helper = progressHelper[chunk.uuid]; helper.progress.value = chunk.currentPosition || chunk.maxChunks || helper.progress.max; if (helper.progress.position > 0 && helper.li.querySelector('.circular-progress-bar-percentage')) { var position = +helper.progress.position.toFixed(2).split('.')[1] || 100; helper.li.querySelector('.circular-progress-bar-percentage').innerHTML = position + '%'; helper.li.querySelector('.circular-progress-bar').className = 'circular-progress-bar c100 p' + position; } if (chunk.currentPosition + 2 != chunk.maxChunks && helper.li.querySelector('.file-name')) { progressHelper[chunk.uuid].lastChunk = chunk; progressHelper.callback = function(timeRemaining) { var lastChunk = progressHelper[chunk.uuid].lastChunk; var singleChunkSize = chunk.size / lastChunk.maxChunks; var html = 'File name: ' + lastChunk.name + ' (File size: ' + bytesToSize(chunk.size) + ')'; html += '
Pieces (total/remaining): ' + lastChunk.maxChunks + '/' + lastChunk.currentPosition; html += ' (Single piece size: ' + bytesToSize(singleChunkSize) + ')'; var endedAt = (new Date).getTime(); var timeElapsed = endedAt - (progressHelper.startedAt || (new Date).getTime()); progressHelper.latencies.push(timeElapsed); var avg = calculateAverage(progressHelper.latencies); html += '
Latency in millseconds: ' + timeElapsed + ' (Average): ' + avg + ''; var remainingFileSize = singleChunkSize * (lastChunk.maxChunks - lastChunk.currentPosition); html += '
Remaining (time): ' + timeRemaining + ' (Remaining file size): ' + bytesToSize(remainingFileSize); helper.li.querySelector('.file-name').innerHTML = html; progressHelper.startedAt = (new Date).getTime(); }; } else { btnSelectFile.innerHTML = 'Select or Drop a File'; } } }; // RTCPeerConection // ---------------- function resetButtons() { btnSelectFile.innerHTML = 'Select or Drop a File'; btnSelectFile.disabled = false; } // getNextChunkCallback gets next available buffer // you need to send that buffer using socket.io function getNextChunkCallback(nextChunk, isLastChunk) { if (isLastChunk) { // alert('File Successfully sent.'); } socket.emit('buffer-stream', nextChunk); }; socket.on('buffer-stream', onBufferStream); function onBufferStream(chunk) { if (chunk instanceof ArrayBuffer || chunk instanceof DataView) { // array buffers are passed using socket.io // need to convert data back into JavaScript objects fileBufferReader.convertToObject(chunk, function(object) { onBufferStream(object); }); return; } // if target user requested next chunk if (chunk.readyForNextChunk) { fileBufferReader.getNextChunk(chunk /*aka metadata*/ , getNextChunkCallback); return; } // if any of the chunks missed if (chunk.chunkMissing) { fileBufferReader.chunkMissing(chunk); return; } // if chunk is received fileBufferReader.addChunk(chunk, function(promptNextChunk) { socket.emit('buffer-stream', promptNextChunk); }); }; var progressIterations = 0; var ONE_SECOND = 1000; function resetTimeCalculator() { progressIterations = 0; isStoppedTimer = false; progressHelper.callback = function() {}; progressHelper.latencies = []; } function calculateAverage(arr) { var sum = 0; for (var i = 0; i < arr.length; i++) { sum += parseInt(arr[i], 10); //don't forget to add the base } var avg = sum / arr.length; return avg.toFixed(1); } var isStoppedTimer = false; // https://github.com/23/resumable.js/issues/168#issuecomment-65297110 function timeCalculator(progress, selfInvoker) { if (isStoppedTimer) return; var step = 1; var remainingProgress = 1.0 - progress.position; var estimatedCompletionTime = Math.round((remainingProgress / progress.position) * progressIterations); var estimatedHours, estimatedMinutes, estimatedSeconds, displayHours, displayMinutes, displaySeconds; progressIterations += step; if (progress.position < 1.0) { if (isFinite(estimatedCompletionTime)) { estimatedHours = Math.floor(estimatedCompletionTime / 3600); displayHours = estimatedHours > 9 ? estimatedHours : '0' + estimatedHours; estimatedMinutes = Math.floor((estimatedCompletionTime / 60) % 60); displayMinutes = estimatedMinutes > 9 ? estimatedMinutes : '0' + estimatedMinutes; estimatedSeconds = estimatedCompletionTime % 60; displaySeconds = estimatedSeconds > 9 ? estimatedSeconds : '0' + estimatedSeconds; } var output = ''; if (displayHours > 0) { output += displayHours + ' hours '; } if (displayMinutes > 0) { output += displayMinutes + ' minutes '; } if (displaySeconds > 0) { output += displaySeconds + ' seconds '; } if (output.length) { progressHelper.callback(output); } } setTimeout(function() { timeCalculator(progress, true); }, step * ONE_SECOND); } // ------------------------- // using FileBufferReader.js var fileSelector = new FileSelector(); // you can force specific files e.g. // image/png, image/*, image/jpeg, video/webm, audio/ogg etc. fileSelector.accept = '*.*'; var fileBufferReader = new FileBufferReader(); fileBufferReader.chunkSize = 100 * 1000; // 100k fileBufferReader.onBegin = FileHelper.onBegin; fileBufferReader.onProgress = FileHelper.onProgress; fileBufferReader.onEnd = FileHelper.onEnd; function onFileSelected(file) { fileSelector.lastSelectedFile = file; btnSelectFile.innerHTML = 'Please wait..';; btnSelectFile.disabled = true; fileBufferReader.readAsArrayBuffer(file, function(metadata) { fileBufferReader.getNextChunk(metadata, getNextChunkCallback); }, { chunkSize: fileBufferReader.chunkSize }); setTimeout(function() { if (fileSelector.lastSelectedFile) return; btnSelectFile.innerHTML = 'Select or Drop a File'; btnSelectFile.disabled = false; }, 5000); } var btnSelectFile = document.getElementById('select-file'); btnSelectFile.onclick = function() { btnSelectFile.disabled = true; fileSelector.selectSingleFile(function(file) { onFileSelected(file); }); }; // drag-drop support function onDragOver() { mainContainer.style.border = '7px solid #98a90f'; mainContainer.style.background = '#ffff13'; mainContainer.style.borderRadisu = '16px'; } function onDragLeave() { mainContainer.style.border = '1px solid rgb(189, 189, 189)'; mainContainer.style.background = 'transparent'; mainContainer.style.borderRadisu = 0; } var mainContainer = document.getElementById('main-container'); document.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragLeave(); }, false); document.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; onDragOver(); }, false); document.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); onDragLeave(); if (!e.dataTransfer.files || !e.dataTransfer.files.length) { return; } var file = e.dataTransfer.files[0]; onFileSelected(file); }, false); // -------------------------------------------------------- function millsecondsToSeconds(millis) { var seconds = ((millis % 60000) / 1000).toFixed(1); return seconds; } function bytesToSize(bytes) { var k = 1000; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes === 0) { return '0 Bytes'; } var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } function getToken() { if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) { var a = window.crypto.getRandomValues(new Uint32Array(3)), token = ''; for (var i = 0, l = a.length; i < l; i++) { token += a[i].toString(36); } return token; } else { return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, ''); } } }, false); ================================================ FILE: FileBufferReader/fbr-client/index.html ================================================
FileBufferReader over Socket.io
HOME © Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?
Watch a YouTube video to understand how it works.
npm install fbr-client
FileBufferReader Demo
Open same URL on two or more tabs.
FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
Unexpected error:
' + e.stack || e.message || JSON.stringify(e)); response.end(); } } var app = server.createServer(serverHandler); function cmd_exec(cmd, args, cb_stdout, cb_end) { var spawn = require('child_process').spawn, child = spawn(cmd, args), me = this; me.exit = 0; me.stdout = ""; child.stdout.on('data', function(data) { cb_stdout(me, data) }); child.stdout.on('end', function() { cb_end(me) }); } function log_console() { console.log(foo.stdout); try { var pidToBeKilled = foo.stdout.split('\nnode ')[1].split(' ')[0]; console.log('------------------------------'); console.log('Please execute below command:'); console.log('\x1b[31m%s\x1b[0m ', 'kill ' + pidToBeKilled); console.log('Then try to run "server.js" again.'); console.log('------------------------------'); } catch (e) {} } function runServer() { app.on('error', function(e) { if (e.code == 'EADDRINUSE') { if (e.address === '0.0.0.0') { e.address = 'localhost'; } var socketURL = 'http://' + e.address + ':' + e.port + '/'; console.log('------------------------------'); console.log('\x1b[31m%s\x1b[0m ', 'Unable to listen on port: ' + e.port); console.log('\x1b[31m%s\x1b[0m ', socketURL + ' is already in use. Please kill below processes using "kill PID".'); console.log('------------------------------'); foo = new cmd_exec('lsof', ['-n', '-i4TCP:9001'], function(me, data) { me.stdout += data.toString(); }, function(me) { me.exit = 1; } ); setTimeout(log_console, 250); } }); app = app.listen(port, process.env.IP || '0.0.0.0', function(error) { var addr = app.address(); if (addr.address === '0.0.0.0') { addr.address = 'localhost'; } var domainURL = 'http://' + addr.address + ':' + addr.port + '/'; console.log('------------------------------'); console.log('socket.io is listening at:'); console.log('\x1b[31m%s\x1b[0m ', '\t' + domainURL); }); var io = require('socket.io')(app); io.on('connection', function(socket){ socket.on('buffer-stream', function(buffer) { socket.broadcast.emit('buffer-stream', buffer); }); }); } if (autoRebootServerOnFailure) { // auto restart app on failure var cluster = require('cluster'); if (cluster.isMaster) { cluster.fork(); cluster.on('exit', function(worker, code, signal) { cluster.fork(); }); } if (cluster.isWorker) { runServer(); } } else { runServer(); } ================================================ FILE: FileBufferReader/index.html ================================================
Connecting