ionic/cordova apps, getMediaElement, getStats, MultiStreamsMixer

DetectRTC, RecordRTC, RTCMultiConnection, RTCMultiConnection-Server, Canvas-Designer, Chrome-Extensions, customGetUserMediaBar, etc. updated.
chnl · Jan 12, 2019 · ad94e83 · ad94e83
1 parent 5e20ee0
commit ad94e83
Show file tree

Hide file tree

Showing 242 changed files with 24,000 additions and 3,073 deletions.
diff --git a/Canvas-Designer/README.md b/Canvas-Designer/README.md
@@ -244,6 +244,14 @@ Remove and clear all drawings from the canvas:
 designer.clearCanvas();
 ```
 
+## `renderStream`
+
+Call this method internally to fix video rendering issues.
+
+```javascript
+designer.renderStream();
+```
+
 ## `addSyncListener`
 
 This callback is invoked as soon as something new is drawn. An array-of-points is passed over this function. That array MUST be shared with remote users for collaboration.

diff --git a/Canvas-Designer/bower.json b/Canvas-Designer/bower.json
@@ -1,11 +1,11 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.2.7",
+  "version": "1.3.0",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",
-    "url": "http://www.muazkhan.com/"
+    "url": "https://muazkhan.com/"
   },
   "description": "Collaborative, extendable, JavaScript Canvas2D drawing tool, supporting dozens of builtin tools.",
   "main": "server.js",

diff --git a/Canvas-Designer/canvas-designer-widget.js b/Canvas-Designer/canvas-designer-widget.js
@@ -213,6 +213,14 @@ function CanvasDesigner() {
         });
     };
 
+    designer.renderStream = function() {
+        if (!designer.iframe) return;
+
+        designer.postMessage({
+            renderStream: true
+        });
+    };
+
     designer.widgetHtmlURL = 'widget.html';
     designer.widgetJsURL = 'widget.min.js';
 }
diff --git a/Canvas-Designer/dev/decorator.js b/Canvas-Designer/dev/decorator.js
@@ -51,12 +51,11 @@ function setSelection(element, prop) {
 /* Default: setting default selected shape!! */
 is.set(window.selectedIcon);
 
-window.addEventListener('load', function() {
+function setDefaultSelectedIcon() {
     var toolBox = document.getElementById('tool-box');
     var canvasElements = toolBox.getElementsByTagName('canvas');
     var shape = window.selectedIcon.toLowerCase();
 
-
     var firstMatch;
     for (var i = 0; i < canvasElements.length; i++) {
         if (!firstMatch && (canvasElements[i].id || '').indexOf(shape) !== -1) {
@@ -69,6 +68,10 @@ window.addEventListener('load', function() {
     }
 
     setSelection(firstMatch, window.selectedIcon);
+}
+
+window.addEventListener('load', function() {
+    setDefaultSelectedIcon();
 }, false);
 
 (function() {
@@ -860,3 +863,17 @@ function hideContainers() {
         pencilContainer.style.display =
         lineWidthContainer.style.display = 'none';
 }
+
+function setTemporaryLine() {
+    var arr = ["line", [139, 261, 170, 219],
+        [1, "rgba(0,0,0,0)", "rgba(0,0,0,0)", 1, "source-over", "round", "round", "15px \"Arial\""]
+    ];
+    points.push(arr);
+    drawHelper.redraw();
+
+    setTimeout(function() {
+        setSelection(document.getElementById('line'), 'Line');
+    }, 1000);
+
+    setTimeout(setDefaultSelectedIcon, 2000);
+}
diff --git a/Canvas-Designer/dev/share-drawings.js b/Canvas-Designer/dev/share-drawings.js
@@ -20,6 +20,11 @@ window.addEventListener('message', function(event) {
         return;
     }
 
+    if (event.data.renderStream) {
+        setTemporaryLine();
+        return;
+    }
+
     if (event.data.sdp) {
         webrtcHandler.setRemoteDescription(event.data);
         return;

diff --git a/Canvas-Designer/dev/webrtc-handler.js b/Canvas-Designer/dev/webrtc-handler.js
@@ -1,13 +1,11 @@
 var webrtcHandler = {
     createOffer: function(callback) {
-        var captureStream = document.getElementById('main-canvas').captureStream(15);
-
+        var captureStream = document.getElementById('main-canvas').captureStream();
         var peer = this.getPeer();
-        if ('addStream' in peer) {
-            peer.addStream(captureStream);
-        } else {
-            peer.addTrack(captureStream.getVideoTracks()[0], captureStream);
-        }
+
+        captureStream.getTracks().forEach(function(track) {
+            peer.addTrack(track, captureStream);
+        });
 
         peer.onicecandidate = function(event) {
             if (!event || !!event.candidate) {
@@ -27,7 +25,11 @@ var webrtcHandler = {
         });
     },
     setRemoteDescription: function(sdp) {
-        this.peer.setRemoteDescription(new RTCSessionDescription(sdp));
+        this.peer.setRemoteDescription(new RTCSessionDescription(sdp)).then(function() {
+            if (typeof setTemporaryLine === 'function') {
+                setTemporaryLine();
+            }
+        });
     },
     createAnswer: function(sdp, callback) {
         var peer = this.getPeer();
@@ -50,22 +52,17 @@ var webrtcHandler = {
             });
         });
 
-        if ('onaddstream' in peer) {
-            peer.onaddstream = function(event) {
-                callback({
-                    stream: event.stream
-                });
-            };
-        } else {
-            peer.onaddtrack = function(event) {
-                callback({
-                    stream: event.streams[0]
-                });
-            };
-        }
+        peer.ontrack = function(event) {
+            callback({
+                stream: event.streams[0]
+            });
+        };
     },
     getPeer: function() {
         var WebRTC_Native_Peer = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
+        var RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription;
+        var RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate;
+
         var peer = new WebRTC_Native_Peer(null);
         this.peer = peer;
         return peer;

diff --git a/Canvas-Designer/index.html b/Canvas-Designer/index.html
@@ -179,8 +179,9 @@
 <div id="fade" class="black_overlay"></div>
 
 <div id="action-controls" style="width: 19%; padding: 1%;position: absolute;left:0;">
-    <video controls="" style="width: 105%;margin-left: -15px;margin-top: -23px; display: none;"></video>
+    <video controls autoplay playsinline style="width: 105%;margin-left: -15px;margin-top: -23px; display: none;"></video>
 
+    <div id="select-tools">
     <h2>Select Tools</h2>
     <input type="checkbox" id="pencil" checked>
     <label for="pencil">pencil</label><br>
@@ -206,7 +207,7 @@ <h2>Select Tools</h2>
     <input type="checkbox" id="arrow" checked>
     <label for="arrow">arrow</label><br>
 
-		<input type="checkbox" id="zoom">
+	<input type="checkbox" id="zoom">
     <label for="zoom">zoom</label><br>
 
     <input type="checkbox" id="dragSingle" checked>
@@ -241,6 +242,7 @@ <h2>Select Tools</h2>
 
     <input type="checkbox" id="code" checked>
     <label for="code">code</label><br><br>
+    </div>
 
     <hr>
     <div>
@@ -609,6 +611,12 @@ <h2><a href="https://rtcmulticonnection.herokuapp.com/demos/dashboard/">WebRTC D
     }
 
     numberOfConnectedUsers.innerHTML = connection.getAllParticipants().length;
+
+    if(connection.isInitiator) {
+        setTimeout(function() {
+            designer.renderStream();
+        }, 1000);
+    }
 };
 
 connection.onclose = connection.onerror = connection.onleave = function() {
@@ -645,8 +653,9 @@ <h2><a href="https://rtcmulticonnection.herokuapp.com/demos/dashboard/">WebRTC D
     if (connection.isInitiator && event.mediaElement) return;
 
     video.style.display = '';
-    video.src = URL.createObjectURL(event.stream);
-    video.play();
+    video.srcObject = event.stream;
+
+    document.getElementById('select-tools').style.display = 'none';
 };
 
 connection.onstreamended = function() {

diff --git a/Canvas-Designer/package.json b/Canvas-Designer/package.json
@@ -1,11 +1,11 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.2.7",
+  "version": "1.3.0",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",
-    "url": "http://www.muazkhan.com/"
+    "url": "https://muazkhan.com/"
   },
   "description": "Collaborative, extendable, JavaScript Canvas2D drawing tool, supporting dozens of builtin tools, as well as generates JavaScript code for 2D animations.",
   "main": "server.js",

diff --git a/Canvas-Designer/widget.js b/Canvas-Designer/widget.js
@@ -1,4 +1,4 @@
-// Last time updated: 2018-12-19 10:54:19 AM UTC
+// Last time updated: 2018-12-24 8:45:05 AM UTC
 
 // _______________
 // Canvas-Designer
@@ -2817,12 +2817,11 @@
     /* Default: setting default selected shape!! */
     is.set(window.selectedIcon);
 
-    window.addEventListener('load', function() {
+    function setDefaultSelectedIcon() {
         var toolBox = document.getElementById('tool-box');
         var canvasElements = toolBox.getElementsByTagName('canvas');
         var shape = window.selectedIcon.toLowerCase();
 
-
         var firstMatch;
         for (var i = 0; i < canvasElements.length; i++) {
             if (!firstMatch && (canvasElements[i].id || '').indexOf(shape) !== -1) {
@@ -2835,6 +2834,10 @@
         }
 
         setSelection(firstMatch, window.selectedIcon);
+    }
+
+    window.addEventListener('load', function() {
+        setDefaultSelectedIcon();
     }, false);
 
     (function() {
@@ -3627,6 +3630,20 @@
             lineWidthContainer.style.display = 'none';
     }
 
+    function setTemporaryLine() {
+        var arr = ["line", [139, 261, 170, 219],
+            [1, "rgba(0,0,0,0)", "rgba(0,0,0,0)", 1, "source-over", "round", "round", "15px \"Arial\""]
+        ];
+        points.push(arr);
+        drawHelper.redraw();
+
+        setTimeout(function() {
+            setSelection(document.getElementById('line'), 'Line');
+        }, 1000);
+
+        setTimeout(setDefaultSelectedIcon, 2000);
+    }
+
     var canvas = tempContext.canvas,
         isTouch = 'createTouch' in document;
 
@@ -3903,6 +3920,11 @@
             return;
         }
 
+        if (event.data.renderStream) {
+            setTemporaryLine();
+            return;
+        }
+
         if (event.data.sdp) {
             webrtcHandler.setRemoteDescription(event.data);
             return;
@@ -4023,14 +4045,12 @@
 
     var webrtcHandler = {
         createOffer: function(callback) {
-            var captureStream = document.getElementById('main-canvas').captureStream(15);
-
+            var captureStream = document.getElementById('main-canvas').captureStream();
             var peer = this.getPeer();
-            if ('addStream' in peer) {
-                peer.addStream(captureStream);
-            } else {
-                peer.addTrack(captureStream.getVideoTracks()[0], captureStream);
-            }
+
+            captureStream.getTracks().forEach(function(track) {
+                peer.addTrack(track, captureStream);
+            });
 
             peer.onicecandidate = function(event) {
                 if (!event || !!event.candidate) {
@@ -4050,7 +4070,11 @@
             });
         },
         setRemoteDescription: function(sdp) {
-            this.peer.setRemoteDescription(new RTCSessionDescription(sdp));
+            this.peer.setRemoteDescription(new RTCSessionDescription(sdp)).then(function() {
+                if (typeof setTemporaryLine === 'function') {
+                    setTemporaryLine();
+                }
+            });
         },
         createAnswer: function(sdp, callback) {
             var peer = this.getPeer();
@@ -4073,22 +4097,17 @@
                 });
             });
 
-            if ('onaddstream' in peer) {
-                peer.onaddstream = function(event) {
-                    callback({
-                        stream: event.stream
-                    });
-                };
-            } else {
-                peer.onaddtrack = function(event) {
-                    callback({
-                        stream: event.streams[0]
-                    });
-                };
-            }
+            peer.ontrack = function(event) {
+                callback({
+                    stream: event.streams[0]
+                });
+            };
         },
         getPeer: function() {
             var WebRTC_Native_Peer = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
+            var RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription;
+            var RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate;
+
             var peer = new WebRTC_Native_Peer(null);
             this.peer = peer;
             return peer;

diff --git a/Canvas-Designer/widget.min.js b/Canvas-Designer/widget.min.js
diff --git a/Chrome-Extensions/.gitignore b/Chrome-Extensions/.gitignore
@@ -8,3 +8,4 @@ bower_components
 
 .zip
 .tar
+*/*.zip