From 724ead7cbb589a772b8bb41abd22acff3f700a5d Mon Sep 17 00:00:00 2001
From: Muaz Khan <muazkh@gmail.com>
Date: Sun, 23 Sep 2018 23:02:01 +0500
Subject: [PATCH] Added new demo: "video-and-screen-sharing.html"

https://rtcmulticonnection.herokuapp.com/demos/video-and-screen-sharing.html
---
 demos/Scalable-Broadcast.html       |  91 ++-----
 demos/Video-Conferencing.html       |  11 +-
 demos/dashboard.html                |   5 +-
 demos/index.html                    |   8 +-
 demos/video-and-screen-sharing.html | 385 ++++++++++++++++++++++++++++
 5 files changed, 421 insertions(+), 79 deletions(-)
 create mode 100644 demos/video-and-screen-sharing.html
diff --git a/demos/Scalable-Broadcast.html b/demos/Scalable-Broadcast.html
index 348762ca..d600f7e0 100755
--- a/demos/Scalable-Broadcast.html
+++ b/demos/Scalable-Broadcast.html
@@ -1,4 +1,4 @@
-<!-- Demo version: 2017.08.08 -->
+<!-- Demo version: 2018.09.23 -->
 
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
@@ -18,18 +18,17 @@
       <li>
         <a href="/demos/">Home</a>
       </li>
-
       <li>
-        <a href="http://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
+        <a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
       </li>
       <li>
-        <a href="http://www.rtcmulticonnection.org/FAQ/">FAQ</a>
+        <a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
       </li>
       <li>
         <a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
       </li>
       <li>
-        <a href="https://github.com/muaz-khan/RTCMultiConnection#v3-demos">Demos</a>
+        <a href="https://rtcmulticonnection.herokuapp.com/demos/">Demos</a>
       </li>
       <li>
         <a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
@@ -48,17 +47,19 @@ <h1>
   </h1>
 
   <section class="make-center">
-      <div class="make-center">
-      <input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
-      <button id="open-or-join">Open or Join Broadcast</button>
+      <p style="margin: 0; padding: 0; padding-bottom: 20px;">
+          <div class="make-center">
+          <input type="text" id="broadcast-id" value="room-xyz" autocorrect=off autocapitalize=off size=20>
+          <button id="open-or-join">Open or Join Broadcast</button>
 
-      <div id="room-urls" style="text-align: center;display: none;background: #F1EDED;margin: 15px -10px;border: 1px solid rgb(189, 189, 189);border-left: 0;border-right: 0;"></div>
-      <div class="make-center" id="broadcast-viewers-counter"></div>
+          <div class="make-center" id="broadcast-viewers-counter"></div>
+      </p>
 
       <video id="video-preview" controls loop></video>
   </section>
 
 <script src="/dist/RTCMultiConnection.min.js"></script>
+<script src="/dev/adapter.js"></script>
 <script src="/socket.io/socket.io.js"></script>
 <!-- <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script> -->
 <script>
@@ -146,9 +147,7 @@ <h1>
         // "open" method here will capture media-stream
         // we can skip this function always; it is totally optional here.
         // we can use "connection.getUserMediaHandler" instead
-        connection.open(connection.userid, function() {
-            showRoomURL(connection.sessionid);
-        });
+        connection.open(connection.userid);
     });
 });
 
@@ -222,6 +221,9 @@ <h1>
             repeatedlyRecordStream(event.stream);
         }
     }
+
+    // to keep room-id in cache
+    localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
 };
 
 // ask node.js server to look for a broadcast
@@ -334,75 +336,18 @@ <h1>
 // ......................Handling broadcast-id................
 // ......................................................
 
-function showRoomURL(broadcastId) {
-    var roomHashURL = '#' + broadcastId;
-    var roomQueryStringURL = '?broadcastId=' + broadcastId;
-
-    var html = '<h2>Unique URL for your room:</h2><br>';
-
-    html += 'Hash URL: <a href="' + roomHashURL + '" target="_blank">' + roomHashURL + '</a>';
-    html += '<br>';
-    html += 'QueryString URL: <a href="' + roomQueryStringURL + '" target="_blank">' + roomQueryStringURL + '</a>';
-
-    var roomURLsDiv = document.getElementById('room-urls');
-    roomURLsDiv.innerHTML = html;
-
-    roomURLsDiv.style.display = 'block';
-}
-
-(function() {
-    var params = {},
-        r = /([^&=]+)=?([^&]*)/g;
-
-    function d(s) {
-        return decodeURIComponent(s.replace(/\+/g, ' '));
-    }
-    var match, search = window.location.search;
-    while (match = r.exec(search.substring(1)))
-        params[d(match[1])] = d(match[2]);
-    window.params = params;
-})();
-
 var broadcastId = '';
 if (localStorage.getItem(connection.socketMessageEvent)) {
     broadcastId = localStorage.getItem(connection.socketMessageEvent);
 } else {
     broadcastId = connection.token();
 }
-document.getElementById('broadcast-id').value = broadcastId;
-document.getElementById('broadcast-id').onkeyup = function() {
+var txtBroadcastId = document.getElementById('broadcast-id');
+txtBroadcastId.value = broadcastId;
+txtBroadcastId.onkeyup = txtBroadcastId.oninput = txtBroadcastId.onpaste = function() {
     localStorage.setItem(connection.socketMessageEvent, this.value);
 };
 
-var hashString = location.hash.replace('#', '');
-if (hashString.length && hashString.indexOf('comment-') == 0) {
-    hashString = '';
-}
-
-var broadcastId = params.broadcastId;
-if (!broadcastId && hashString.length) {
-    broadcastId = hashString;
-}
-
-if (broadcastId && broadcastId.length) {
-    document.getElementById('broadcast-id').value = broadcastId;
-    localStorage.setItem(connection.socketMessageEvent, broadcastId);
-
-    // auto-join-room
-    (function reCheckRoomPresence() {
-        connection.checkPresence(broadcastId, function(isRoomExists) {
-            if (isRoomExists) {
-                document.getElementById('open-or-join').onclick();
-                return;
-            }
-
-            setTimeout(reCheckRoomPresence, 5000);
-        });
-    })();
-
-    disableInputButtons();
-}
-
 // below section detects how many users are viewing your broadcast
 
 connection.onNumberOfBroadcastViewersUpdated = function(event) {
diff --git a/demos/Video-Conferencing.html b/demos/Video-Conferencing.html
index 5cb3fbee..28c43faf 100755
--- a/demos/Video-Conferencing.html
+++ b/demos/Video-Conferencing.html
@@ -1,4 +1,4 @@
-<!-- Demo version: 2018.05.21 -->
+<!-- Demo version: 2018.09.23 -->
 
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
@@ -161,6 +161,9 @@ <h1>
     }, 5000);
 
     mediaElement.id = event.streamid;
+
+    // to keep room-id in cache
+    localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
 };
 
 connection.onstreamended = function(event) {
@@ -238,8 +241,10 @@ <h1>
 } else {
     roomid = connection.token();
 }
-document.getElementById('room-id').value = roomid;
-document.getElementById('room-id').onkeyup = function() {
+
+var txtRoomId = document.getElementById('room-id');
+txtRoomId.value = roomid;
+txtRoomId.onkeyup = txtRoomId.oninput = txtRoomId.onpaste = function() {
     localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
 };
 
diff --git a/demos/dashboard.html b/demos/dashboard.html
index 3c8e473b..a8f922fb 100644
--- a/demos/dashboard.html
+++ b/demos/dashboard.html
@@ -216,11 +216,12 @@
     quadratic: false,
     bezier: true,
     marker: true,
-    zoom: true,
+    zoom: false,
     lineWidth: false,
     colorsPicker: false,
     extraOptions: false,
-    code: false
+    code: false,
+    undo: true
 });
 
 designer.appendTo(document.getElementById('widget-container'));
diff --git a/demos/index.html b/demos/index.html
index 65b5115b..252213c8 100755
--- a/demos/index.html
+++ b/demos/index.html
@@ -1,4 +1,4 @@
-<!-- Demo version: 2018.09.15 -->
+<!-- Demo version: 2018.09.22 -->
 
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
@@ -152,6 +152,12 @@ <h2>
                     <td class="td-style"><a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/Call-By-UserName.html" class="td-style2">Source</a></td>
                 </tr>
 
+                <tr class="tr-style" style="background: #e4f6ff;">
+                    <td class="td-style">Video + Screen Sharing</td>
+                    <td class="td-style"><a href="/demos/video-and-screen-sharing.html" class="td-style2">Demo</a></td>
+                    <td class="td-style"><a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/demos/video-and-screen-sharing.html" class="td-style2">Source</a></td>
+                </tr>                
+
                 <tr class="tr-style" style="background: #e4f6ff;">
                     <td class="td-style">MCU inside the browser!</td>
                     <td class="td-style"><a href="/demos/MCU.html" class="td-style2">Demo</a></td>
diff --git a/demos/video-and-screen-sharing.html b/demos/video-and-screen-sharing.html
new file mode 100644
index 00000000..2376fc42
--- /dev/null
+++ b/demos/video-and-screen-sharing.html
@@ -0,0 +1,385 @@
+<!-- Demo version: 2018.09.22 -->
+
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Video + Screen Sharing using RTCMultiConnection</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="shortcut icon" href="/demos/logo.png">
+  <link rel="stylesheet" href="/demos/stylesheet.css">
+  <script src="/demos/menu.js"></script>
+</head>
+<body>
+  <header>
+    <a class="logo" href="/demos/"><img src="/demos/logo.png" alt="RTCMultiConnection"></a>
+    <a href="/demos/" class="menu-explorer">Menu<img src="/demos/menu-icon.png" alt="Menu"></a>
+    <nav>
+      <li>
+        <a href="/demos/">Home</a>
+      </li>
+      <li>
+        <a href="https://www.rtcmulticonnection.org/docs/getting-started/">Getting Started</a>
+      </li>
+      <li>
+        <a href="https://www.rtcmulticonnection.org/FAQ/">FAQ</a>
+      </li>
+      <li>
+        <a href="https://www.youtube.com/playlist?list=PLPRQUXAnRydKdyun-vjKPMrySoow2N4tl">YouTube</a>
+      </li>
+      <li>
+        <a href="https://rtcmulticonnection.herokuapp.com/demos/">Demos</a>
+      </li>
+      <li>
+        <a href="https://github.com/muaz-khan/RTCMultiConnection/wiki">Wiki</a>
+      </li>
+      <li>
+        <a href="https://github.com/muaz-khan/RTCMultiConnection">Github</a>
+      </li>
+    </nav>
+  </header>
+
+  <h1>
+    Video + Screen Sharing using RTCMultiConnection
+    <p class="no-mobile">
+      Multi-user (many-to-many) video chat using mesh networking model.
+    </p>
+    <p>
+      Add and remove screen anytime and multiple times!
+    </p>
+  </h1>
+
+  <section class="make-center">
+    <p style="margin: 0; padding: 0; padding-bottom: 20px;">
+      <input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
+      <button id="open-room">Open Room</button>
+      <button id="join-room">Join Room</button>
+      <button id="share-screen" disabled>Share Your Screen</button>
+    </p>
+
+    <div id="videos-container" style="margin: 20px 0;"></div>
+  </section>
+
+<script src="/dist/RTCMultiConnection.min.js"></script>
+<script src="/dev/adapter.js"></script>
+<script src="/socket.io/socket.io.js"></script>
+
+<!-- custom layout for HTML5 audio/video elements -->
+<link rel="stylesheet" href="/dev/getHTMLMediaElement.css">
+<script src="/dev/getHTMLMediaElement.js"></script>
+
+<script src="/dev/getScreenId.js"></script>
+<script>
+// ......................................................
+// .......................UI Code........................
+// ......................................................
+document.getElementById('open-room').onclick = function() {
+    disableInputButtons();
+    
+    var roomid = document.getElementById('room-id').value;
+    beforeOpenOrJoin(roomid, function() {
+      connection.open(roomid, function() {
+          afterOpenOrJoin();
+      });
+    });
+};
+
+document.getElementById('join-room').onclick = function() {
+    disableInputButtons();
+    
+    var roomid = document.getElementById('room-id').value;
+    beforeOpenOrJoin(roomid, function() {
+      connection.join(roomid, function() {
+          // join callback
+          afterOpenOrJoin();
+      });
+    });
+};
+
+// ......................................................
+// ..................RTCMultiConnection Code.............
+// ......................................................
+
+var connection = new RTCMultiConnection();
+
+// by default, socket.io server is assumed to be deployed on your own URL
+connection.socketURL = '/';
+
+// comment-out below line if you do not have your own socket.io server
+// connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
+
+connection.socketMessageEvent = 'video-screen-demo';
+
+connection.session = {
+    audio: true,
+    video: true
+};
+
+connection.sdpConstraints.mandatory = {
+    OfferToReceiveAudio: true,
+    OfferToReceiveVideo: true
+};
+
+connection.videosContainer = document.getElementById('videos-container');
+connection.onstream = function(event) {
+    var existing = document.getElementById(event.streamid);
+    if(existing && existing.parentNode) {
+      existing.parentNode.removeChild(existing);
+    }
+
+    if(event.type === 'local') {
+      RMCMediaTrack.camera = event.stream.getVideoTracks()[0];
+      RMCMediaTrack.cameraStream = event.stream;
+    }
+
+    event.mediaElement.removeAttribute('src');
+    event.mediaElement.removeAttribute('srcObject');
+    event.mediaElement.muted = true;
+    event.mediaElement.volume = 0;
+
+    var video = document.createElement('video');
+
+    try {
+        video.setAttributeNode(document.createAttribute('autoplay'));
+        video.setAttributeNode(document.createAttribute('playsinline'));
+    } catch (e) {
+        video.setAttribute('autoplay', true);
+        video.setAttribute('playsinline', true);
+    }
+
+    if(event.type === 'local') {
+      video.volume = 0;
+      try {
+          video.setAttributeNode(document.createAttribute('muted'));
+      } catch (e) {
+          video.setAttribute('muted', true);
+      }
+    }
+    video.srcObject = event.stream;
+
+    var width = parseInt(connection.videosContainer.clientWidth / 3) - 20;
+    var mediaElement = getHTMLMediaElement(video, {
+        title: event.userid,
+        buttons: ['full-screen'],
+        width: width,
+        showOnMouseEnter: false
+    });
+
+    connection.videosContainer.appendChild(mediaElement);
+
+    setTimeout(function() {
+        mediaElement.media.play();
+    }, 5000);
+
+    mediaElement.id = event.streamid;
+
+    if(event.type === 'local') {
+      RMCMediaTrack.selfVideo = mediaElement.media;
+    }
+
+    // to keep room-id in cache
+    localStorage.setItem(connection.socketMessageEvent, connection.sessionid);
+};
+
+connection.onstreamended = function(event) {
+    var mediaElement = document.getElementById(event.streamid);
+    if (mediaElement) {
+        mediaElement.parentNode.removeChild(mediaElement);
+    }
+};
+
+connection.onMediaError = function(e) {
+    if (e.message === 'Concurrent mic process limit.') {
+        if (DetectRTC.audioInputDevices.length <= 1) {
+            alert('Please select external microphone. Check github issue number 483.');
+            return;
+        }
+
+        var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
+        connection.mediaConstraints.audio = {
+            deviceId: secondaryMic
+        };
+
+        connection.join(connection.sessionid);
+    }
+};
+
+// ..................................
+// ALL below scripts are redundant!!!
+// ..................................
+
+function disableInputButtons() {
+    document.getElementById('room-id').onkeyup();
+
+    document.getElementById('open-room').disabled = true;
+    document.getElementById('join-room').disabled = true;
+    document.getElementById('room-id').disabled = true;
+}
+
+// ......................................................
+// ......................Handling Room-ID................
+// ......................................................
+
+var roomid = '';
+if (localStorage.getItem(connection.socketMessageEvent)) {
+    roomid = localStorage.getItem(connection.socketMessageEvent);
+} else {
+    roomid = connection.token();
+}
+var txtRoomId = document.getElementById('room-id');
+txtRoomId.value = roomid;
+txtRoomId.onkeyup = txtRoomId.oninput = txtRoomId.onpaste = function() {
+    localStorage.setItem(connection.socketMessageEvent, document.getElementById('room-id').value);
+};
+
+// detect 2G
+if(navigator.connection &&
+   navigator.connection.type === 'cellular' &&
+   navigator.connection.downlinkMax <= 0.115) {
+  alert('2G is not supported. Please use a better internet service.');
+}
+</script>
+
+<script type="text/javascript">
+// screen sharing codes goes here
+var RMCMediaTrack = {
+  camera: null,
+  screen: null
+};
+
+function beforeOpenOrJoin(roomid, callback) {
+  connection.socketCustomEvent = roomid;
+  callback();
+}
+
+function afterOpenOrJoin() {
+  connection.socket.on(connection.socketCustomEvent, function(message) {
+      if(message.userid === connection.userid) return; // ignore self messages
+
+      if(message.justSharedMyScreen === true) {
+        var video = document.getElementById(message.userid);
+        if(video) {
+          // video.querySelector('video').srcObject = null;
+        }
+      }
+
+      if(message.justStoppedMyScreen === true) {
+        var video = document.getElementById(message.userid);
+        if(video) {
+          video.querySelector('video').srcObject = null;
+        }
+      }
+  });
+}
+
+var btnShareScreen = document.getElementById('share-screen');
+connection.onUserStatusChanged = function() {
+  btnShareScreen.disabled = connection.getAllParticipants().length <= 0;
+};
+
+btnShareScreen.onclick = function() {
+  this.disabled = true;
+
+  getScreenStream(function(screen) {
+    RMCMediaTrack.screen = screen.getVideoTracks()[0];
+
+    var isLiveSession = connection.getAllParticipants().length > 0;
+    if(isLiveSession) {
+        replaceTrack(RMCMediaTrack.screen);
+    }
+  });
+};
+
+function addStreamStopListener(stream, callback) {
+    var streamEndedEvent = 'ended';
+    if ('oninactive' in stream) {
+        streamEndedEvent = 'inactive';
+    }
+    stream.addEventListener(streamEndedEvent, function() {
+        callback();
+        callback = function() {};
+    }, false);
+    stream.getAudioTracks().forEach(function(track) {
+        track.addEventListener(streamEndedEvent, function() {
+            callback();
+            callback = function() {};
+        }, false);
+    });
+    stream.getVideoTracks().forEach(function(track) {
+        track.addEventListener(streamEndedEvent, function() {
+            callback();
+            callback = function() {};
+        }, false);
+    });
+}
+
+function getScreenStream(callback) {
+  getScreenId(function (error, sourceId, screen_constraints) {
+    navigator.mediaDevices.getUserMedia(screen_constraints).then(function(screen) {
+      RMCMediaTrack.selfVideo.srcObject = screen;
+
+      callback(screen);
+
+      addStreamStopListener(screen, function() {
+            RMCMediaTrack.selfVideo.srcObject = RMCMediaTrack.cameraStream;
+
+            connection.socket && connection.socket.emit(connection.socketCustomEvent, {
+              justStoppedMyScreen: true,
+              userid: connection.userid
+            });
+
+            // share camera again
+            replaceTrack(RMCMediaTrack.camera);
+
+            // so that user can share again
+            btnShareScreen.disabled = false;
+        });
+
+        connection.socket && connection.socket.emit(connection.socketCustomEvent, {
+          justSharedMyScreen: true,
+          userid: connection.userid
+        });
+    });
+  });
+}
+
+function replaceTrack(videoTrack) {
+    connection.getAllParticipants().forEach(function(pid) {
+        var peer = connection.peers[pid].peer;
+        if (!peer.getSenders) return;
+
+        var trackToReplace = videoTrack;
+
+        peer.getSenders().forEach(function(sender) {
+            if (!sender || !sender.track) return;
+
+            if (sender.track.kind === 'video' && trackToReplace) {
+                sender.replaceTrack(trackToReplace);
+                trackToReplace = null;
+            }
+        });
+    });
+}
+</script>
+
+  <section>
+    <p>
+      You can write cordova/ionic/phonegap based <a href="https://www.rtcmulticonnection.org/docs/Write-iOS-Apps/" target="_blank">iOS</a> or <a href="https://www.rtcmulticonnection.org/docs/Write-Android-Apps/" target="_blank">Android</a> apps for this demo as well. 
+    </p>
+
+    <p>
+      You can run same demo on Safari-11 as well. (both on MacOSX & iOS)
+    </p>
+
+    <p>
+      Microsoft Edge is also supported.
+    </p>
+  </section>
+
+  <footer>
+    <small id="send-message"></small>
+  </footer>
+
+  <script src="https://cdn.webrtc-experiment.com/common.js"></script>
+</body>
+</html>
