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

Release 0.6.18

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-## Committing to the Temasys SkylinkJS branch
+## Committing to the Temasys Web SDK branch
 
 For developers who wants to contribute to the source code, you would require to fork your own repostiory and create a pull-request to a new branch.
 
@@ -35,12 +35,12 @@ Commit message format examples:
 - Commit that's a bug fix that has been completed<br>
   `[#15][BUG]: Fix for new bug found.`
 
-## Temasys SkylinkJS code demos
+## Temasys Web SDK code demos
 In the `demo` folder, it contains the following code samples for developers to test and try on. You will require to create your own `config.js` file and setup with your own App Key CORS url tied to the `localhost` or your own local network IP address (whichever way you like it). Check the `config-example.js` file in the `demo` folder on how to configure the `config.js` file. Once you are done, save it in the `demo` folder.
 
 Here's the list of sample demos available:
 
-- `app`: The demo that tests all of Temasys SkylinkJS functionalities.
+- `app`: The demo that tests all of Temasys Web SDK functionalities.
 - `simple-app`: The demo that tests a simple peer-to-peer video call functionalities.
 - `chat-room`: The demo that tests on the chat functionality.
 - `file-transfer`: The demo that tests on the data transfers functionality.

README.md

@@ -7,13 +7,18 @@ We've gone to great length to make this library work in as many browsers as poss
 You'll need a Temasys Account and an App key to use this. [Register here to get your App key](https://console.temasys.io).
 
 #### Supported Browsers
-| Features       | Chrome<br>`45`-`51`+ | Firefox<br>`40`-`48`+ | Opera<br>`32`-`36`+ | IE<br>`9`-`11`+     | Safari<br>`7`-`9`  |
-| -------------- | ---------- | ----------- | --------- | ---------- | ---------- |
-| **Screensharing**  | Yes with [Chrome Extension**](https://chrome.google.com/webstore/detail/skylink-webrtc-tools/ljckddiekopnnjoeaiofddfhgnbdoafc)  |  Yes with [Firefox Extension**](https://addons.mozilla.org/en-US/firefox/addon/skylink-webrtc-tools/) |     -     | Yes with [Commercial Temasys Plugin*](https://temasys.io/plugin/#commercial-licensing)  | Yes with [Commercial Temasys Plugin*](https://temasys.io/plugin/#commercial-licensing) |
-| **Video Call**     | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes [Temasys Plugin](http://skylink.io/plugin/)  |
-| **Audio Call**     | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/) | Yes with [Temasys Plugin](http://skylink.io/plugin/)  |
-| **File Transfers** | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes with [Temasys Plugin](http://skylink.io/plugin/)  |
-| **Chat Messaging** | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes with [Temasys Plugin](http://skylink.io/plugin/)  |
+
+> ##### Browsers in Beta (Edge/Bowser):
+> _Please note that MCU functionality, data channel file transfer, and P2P messaging are not supported by the Temasys Web SDK in Edge browser due to current compatibility limitations. Older versions of Edge may require you to enable experimental support for H.264 to interop with Chrome and Firefox browsers. Edge support should be considered experimental in this release._
+
+| Features       | Chrome<br>`52`-`55`+ | Firefox<br>`48`-`50`+ | Opera<br>`38`-`42`+ | IE<br>`9`-`11`+     | Safari<br>`7`-`9`  | Edge<br>`14.14352` | Bowser<br>(iOS `9.x` and below) | 
+| -------------- | ---------- | ----------- | --------- | ---------- | ---------- | ---- | ----- |
+| **Platforms:** | Win/Mac/Ubuntu/Android | Win/Mac/Ubuntu/Android | Win/Mac/Ubuntu/Android | Win/Mac | Win | Mac | Win | iOS<br>(`9.x` and below) |
+| **Screensharing**  | Yes with [Chrome Extension**](https://chrome.google.com/webstore/detail/skylink-webrtc-tools/ljckddiekopnnjoeaiofddfhgnbdoafc)  |  Yes with [Firefox Extension**](https://addons.mozilla.org/en-US/firefox/addon/skylink-webrtc-tools/) |     -     | Yes with [Commercial Temasys Plugin*](https://temasys.io/plugin/#commercial-licensing)  | Yes with [Commercial Temasys Plugin*](https://temasys.io/plugin/#commercial-licensing) | No | No |
+| **Video Call**     | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes [Temasys Plugin](http://skylink.io/plugin/)  | Yes (with H264 flag enabled) | Yes |
+| **Audio Call**     | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/) | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes (no MCU) | Yes (no MCU) |
+| **File Transfers** | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | No | No |
+| **Chat Messaging** | Yes        | Yes         | Yes       | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes with [Temasys Plugin](http://skylink.io/plugin/)  | Yes (Signaling only) | Yes (Signaling only) |
 
 - (+) Latest browser versions indicates the last tested browser version. It should work with the updated next versions, but if it doesn't, open a bug ticket.
 - (*) Custom Branded Temasys WebRTC Plugin incorporates additional features not available in the free plugin.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "skylinkjs",
   "description": "WebRTC real-time video conversation library",
-  "version": "0.6.17",
+  "version": "0.6.18",
   "homepage": "https://skylink.io",
   "author": {
     "name": "Temasys Communications Pte. Ltd.",
@@ -24,7 +24,7 @@
     "doc-style/**"
   ],
   "dependencies": {
-    "adapterjs": "0.14.0",
+    "adapterjs": "0.14.1",
     "socket.io-client": "1.4.8"
   },
   "keywords": ["webrtc", "real-time", "p2p"]

demo/README.md

@@ -63,7 +63,7 @@ In this demo, you can find an example of how you can do a simple file transfer t
 `peerJoined`, `peerLeft`, `dataTransferState`
 
 ### demo/gridster-integration
-In this demo, you can find an example of an integration of [gridster](http://gridster.net/), a drag-and-drop grid like UI with Skylink functionalities that enables users to send files, send text messages and make video calls.
+In this demo, you can find an example of an integration of [gridster](http://gridster.net/), a drag-and-drop grid like UI with the Temasys Web SDK functionalities that enables users to send files, send text messages and make video calls.
 
 ##### Functionalities covered
 `getPeerInfo()`, `getUserData()`, `init()`, `getUserMedia()`, `joinRoom()`,  `on()`, `respondBlobRequest()`, `sendBlobData()`, `sendMessage()`, `sendP2PMessage()`
@@ -72,7 +72,7 @@ In this demo, you can find an example of an integration of [gridster](http://gri
 `dataTransferState`, `incomingMessage`, `peerJoined`, `incomingStream`, `mediaAccessSuccess`, `mediaAccessError`, `peerLeft`, `channelError`, `mediaAccessError`
 
 ### demo/messaging
-In this demo, you can find an example of all the ways to do messaging with Skylink - P2P (secure) or socket. Private (targeted) or public (broadcasted) messages.
+In this demo, you can find an example of all the ways to do messaging with the Temasys Web SDK - P2P (secure) or socket. Private (targeted) or public (broadcasted) messages.
 
 ##### Functionalities covered
 `sendP2PMessage()`, `sendMessage()`, `setUserData()`, `init()`, `joinRoom()`,  `on()`
@@ -99,7 +99,7 @@ In this demo, you can find an example of the overview of all types of stream set
 `peerJoined`, `peerLeft`, `incomingStream`, `mediaAccessSuccess`, `incomingMessage`
 
 ### demo/video-call
-In this demo, you can find an example of how you can create a simple video call with Skylink.
+In this demo, you can find an example of how you can create a simple video call with the Temasys Web SDK.
 
 ##### Functionalities covered
 `init()`, `joinRoom()`, `on()`, `getPeerInfo()`
@@ -117,4 +117,22 @@ In this demo, you can find an example of how to utilize the privileged key conce
 `getPeersStateChange`, `introduceStateChange`
 
 ##### How to use
-First, open the index page of the privileged demo. Each button there when being clicked will open another browser tab for the corresponding type of user, with corresponding functionalities available. For example privileged users have getPeers() and introduce() options while the rest do not. To introduce two peers, enter the peer ID of each peer to the textbox then hit "Introduce".
+First, open the index page of the privileged demo. Each button there when clicked will open another browser tab for the corresponding type of user, with corresponding functionalities available. For example, privileged users have getPeers() and introduce() options while the rest do not. To introduce two peers, enter the peer ID of each peer to the text box then hit "Introduce".
+
+### demo/data-streaming
+In this demo, you can find an example of how you can share video (mp4) with peers with the Temasys Web SDK.
+
+##### Functionalities covered
+`init()`, `joinRoom()`, `on()`, `streamData()`, `sendP2PMessage()`
+
+##### Events used
+`incomingDataStream`, `incomingMessage`, `peerLeft`, `dataChannelState`
+
+### demo/screenshare-and-camera
+In this demo, you can find an example of how you can share both camera and screenshare to peers with the Temasys Web SDK.
+
+##### Functionalities covered
+`init()`, `joinRoom()`, `on()`, `shareScreen()`
+
+##### Events used
+`incomingStream`, `peerLeft`

demo/app/css/style.css

@@ -184,6 +184,12 @@ footer {
   text-transform: capitalize;
 }
 
+.panel .panel-heading small {
+  display: block;
+  color: #888;
+  font-size: 10px;
+}
+
 @media screen and (max-width:1999px){
   #credential_panel .panel-body {
     margin-bottom:15px;

demo/app/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Temasys SkylinkJS Demo : App</title>
+	<title>Temasys Web SDK Demo : App</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="shortcut icon" href="css/favicon.ico">
   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
@@ -22,7 +22,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <b class="navbar-brand">Temasys SkylinkJS Demo : App</b>
+          <b class="navbar-brand">Temasys Web SDK Demo : App</b>
         </div>
 
         <div id="navigation_panel" class="collapse navbar-collapse">
@@ -229,7 +229,8 @@ <h5>Targeted peers to message / file transfer to</h5>
     </div>
 	</footer>
   <script src="../../publish/skylink.complete.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>

demo/app/js/main.js

@@ -11,6 +11,7 @@ Demo.Methods = {};
 Demo.Skylink = new Skylink();
 Demo.ShowStats = {};
 Demo.TransfersDone = {};
+Demo.Downloads = {};
 
 var _peerId = null;
 
@@ -27,7 +28,9 @@ Demo.Methods.displayFileItemHTML = function(content) {
     '<div id="' + content.transferId + '" class="progress-bar ' +
     '" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"' +
     ' style="width: 0%"><span>Downloading...</span></div></div>')) +
-    '<p><a id="'  + content.transferId + '_btn" class="btn btn-default" ' +
+    '<p><a id="'  + content.transferId + '_btn" class="btn btn-default ' +
+    (window.webrtcDetectedBrowser === 'IE' ? ' downloadfile' : '') + '" ' +
+    (window.webrtcDetectedBrowser === 'safari' ? 'target="_blank" ' : '') +
     'href="#" style="display: block;" download="' + content.name +
     '"><span class="glyphicon glyphicon-cloud-download"></span> <b>Download file</b></a>' +
     (content.direction === Demo.Skylink.DATA_TRANSFER_TYPE.DOWNLOAD ?
@@ -153,7 +156,15 @@ Demo.Skylink.on('dataTransferState', function (state, transferId, peerId, transf
       $('#' + transferId + ' .' + peerId).length === 0) {
       $('#' + transferId + ' .' + peerId).append('<tbody class="' + peerId + '"></tbody>');
       if (transferInfo.data) {
-        $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+        if (window.webrtcDetectedBrowser !== 'IE') {
+          $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+        } else {
+          $('#' + transferId + '_btn').attr('fileid', transferId);
+          Demo.Downloads[transferId] = {
+            name: transferInfo.name,
+            blob: transferInfo.data
+          };
+        }
       }
       return;
     }
@@ -164,7 +175,15 @@ Demo.Skylink.on('dataTransferState', function (state, transferId, peerId, transf
     Demo.Methods.displayChatMessage(displayName, 'File sent: ' + transferInfo.name);
 
     if (transferInfo.data) {
-      $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+      if (window.webrtcDetectedBrowser !== 'IE') {
+        $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+      } else {
+        $('#' + transferId + '_btn').attr('fileid', transferId);
+        Demo.Downloads[transferId] = {
+          name: transferInfo.name,
+          blob: transferInfo.data
+        };
+      }
     }
     break;
   case Demo.Skylink.DATA_TRANSFER_STATE.UPLOADING :
@@ -201,7 +220,15 @@ Demo.Skylink.on('dataTransferState', function (state, transferId, peerId, transf
     // If completed, display download button
     var displayName = Demo.Skylink.getPeerInfo(peerId).userData;
     $('#' + transferId).parent().remove();
-    $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+    if (window.webrtcDetectedBrowser !== 'IE') {
+      $('#' + transferId + '_btn').attr('href', URL.createObjectURL(transferInfo.data));
+    } else {
+      $('#' + transferId + '_btn').attr('fileid', transferId);
+      Demo.Downloads[transferId] = {
+        name: transferInfo.name,
+        blob: transferInfo.data
+      };
+    }
     $('#' + transferId + '_btn').css('display', 'block');
     Demo.Methods.displayChatMessage(displayName, 'File received: ' + transferInfo.name);
     $('#file-' + transferId + ' .c-' + peerId + '.cancel').css('opacity', .5);
@@ -352,7 +379,9 @@ Demo.Skylink.on('peerJoined', function(peerId, peerInfo, isSelf) {
       '<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>');
+        '<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>');
   }
 });
 //---------------------------------------------------
@@ -663,7 +692,8 @@ Demo.Skylink.on('recordingState', function(state, recordingId, url, error) {
       for (var prop in url) {
         if (url.hasOwnProperty(prop) && url[prop]) {
           $('#recording_' + recordingId + '_btn').append(
-            '<a class="btn btn-default" href="' + url[prop] + '" style="width:100%;margin:7px 0;display:block;" download="' + recordingId + '_' + prop + '.mp4">' +
+            '<a class="btn btn-default" ' + (['IE', 'safari'].indexOf(window.webrtcDetectedBrowser) > -1 ? 'target="_blank" ' : '') +
+            'href="' + url[prop] + '" style="width:100%;margin:7px 0;display:block;" download="' + recordingId + '_' + prop + '.mp4">' +
             '<span class="glyphicon glyphicon-cloud-download"></span> <b>Download Recording (' + (prop !== 'mixin' ? 'Peer ' : '') + prop + ')</b></a>');
         }
       }
@@ -699,7 +729,9 @@ Demo.Skylink.on('getConnectionStatusStateChange', function (state, peerId, stats
         ' jitter buffer <i>ms</i>' : '') + (dir === 'sending' ? ', ' + stats[type][dir].rtt + ' rtt' : '') +
         (typeof stats[type][dir].nacks === 'number' ? ', ' + stats[type][dir].nacks + ' nacks' : '') +
         (typeof stats[type][dir].plis === 'number' ? ', ' + stats[type][dir].plis + ' plis' : '') +
-        (typeof stats[type][dir].firs === 'number' ? ', ' + stats[type][dir].firs + ' firs' : '') + ')';
+        (typeof stats[type][dir].firs === 'number' ? ', ' + stats[type][dir].firs + ' firs' : '') +
+        (typeof stats[type][dir].slis === 'number' ? ', ' + stats[type][dir].slis + ' slis' : '') +
+        (typeof stats[type][dir].e2eDelay === 'number' ? ', ' + stats[type][dir].e2eDelay + ' e2eDelay' : '') + ')';
 
       // format codec stats
       if (stats[type][dir].codec) {
@@ -767,6 +799,18 @@ Demo.Skylink.on('getConnectionStatusStateChange', function (state, peerId, stats
         if (typeof stats.video[dir].frameRateStdDev === 'number') {
           itemAddStr += (itemAddStr ? ', ' : '') + 'fps std dev: ' + stats.video[dir].frameRateStdDev.toFixed(2);
         }
+
+        if (typeof stats.video[dir].framesDecoded === 'number') {
+          itemAddStr += (itemAddStr ? ', ' : '') + 'decoded: ' + stats.video[dir].framesDecoded.toFixed(2);
+        }
+
+        if (typeof stats.video[dir].framesCorrupted === 'number') {
+          itemAddStr += (itemAddStr ? ', ' : '') + 'corrupted: ' + stats.video[dir].framesCorrupted.toFixed(2);
+        }
+
+        if (typeof stats.video[dir].framesPerSecond === 'number') {
+          itemAddStr += (itemAddStr ? ', ' : '') + 'fps: ' + stats.video[dir].framesPerSecond.toFixed(2);
+        }
       }
 
       itemStr += itemAddStr + ')';
@@ -777,7 +821,9 @@ Demo.Skylink.on('getConnectionStatusStateChange', function (state, peerId, stats
       $(statsElm).find('.candidate .' + type).html((stats.selectedCandidate[type].ipAddress || '-') + ':' +
         (stats.selectedCandidate[type].portNumber || '-') + ' - (transport: ' +
         (stats.selectedCandidate[type].transport || 'N/A') +
-        ', type: ' + (stats.selectedCandidate[type].candidateType || 'N/A') + ')');
+        ', type: ' + (stats.selectedCandidate[type].candidateType || 'N/A') +
+        (stats.selectedCandidate[type].turnMediaTransport ? ', turn media transport: ' +
+        stats.selectedCandidate[type].turnMediaTransport : '') + ')');
     };
 
     formatStatItem('audio', 'sending');
@@ -786,6 +832,13 @@ Demo.Skylink.on('getConnectionStatusStateChange', function (state, peerId, stats
     formatStatItem('video', 'receiving');
     formatCanStatItem('local');
     formatCanStatItem('remote');
+
+    $(statsElm).find('.certificate .certleft').html('Certificate algorithm - (local: ' +
+      (stats.certificate.local.fingerprintAlgorithm || '-') + ', remote: ' +
+      (stats.certificate.remote.fingerprintAlgorithm || '-') + ')');
+    $(statsElm).find('.certificate .certright').html('Ciphers - (srtp: ' +
+      (stats.certificate.srtpCipher ? '<small>' + stats.certificate.srtpCipher + '</small>' : 'N/A') + ', dtls: ' +
+      (stats.certificate.dtlsCipher ? '<small>' + stats.certificate.dtlsCipher + '</small>' : 'N/A') + ')');
   }
 });
 
@@ -1037,4 +1090,17 @@ $(document).ready(function() {
     $('#selected_users_panel .all').show();
     selectedPeers = [];
   });
+
+  if (window.webrtcDetectedBrowser === 'IE') {
+    $('#file_list_panel').on('click', '.downloadfile', function () {
+      var fileid = $(this).attr('fileid');
+      window.navigator.msSaveBlob(Demo.Downloads[fileid].blob, Demo.Downloads[fileid].name);
+    });
+  }
+
+  if (window.webrtcDetectedBrowser === 'safari') {
+    $('#file_list_panel .panel-heading').html( $('#file_list_panel .panel-heading').html() +
+      '<small>For Safari, click to open a new tab. Note that only ' +
+      'media and document files can be downloaded in the new tab.</small>');
+  }
 });