Merge pull request #302 from Temasys/0.6.x/development

Release 0.6.28.
Temasys · Jan 24, 2018 · 05f2d98 · 05f2d98
2 parents fff3a44 + c91303d
commit 05f2d98
Show file tree

Hide file tree

Showing 43 changed files with 229 additions and 232 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ You can raise tickets on [our support portal](http://support.temasys.io) or on [
 ##### Current versions and stability
 We recommend that you always use the latest versions of the Temasys Web SDK as WebRTC is still evolving and we adapt to changes very frequently.
 
-[Latest version: `0.6.27`](https://github.com/Temasys/SkylinkJS/releases/tag/0.6.27).
+[Latest version: `0.6.28`](https://github.com/Temasys/SkylinkJS/releases/tag/0.6.28).
 
 ##### Setting AdapterJS flags
 If you require to set Temasys AdapterJS flags (e.g. forcing Temasys WebRTC plugin), we recommend the following method:

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "skylinkjs",
   "description": "WebRTC real-time video conversation library",
-  "version": "0.6.27",
+  "version": "0.6.28",
   "homepage": "https://temasys.io",
   "author": {
     "name": "Temasys Communications Pte. Ltd.",

diff --git a/demo/app/js/main.js b/demo/app/js/main.js
@@ -5,7 +5,6 @@ var Demo = Demo || {};
 Demo.FILE_SIZE_LIMIT = 1024 * 1024 * 200;
 Demo.Peers = 0;
 Demo.Files = [];
-Demo.Streams = [];
 Demo.Stats = {};
 Demo.Methods = {};
 Demo.Skylink = new Skylink();
@@ -283,22 +282,6 @@ Demo.Skylink.on('peerRestart', function(peerId, peerInfo, isSelf) {
       (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
     $('#user' + peerId + ' .name').html(peerInfo.userData);
   }
-
-  if ($('#video' + peerId).length > 0) {
-    if (!peerInfo.settings.video && !peerInfo.settings.audio) {
-      //$('#video' + peerId + ' .video-obj').hide();
-      $('#video' + peerId + ' .video-obj').replaceWith(
-        '<video class="video-obj" autoplay="true" ' + (isSelf ? 'muted="true"' : '') + ' poster="img/no_profile.jpg"></video>');
-      if (Demo.Streams[peerId]) {
-        delete Demo.Streams[peerId];
-      }
-      return;
-    }
-
-    if (peerInfo.settings.video && peerInfo.mediaStatus.videoMuted && Demo.Streams[peerId]) {
-      attachMediaStream($('#video' + peerId + ' .video-obj')[0], Demo.Streams[peerId]);
-    }
-  }
 });
 
 //---------------------------------------------------
@@ -355,22 +338,17 @@ Demo.Skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
 
     peerVideo = document.createElement('video');
     peerVideo.className = 'video-obj';
+    peerVideo.muted = isSelf;
+    peerVideo.autoplay = true;
+    peerVideo.controls = true;
+    peerVideo.setAttribute('playsinline', true);
+
     if (!peerInfo.settings.audio && !peerInfo.settings.video) {
       peerVideo.poster = 'img/no_profile.jpg';
     }
-    if (window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.autoplay = 'autoplay';
-    }
-
-    // mutes user's video
-    if (isSelf && window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.muted = 'muted';
-    }
 
     $('#peer_video_list').append(peerElm);
-
-    peerElm.appendChild(peerVideo);
-
+    $(peerElm).append(peerVideo);
     $(peerElm).append('<div class="connstats-wrapper"><button class="toggle-connstats" data="' + (isSelf ? 'MCU' : peerId) +
       '">See ' + (isSelf ? 'MCU ' : '') + 'Stats</button><div class="row connstats">' +
       '<div class="audio row"><b class="col-md-12">Audio</b><p class="col-md-6">Uploading: <span class="upload"></span></p>' +
@@ -381,57 +359,20 @@ Demo.Skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
         '<p class="col-md-6">Remote: <span class="remote"></span></p></div>' +
       '<div class="certificate row"><b class="col-md-12">Certificates</b><p class="col-md-6"><span class="certleft"></span></p>' +
         '<p class="col-md-6"><span class="certright"></span></p></div></div></div>');
+
+    setTimeout(function () {
+      peerVideo.removeAttribute('controls');
+    });
   }
 });
 //---------------------------------------------------
 Demo.Skylink.on('incomingStream', function(peerId, stream, isSelf, peerInfo) {
   if (!isSelf) {
     Demo.Peers += 1;
   }
-  var peerVideo;
-
-  if ($('#video' + peerId).length === 0) {
-    var peerElm = document.createElement('div');
-    peerElm.id = 'video' + peerId;
-    peerElm.className = 'col-md-6 peervideo';
-
-    peerVideo = document.createElement('video');
-    peerVideo.className = 'video-obj';
-
-    if (window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.autoplay = 'autoplay';
-    }
-
-    // mutes user's video
-    if (isSelf && window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.muted = 'muted';
-    }
-
-    $('#peer_video_list').append(peerElm);
-
-    peerElm.appendChild(peerVideo);
-
-    if (!isSelf) {
-      $(peerElm).append('<div class="connstats-wrapper"><button class="toggle-connstats" data="' + peerId +
-        '">See Stats</button><div class="row connstats">' +
-        '<div class="agent row"><b class="col-md-12">Agent</b><p class="col-md-6">Name: <span class="upload">' +
-          peerInfo.agent.name + (peerInfo.agent.os ? ' (' + peerInfo.agent.os + ')' : '') + '</span></p>' +
-          '<p class="col-md-6">Version: <span class="download">' + peerInfo.agent.version +
-          (peerInfo.agent.pluginVersion ? ' (Plugin Ver: ' + peerInfo.agent.pluginVersion + ')' : '') + '</span></p></div>' +
-        '<div class="audio row"><b class="col-md-12">Audio</b><p class="col-md-6">Uploading: <span class="upload"></span></p>' +
-        '<p class="col-md-6">Downloading: <span class="download"></span></p></div>' +
-        '<div class="video row"><b class="col-md-12">Video</b><p class="col-md-6">Uploading: <span class="upload"></span></p>' +
-        '<p class="col-md-6">Downloading: <span class="download"></span></p></div>' +
-        '<div class="candidate row"><b class="col-md-12">Selected Candidate</b><p class="col-md-6">Local: <span class="local"></span></p>' +
-        '<p class="col-md-6">Remote: <span class="remote"></span></p></div></div></div>');
-    }
-
-  } else {
-    peerVideo = $('#video' + peerId + ' .video-obj')[0];
-  }
 
+  var peerVideo = $('#video' + peerId + ' .video-obj')[0];
   attachMediaStream(peerVideo, stream);
-  Demo.Streams[peerId] = stream;
   //$(peerVideo).show();
 
   if (isSelf) {
@@ -486,7 +427,6 @@ Demo.Skylink.on('peerLeft', function (peerId, peerInfo, isSelf){
   Demo.Peers -= 1;
   $('#video' + peerId).remove();
   $('#user' + peerId).remove();
-  delete Demo.Streams[peerId];
   var index = selectedPeers.indexOf(peerId);
 
   if (index > -1) {
@@ -497,10 +437,6 @@ Demo.Skylink.on('peerLeft', function (peerId, peerInfo, isSelf){
   delete Demo.ShowStats[peerId];
 });
 
-Demo.Skylink.on('sessionDisconnect', function (peerId, peerInfo){
-  Demo.Skylink.joinRoom();
-});
-
 //---------------------------------------------------
 Demo.Skylink.on('handshakeProgress', function(state, peerId) {
   var stage = 0;
@@ -618,22 +554,6 @@ Demo.Skylink.on('peerUpdated', function(peerId, peerInfo, isSelf) {
       (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
     $('#user' + peerId + ' .name').html(peerInfo.userData);
   }
-
-  if ($('#video' + peerId).length > 0) {
-    if (!peerInfo.settings.video && !peerInfo.settings.audio) {
-      //$('#video' + peerId + ' .video-obj').hide();
-      $('#video' + peerId + ' .video-obj').replaceWith(
-        '<video class="video-obj" autoplay="true" ' + (isSelf ? 'muted="true"' : '') + ' poster="img/no_profile.jpg"></video>');
-      if (Demo.Streams[peerId]) {
-        delete Demo.Streams[peerId];
-      }
-      return;
-    }
-
-    if (peerInfo.settings.video && peerInfo.mediaStatus.videoMuted && Demo.Streams[peerId]) {
-      attachMediaStream($('#video' + peerId)[0], Demo.Streams[peerId]);
-    }
-  }
 });
 //---------------------------------------------------
 Demo.Skylink.on('roomLock', function(isLocked, peerId, peerInfo, isSelf) {

diff --git a/demo/audio-only-call/script.js b/demo/audio-only-call/script.js
@@ -9,23 +9,31 @@ SkylinkDemo.on('incomingStream', function (peerId, stream, isSelf, peerInfo) {
   peer.style.textAlign = 'center';
   peer.style.fontFamily = 'sans-serif';
   peer.style.marginRight = '15px';
+
   var peerVoice = document.createElement('video');
-  if (window.webrtcDetectedBrowser !== 'IE') {
-    peerVoice.autoplay = 'autoplay';
-  }
+  peerVoice.autoplay = true;
+  peerVoice.controls = true;
+  peerVoice.muted = isSelf;
   peerVoice.poster = 'user.png';
   peerVoice.style.height = '150px';
+  peerVoice.setAttribute('playsinline', true);
+
   var peerName = document.createElement('p');
   peerName.style.background = '#eee';
   peerName.style.margin = '0';
   peerName.style.padding = '12px 0';
   peerName.style.borderTop = 'solid 2px #000';
   peerName.innerHTML = (isSelf) ? 'Me' : peerId;
+
   document.body.appendChild(peer);
   peer.appendChild(peerVoice);
   peer.appendChild(peerName);
+
   attachMediaStream(peerVoice, stream);
-  peerVoice.play();
+
+  setTimeout(function () {
+    peerVoice.removeAttribute('controls');
+  });
 });
 
 SkylinkDemo.on('peerLeft', function (peerId, peerInfo, isSelf) {

diff --git a/demo/gridster-integration/js/rtcevent.js b/demo/gridster-integration/js/rtcevent.js
@@ -206,11 +206,17 @@ Demo.Skylink.on('incomingStream', function(peerId, stream, isSelf, peerInfo) {
   //Video
   var peerVideo = document.createElement('video');
   peerVideo.id = 'video_' + peerId;
+  peerVideo.autoplay = true;
+  peerVideo.controls = true;
   peerVideo.style.cssText = "width:100%;";
-  if (window.webrtcDetectedBrowser !== 'IE') {
-    peerVideo.autoplay = 'autoplay';
-  }
+  peerVideo.setAttribute('playsinline', true);
+
   $('#media_' + peerId).append(peerVideo);
+
+  setTimeout(function () {
+    peerVideo.removeAttribute('controls');
+  });
+
   attachMediaStream(peerVideo, stream);
   $('#picture_' + peerId).remove();
 });
@@ -219,14 +225,20 @@ Demo.Skylink.on('mediaAccessSuccess', function(stream) {
   var ownerVideo = document.createElement('video');
   ownerVideo.id = 'video_self';
   ownerVideo.style.cssText = "width:100%;";
-  if (window.webrtcDetectedBrowser !== 'IE') {
-    ownerVideo.muted = 'muted';
-    ownerVideo.autoplay = 'autoplay';
-  }
+  ownerVideo.muted = true;
+  ownerVideo.autoplay = true;
+  ownerVideo.controls = true;
+  ownerVideo.setAttribute('playsinline', true);
+
   $('#media_self').append(ownerVideo);
+
+  setTimeout(function () {
+    ownerVideo.removeAttribute('controls');
+  });
+
   attachMediaStream(ownerVideo, stream);
-  $('#picture_self').remove();
 
+  $('#picture_self').remove();
 });
 
 

diff --git a/demo/privileged/auto-priv/index.html b/demo/privileged/auto-priv/index.html
@@ -231,8 +231,8 @@ <h5>Targeted peers to message / file transfer to</h5>
     </div>
 	</footer>
   <script src="../../../publish/skylink.complete.js"  type="text/javascript"></script>
-	<script src="../edge-attachmediastream.js"   type="text/javascript"></script>
-  <script src="config.js"   type="text/javascript"></script>
+  <script src="../edge-attachmediastream.js"   type="text/javascript"></script>
+  <script src="../../config.js"   type="text/javascript"></script>
   <script src="js/main.js"   type="text/javascript"></script>
 </body>
 </html>
diff --git a/demo/privileged/auto-priv/js/main.js b/demo/privileged/auto-priv/js/main.js
@@ -232,20 +232,23 @@ Demo.Skylink.on('incomingStream', function (peerId, stream, isSelf, peerInfo){
     peerVideo = document.createElement('video');
     peerVideo.id = 'video' + peerId;
     peerVideo.className = 'col-md-6';
-    if (window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.autoplay = 'autoplay';
-    }
+    peerVideo.autoplay = true;
+    peerVideo.muted = isSelf;
+    peerVideo.controls = true;
+    peerVideo.setAttribute('playsinline', true);
 
-    // mutes user's video
-    if (isSelf && window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.muted = 'muted';
-    }
     $('#peer_video_list').append(peerVideo);
+
+    setTimeout(function () {
+      peerVideo.removeAttribute('controls');
+    });
+
   } else {
     peerVideo = document.getElementById('video' + peerId);
   }
 
   attachMediaStream(peerVideo, stream);
+
   Demo.Streams[peerId] = Demo.Streams[peerId] || {};
   Demo.Streams[peerId][stream.id] = peerVideo.src;
 });

diff --git a/demo/privileged/auto-unpriv/index.html b/demo/privileged/auto-unpriv/index.html
@@ -215,8 +215,8 @@ <h5>Targeted peers to message / file transfer to</h5>
     </div>
 	</footer>
   <script src="../../../publish/skylink.complete.js"  type="text/javascript"></script>
-	<script src="../edge-attachmediastream.js"   type="text/javascript"></script>
-  <script src="config.js"   type="text/javascript"></script>
+  <script src="../edge-attachmediastream.js"   type="text/javascript"></script>
+  <script src="../../config.js"   type="text/javascript"></script>
   <script src="js/main.js"   type="text/javascript"></script>
 </body>
 </html>
diff --git a/demo/privileged/auto-unpriv/js/main.js b/demo/privileged/auto-unpriv/js/main.js
@@ -231,20 +231,23 @@ Demo.Skylink.on('incomingStream', function (peerId, stream, isSelf, peerInfo){
     peerVideo = document.createElement('video');
     peerVideo.id = 'video' + peerId;
     peerVideo.className = 'col-md-6';
-    if (window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.autoplay = 'autoplay';
-    }
+    peerVideo.autoplay = true;
+    peerVideo.muted = isSelf;
+    peerVideo.controls = true;
+    peerVideo.setAttribute('playsinline', true);
 
-    // mutes user's video
-    if (isSelf && window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.muted = 'muted';
-    }
     $('#peer_video_list').append(peerVideo);
+
+    setTimeout(function () {
+      peerVideo.removeAttribute('controls');
+    });
+
   } else {
     peerVideo = document.getElementById('video' + peerId);
   }
 
   attachMediaStream(peerVideo, stream);
+
   Demo.Streams[peerId] = Demo.Streams[peerId] || {};
   Demo.Streams[peerId][stream.id] = peerVideo.src;
 });

diff --git a/demo/privileged/unauto-priv/js/main.js b/demo/privileged/unauto-priv/js/main.js
@@ -231,20 +231,23 @@ Demo.Skylink.on('incomingStream', function (peerId, stream, isSelf, peerInfo){
     peerVideo = document.createElement('video');
     peerVideo.id = 'video' + peerId;
     peerVideo.className = 'col-md-6';
-    if (window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.autoplay = 'autoplay';
-    }
+    peerVideo.autoplay = true;
+    peerVideo.muted = isSelf;
+    peerVideo.controls = true;
+    peerVideo.setAttribute('playsinline', true);
 
-    // mutes user's video
-    if (isSelf && window.webrtcDetectedBrowser !== 'IE') {
-      peerVideo.muted = 'muted';
-    }
     $('#peer_video_list').append(peerVideo);
+
+    setTimeout(function () {
+      peerVideo.removeAttribute('controls');
+    });
+
   } else {
     peerVideo = document.getElementById('video' + peerId);
   }
 
   attachMediaStream(peerVideo, stream);
+
   Demo.Streams[peerId] = Demo.Streams[peerId] || {};
   Demo.Streams[peerId][stream.id] = peerVideo.src;
 });