Merge branch 'refs/heads/development'

Temasys · Aug 25, 2014 · e3f4da7 · e3f4da7
2 parents 05c735f + 91abe9e
commit e3f4da7
Show file tree

Hide file tree

Showing 27 changed files with 9,586 additions and 6,013 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -185,7 +185,7 @@ module.exports = function (grunt) {
 	grunt.registerTask('publish', [
 		'clean:production',
 		'concat:production',
-    'concat:complete',
+		'concat:complete',
 		'versionise',
 		'replace:dist',
 		'uglify:production_min',

diff --git a/README.md b/README.md
@@ -6,7 +6,10 @@ You'll need a Temasys Developer Account and an API key to use this. [Register he
 
 We've gone to great length to make this library work in as many browsers as possible. SkywayJS is build on top of [AdapterJS](https://github.com/Temasys/AdapterJS) and works with our [Temasys WebRTC Plugin](https://temasys.atlassian.net/wiki/display/TWPP/WebRTC+Plugins) even in Internet Explorer and Safari on Mac and PC.
 
-- [Introducing SkywayJS](https://temasys.atlassian.net/wiki/display/TPD/Introducing+SkywayJS) - The complete documentation and API docs
+- [Getting started](http://temasys.github.io/how-to/2014/08/08/Getting_started_with_WebRTC_and_SkywayJS/)
+- [SkywayJS API Docs](http://cdn.temasys.com.sg/skyway/skywayjs/0.3.x/doc/classes/Skyway.html)
+- [Introducing SkywayJS](http://temasys.atlassian.net/wiki/display/TPD/Introducing+SkywayJS)
+- [Developer Console](https://developer.temasys.com.sg) - Get your API key
 
 
 #### Need help or want something changed?
@@ -53,11 +56,11 @@ The skyway.js library development files
 
 #### tests
 
-Tape/Testling tests, currently work-in-progress
-
+- Run `test.sh <type> <param>` to test the trigger events of SkywayJS.
+ - To run a test, simply type: `test.sh test webrtc`
+ - To run a bot (that some tests requires), simply type: `test.sh bot webrtc`
+- Note that in some instances, if the test requires a bot, always run the bot first before running the test.
 
 ## License
 
-[APACHE 2.0](http://www.apache.org/licenses/LICENSE-2.0.html)
-
-
+[APACHE 2.0](http://www.apache.org/licenses/LICENSE-2.0.html)
diff --git a/demo/app/css/style.css b/demo/app/css/style.css
@@ -47,12 +47,13 @@
 }
 #credential_panel .panel-body .form-group .control-group {
 }
-video {
+video, object {
   background:#444;
   border:solid 2px #fff;
   padding:0!important;
 }
-video#local_video {
+video#local_video,
+object#local_video {
   right:15px;
   position:absolute;
   z-index:9999;
@@ -91,11 +92,12 @@ footer {
   }
 }
 @media screen and (max-width:991px){
-  video {
+  video, object {
    display:block;
    width:100%;
   }
-  video#local_video {
+  video#local_video,
+  object#local_video {
     right:0;
     position:static;
     display:block

diff --git a/demo/app/index.html b/demo/app/index.html
@@ -84,6 +84,8 @@
                   <tr>
                     <td>Display Name</td>
                     <td>
+                      <span id="isVideoMuted" class="glyphicon glyphicon-facetime-video"></span>
+                      <span id="isAudioMuted" class="glyphicon glyphicon-volume-up"></span>
                       <input id="display_user_info" type="text" style="width:100%;">
                       <button id="update_user_info_btn">Update</button>
                     </td>

diff --git a/demo/app/js/main.js b/demo/app/js/main.js
@@ -44,19 +44,20 @@ Demo.Elements = {
   chatLog: '#chat_log',
   chatBody: '#chat_body'
 };
-Demo.API.displayMsg = function (nick, msg, isPvt, isFile) {
+Demo.API.displayChatMessage = function (peerId, message, isFile) {
   var timestamp = new Date();
   var element = (isFile) ? Demo.Elements.fileLog : Demo.Elements.chatLog;
   var element_body = (isFile) ? Demo.Elements.fileBody : Demo.Elements.chatBody;
   $(element).append(
     '<div class="list-group-item active">' +
     '<p class="list-group-item-heading">' +
-    '<b>' + nick + '</b>' +
+    '<b>' + peerId + '</b>' +
     '<em title="' + timestamp.toString() + '">' + timestamp.getHours() +
     ':' + timestamp.getMinutes() + ':' + timestamp.getSeconds() +
     '</em></p>' +
     '<p class="list-group-item-text">' +
-    (isPvt?'<i>[pvt msg] ':'') + msg + (isPvt?'</i>':'') +
+    (message.isPrivate ? '<i>[pvt msg] ' : '') + message.content +
+    (message.isPrivate ? '</i>' : '') +
     '</p></div>'
   );
   $(element_body).animate({
@@ -83,31 +84,38 @@ Demo.Skyway.on('dataTransferState', function (state, transferId, peerId, transfe
   var percentage = transferInfo.percentage;
 
   switch (state) {
+  case Demo.Skyway.DATA_TRANSFER_STATE.UPLOAD_REQUEST :
+    var result = confirm('Accept file "' + name + '" [size: ' + size + '] from ' + peerId + '?');
+    Demo.Skyway.respondBlobRequest(peerId, result);
+    break;
   case Demo.Skyway.DATA_TRANSFER_STATE.UPLOAD_STARTED :
-    Demo.API.displayMsg(senderPeerId,
-      '<p><u><b>' + name + '</b></u><br><em>' + size + ' Bytes</em></p>' +
-      '<table id="' + transferId + '" class="table">' +
-      '<thead><tr><th colspan="2"><span class="glyphicon glyphicon-saved">' +
-      '</span> Uploaded Status</th></tr></thead>' +
-      '<tbody></tbody></table>' +
-      '<p><a id="'  + transferId + '_btn" class="btn btn-primary" ' +
-      'href="' + data + '" style="display: block;" download="' + name +
-      '">Download Uploaded File</a></p>',
-      false, true);
-    Demo.API.displayMsg(senderPeerId, 'I\'ve sent a File', false);
+    Demo.API.displayChatMessage(senderPeerId, {
+      content: '<p><u><b>' + name + '</b></u><br><em>' + size + ' Bytes</em></p>' +
+        '<table id="' + transferId + '" class="table">' +
+        '<thead><tr><th colspan="2"><span class="glyphicon glyphicon-saved">' +
+        '</span> Uploaded Status</th></tr></thead>' +
+        '<tbody></tbody></table>' +
+        '<p><a id="'  + transferId + '_btn" class="btn btn-primary" ' +
+        'href="' + data + '" style="display: block;" download="' + name +
+        '">Download Uploaded File</a></p>'
+      }, true);
+    Demo.API.displayChatMessage(senderPeerId, 'I\'ve sent a File', false);
     break;
   case Demo.Skyway.DATA_TRANSFER_STATE.DOWNLOAD_STARTED :
-    Demo.API.displayMsg(senderPeerId,
-      '<p><u><b>' + name + '</b></u><br><em>' + size + ' Bytes</em></p>' +
-      '<div class="progress progress-striped">' +
-      '<div id="' + 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="'  + transferId + '_btn" class="btn btn-primary" ' +
-      'href="#" style="display: none;" download="' + name + '">Download File</a></p>',
-      false, true);
-    Demo.API.displayMsg(senderPeerId, 'I\'ve sent you a File', false);
+    alert(JSON.stringify(transferInfo));
+    Demo.API.displayChatMessage(senderPeerId, {
+      content: '<p><u><b>' + name + '</b></u><br><em>' + size + ' Bytes</em></p>' +
+        '<div class="progress progress-striped">' +
+        '<div id="' + 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="'  + transferId + '_btn" class="btn btn-primary" ' +
+        'href="#" style="display: none;" download="' + name + '">Download File</a></p>'
+      }, true);
+    Demo.API.displayChatMessage(senderPeerId, {
+      content: 'I\'ve sent you a File'
+    });
     break;
   case Demo.Skyway.DATA_TRANSFER_STATE.UPLOADING :
     if ($(element).find('.' + peerId).width() < 1) {
@@ -124,7 +132,9 @@ Demo.Skyway.on('dataTransferState', function (state, transferId, peerId, transfe
     $(element).find('span').html(percentage + ' %');
     break;
   case Demo.Skyway.DATA_TRANSFER_STATE.UPLOAD_COMPLETED :
-    Demo.API.displayMsg(peerId, 'Peer ' + peerId + ' has received your file "' + name + '"');
+    Demo.API.displayChatMessage(peerId, {
+      content: 'Peer ' + peerId + ' has received your file "' + name + '"'
+    });
     $(element).find('.' + peerId).html('&#10003;');
     break;
   case Demo.Skyway.DATA_TRANSFER_STATE.DOWNLOAD_COMPLETED :
@@ -142,13 +152,24 @@ Demo.Skyway.on('dataTransferState', function (state, transferId, peerId, transfe
   }
 });
 //---------------------------------------------------
-Demo.Skyway.on('chatMessageReceived', function (msg, peerId, isPvt) {
-  Demo.API.displayMsg(peerId, msg, isPvt);
+Demo.Skyway.on('incomingMessage', function (message, peerId, isSelf) {
+  console.info(message);
+  if (message.isDataChannel) {
+    message.content = message.content.header + ': ' + message.content.content;
+  } else {
+    message.content = message.content.content;
+  }
+  Demo.API.displayChatMessage((isSelf) ? 'You' : peerId, message);
 });
 //---------------------------------------------------
 Demo.Skyway.on('peerJoined', function (peerId, peerInfo, isSelf){
+  console.info(peerInfo);
   if (isSelf) {
     $(Demo.Elements.displayUserId).html(peerId);
+    $('#isAudioMuted').css('color',
+      (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
+    $('#isVideoMuted').css('color',
+      (peerInfo.mediaStatus.videoMuted) ? 'red' : 'green');
     $(Demo.Elements.joinRoom).hide();
     $(Demo.Elements.leaveRoomBtn).show();
     $(Demo.Elements.presencePanel).show();
@@ -159,32 +180,38 @@ Demo.Skyway.on('peerJoined', function (peerId, peerInfo, isSelf){
       $(Demo.Elements.fileListPanel).show();
     }
   } else {
-    Demo.API.displayMsg('System', 'Peer ' + peerId + ' joined the room');
+    Demo.API.displayChatMessage('System', {
+      content: 'Peer ' + peerId + ' joined the room'
+    });
     var newListEntry = '<tr id="user' + peerId + '" class="badQuality">' +
-      '<td class="name">[' +
-      ((peerInfo.mediaStatus.audioMuted) ? 'NA' : 'A') +
-      '] ' + peerInfo.userData.displayName + '</td><td>';
+      '<td class="name">' + peerInfo.userData.displayName + '</td><td>';
     var titleList = [
       'Joined Room', 'Handshake: Welcome', 'Handshake: Offer',
       'Handshake: Answer', 'Candidate Generation state', 'ICE Connection state',
-      'Peer Connection state', 'Data Channel Connection state'
+      'Peer Connection state', 'Data Channel Connection state',
+      'MediaStream: Video', 'MediaStream: Audio'
     ];
     var glyphiconList = [
       'glyphicon-log-in', 'glyphicon-hand-right', 'glyphicon-hand-left',
       'glyphicon-thumbs-up', 'glyphicon-flash', 'glyphicon-magnet',
-      'glyphicon-user', 'glyphicon-link'
+      'glyphicon-user', 'glyphicon-link', 'glyphicon-facetime-video video',
+      'glyphicon-volume-up audio'
     ];
-    for( var i = 0; i < 8; i++) {
+    for( var i = 0; i < 10; i++) {
       newListEntry += '<span class="glyphicon ' + glyphiconList[i] + ' circle ' +
         i + '" title="' + titleList[i] + '"></span>&nbsp;&nbsp;&nbsp;';
     }
     newListEntry += '</td></tr>';
     $('#presence_list').append(newListEntry);
     $('#user' + peerId + ' .0').css('color','green');
+    $('#user' + peerId + ' .video').css('color',
+      (peerInfo.mediaStatus.videoMuted) ? 'red' : 'green');
+    $('#user' + peerId + ' .audio').css('color',
+      (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
   }
 });
 //---------------------------------------------------
-Demo.Skyway.on('addPeerStream', function (peerId, stream, isSelf){
+Demo.Skyway.on('incomingStream', function (peerId, stream, isSelf){
   if (!isSelf) {
     Demo.API.peers += 1;
     if( Demo.API.peers > 2 ){
@@ -243,13 +270,22 @@ Demo.Skyway.on('readyStateChange', function (state, error){
     $(Demo.Elements.updateUserInput).val(displayName);
     return;
   } else if (state === Demo.Skyway.READY_STATE_CHANGE.ERROR) {
-    alert(error);
+    for (var errorCode in Demo.Skyway.READY_STATE_CHANGE_ERROR) {
+      if (Demo.Skyway.READY_STATE_CHANGE_ERROR[errorCode] ===
+        error.errorCode) {
+        alert('An error occurred parsing and retrieving server code.\n' +
+          'Error was: ' + errorCode);
+        break;
+      }
+    }
   }
   $(Demo.Elements.channelStatus).show();
 });
 //---------------------------------------------------
 Demo.Skyway.on('peerLeft', function (peerId){
-  Demo.API.displayMsg('System', 'Peer ' + peerId + ' has left the room');
+  Demo.API.displayChatMessage('System', {
+    content: 'Peer ' + peerId + ' has left the room'
+  });
   Demo.API.peers -= 1;
   $('video').each( function(){
     if(this.peerId === peerId){
@@ -357,17 +393,21 @@ Demo.Skyway.on('dataChannelState', function (state, peerId) {
 //---------------------------------------------------
 Demo.Skyway.on('peerUpdated', function (peerId, peerInfo, isSelf) {
   if (isSelf) {
-    $(Demo.Elements.updateUserInput).val('[' +
-      ((peerInfo.mediaStatus.audioMuted) ? 'NA' : 'A') + '] ' +
-      peerInfo.userData.displayName);
+    $('#isAudioMuted').css('color',
+      (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
+    $('#isVideoMuted').css('color',
+      (peerInfo.mediaStatus.videoMuted) ? 'red' : 'green');
     if (peerInfo.mediaStatus.videoMuted) {
       $(Demo.Elements.localVideo)[0].src = '';
     } else {
       $(Demo.Elements.localVideo)[0].src = Demo.Streams.local;
     }
   } else {
-    $('#user' + peerId +' .name').html('[' + ((peerInfo.mediaStatus.audioMuted) ? 'NA' : 'A') +
-      '] ' + peerInfo.userData.displayName);
+    $('#user' + peerId + ' .video').css('color',
+      (peerInfo.mediaStatus.videoMuted) ? 'red' : 'green');
+    $('#user' + peerId + ' .audio').css('color',
+      (peerInfo.mediaStatus.audioMuted) ? 'red' : 'green');
+    $('#user' + peerId + ' .name').html(peerInfo.userData.displayName);
     $('video').each( function(){
       if ($(this)[0].peerId === peerId) {
         if (peerInfo.mediaStatus.videoMuted) {
@@ -380,12 +420,9 @@ Demo.Skyway.on('peerUpdated', function (peerId, peerInfo, isSelf) {
   }
 });
 //---------------------------------------------------
-Demo.Skyway.on('roomLock', function (status, isLocked, error) {
-  if (!status) {
-    alert(error);
-  } else {
-    $(Demo.Elements.displayLockStatus).html((isLocked) ? 'Locked' : 'Not Locked');
-  }
+Demo.Skyway.on('roomLock', function (isLocked, peerId, peerInfo, isSelf) {
+  $(Demo.Elements.displayLockStatus).html((isLocked) ? 'Locked' : 'Not Locked');
+  console.info(peerInfo);
 });
 //---------------------------------------------------
 Demo.Skyway.on('channelOpen', function () {
@@ -406,7 +443,9 @@ Demo.Skyway.on('channelMessage', function (){
 });
 //---------------------------------------------------
 Demo.Skyway.on('channelError', function (error) {
-  Demo.API.displayMsg('System', 'Channel Error:<br>' + error);
+  Demo.API.displayChatMessage('System', {
+    content: 'Channel Error:<br>' + error
+  });
 });
 /********************************************************
   DOM Events
@@ -418,8 +457,13 @@ $(document).ready(function () {
   $(Demo.Elements.chatInput).keyup(function(e) {
     e.preventDefault();
     if (e.keyCode === 13) {
-      //Demo.Skyway.sendDataChannelChatMsg( $(Demo.Elements.chatInput).val() );
-      Demo.Skyway.sendChatMessage( $(Demo.Elements.chatInput).val() );
+      Demo.Skyway.sendP2PMessage({
+        header: '[DC]',
+        content: $(Demo.Elements.chatInput).val()
+      });
+      Demo.Skyway.sendMessage({
+        content: $(Demo.Elements.chatInput).val()
+      });
       $(Demo.Elements.chatInput).val('');
     }
   });
@@ -455,14 +499,10 @@ $(document).ready(function () {
   });
   //---------------------------------------------------
   $(Demo.Elements.updateUserBtn).click(function () {
-    try {
-      var displayName = $(Demo.Elements.updateUserInput).val();
-      var userData = Demo.Skyway.getUserData();
-      userData.userData.displayName = displayName;
-      Demo.Skyway.setUserData(userData.userData);
-    } catch (err) {
-      alert('Invalid JSON provided');
-    }
+    var displayName = $(Demo.Elements.updateUserInput).val();
+    var userData = Demo.Skyway.getUserData();
+    userData.displayName = displayName;
+    Demo.Skyway.setUserData(userData);
   });
   //---------------------------------------------------
   $(Demo.Elements.lockBtn).click(function () {

diff --git a/demo/index.html b/demo/index.html
@@ -41,6 +41,28 @@ <h4>SkywayJS Documentation</h4>
           </p>
         </div>
       </div>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h4>Simple Conference room</h4>
+        </div>
+        <div class="panel-body">
+          <p>
+	        <em>This demo connect as <strong>Guest</strong> to your API test account.</em>
+	        You just need to fill app ID that you want to use for this demo at the top of the 
+	        simple-app/app.js file. No css is provided.
+	      </p>
+	      <hr>
+	      <ul>
+	        <li>Automatically fetch for cam.</li>
+	        <li>Automatically connects to 'demo' Room.</li>
+	        <li>Handle connection and disconnection of peers.</li>
+	        <li>Unlimited number of stream.</li>
+	      </ul>
+	      <p>
+	        <a href="./simple-app/" class="btn btn-primary">View Demo</a>
+	      </p>
+        </div>
+      </div>
       <div class="panel panel-default">
         <div class="panel-heading">
           <h4>Demo</h4>