Fixed captureStream video rendering issue. Added "designer.renderStream"

Releasd v1.3.0
muaz-khan · Dec 24, 2018 · dbe3563 · dbe3563
1 parent 043e0f4
commit dbe3563
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 18 deletions.
diff --git a/README.md b/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/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.2.8",
+  "version": "1.3.0",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",

diff --git a/canvas-designer-widget.js b/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/dev/decorator.js b/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/dev/share-drawings.js b/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/dev/webrtc-handler.js b/dev/webrtc-handler.js
@@ -1,7 +1,6 @@
 var webrtcHandler = {
     createOffer: function(callback) {
-        var captureStream = document.getElementById('main-canvas').captureStream(15);
-
+        var captureStream = document.getElementById('main-canvas').captureStream();
         var peer = this.getPeer();
 
         captureStream.getTracks().forEach(function(track) {
@@ -26,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();

diff --git a/index.html b/index.html
@@ -611,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() {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-designer",
   "preferGlobal": false,
-  "version": "1.2.8",
+  "version": "1.3.0",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",

diff --git a/widget.js b/widget.js
@@ -1,4 +1,4 @@
-// Last time updated: 2018-12-24 7:44:44 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,8 +4045,7 @@
 
     var webrtcHandler = {
         createOffer: function(callback) {
-            var captureStream = document.getElementById('main-canvas').captureStream(15);
-
+            var captureStream = document.getElementById('main-canvas').captureStream();
             var peer = this.getPeer();
 
             captureStream.getTracks().forEach(function(track) {
@@ -4049,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();

diff --git a/widget.min.js b/widget.min.js