Merge pull request #146 from Temasys/0.6.x

Release 0.6.3

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "skylinkjs",
   "description": "WebRTC real-time video conversation library",
-  "version": "0.6.0",
+  "version": "0.6.3",
   "homepage": "https://temasys.github.io/",
   "author": {
     "name": "Temasys Communications Pte. Ltd.",

demo/README.md

@@ -98,12 +98,23 @@ In this demo, you can find an example of the overview of all types of stream set
 ##### Events used
 `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.
 
 ##### Functionalities covered
 `init()`, `joinRoom()`, `on()`, `getPeerInfo()`
 
 ##### Events used
-`mediaAccessSuccess`, `incomingStream`, `streamEnded`, `peerLeft`
+`mediaAccessSuccess`, `incomingStream`, `streamEnded`, `peerLeft`
+
+### demo/privileged
+In this demo, you can find an example of how to utilize the privileged key concept for different types of clients.
+
+##### Functionalities covered
+`getPeers()`, `introducePeer()`
+
+##### Events used
+`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".

demo/app/js/main.js

@@ -13,7 +13,7 @@ var _peerId = null;
 
 var selectedPeers = [];
 
-//Demo.Skylink.setLogLevel(4);
+Demo.Skylink.setLogLevel(4);
 
 
 Demo.Methods.displayFileItemHTML = function (content) {
@@ -468,12 +468,7 @@ Demo.Skylink.init(config, function (error, success) {
     Demo.Skylink.joinRoom({
       userData: displayName,
       audio: { stereo: true },
-      video: {
-        resolution: {
-          width: 1280,
-          height: 720
-        }
-      }
+      video: true
     });
   }
 });

demo/index.html

@@ -284,12 +284,41 @@ <h4>Gridster Webrtc</h4>
         </div>
 
         <p>
-          <a href="./gridsterrtc/index.html" class="btn btn-primary">View Demo</a>
+          <a href="./gridster-integration/index.html" class="btn btn-primary">View Demo</a>
         </p>
         </div>
       </div>
       <!-------------------------------------------------------------->
-
+      <div class="col-md-4 panel panel-default">
+        <div class="panel-heading">
+          <h4>Privileged use case</h4>
+        </div>
+        <div class="panel-body">
+          <p>
+          <em>This demo presents the use of privileged concept</em>
+        </p>
+        <hr>
+        <ul>
+          <li>Retrieve list of unprivileged peers under the same realm</li>
+          <li>Retrieve list of all peers under the same realm</li>
+          <li>Introduce peers together</li>
+          <li>Customize whether peer is autoIntroduce / isPrivileged through dev console</li>
+        </ul>
+        <div class="panel panel-info">
+          <div class="panel-heading">Difficulty</div>
+          <div class="progress" style="height:20px;margin:5px;">
+            <div class="progress-bar progress-bar-warning"
+              role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="10" style="width:80%;">
+              Hard
+            </div>
+          </div>
+        </div>
+
+        <p>
+          <a href="./privileged/index.html" class="btn btn-primary">View Demo</a>
+        </p>
+        </div>
+      </div>
       <!-------------------------------------------------------------->
       <div class="col-md-4 panel panel-default">
         <div class="panel-heading">

demo/privileged/auto-priv/css/style.css

@@ -0,0 +1,136 @@
+.navbar-white {
+  background:#fff;
+}
+#get_user_media_btn,
+#join_room_btn,
+#leave_room_btn,
+#presence_panel,
+#file_panel,
+#file_list_panel {
+  display:none;
+}
+.circle {
+  color:red;
+  border:solid 1px;
+  border-radius:50%;
+  padding:5px;
+  margin-bottom:7px;
+  font-size:10px;
+}
+.table {
+  font-size:12px;
+  word-break:break-word;
+}
+.table td:first-child {
+  font-weight:bold;
+  width:38%;
+}
+.table.upload-table td:first-child {
+  font-weight:normal;
+  width:85%;
+}
+#credential_panel {
+  margin-bottom:0;
+  border-left:0;
+  border-right:0;
+  box-shadow:none;
+  border-radius:0;
+}
+#credential_panel .panel-body {
+  padding-bottom:0;
+}
+#credential_panel .panel-body .form-group {
+  text-align:left;
+}
+#credential_panel .panel-body .form-group .title,
+#credential_panel .panel-body .form-group .control-group {
+  display:inline-block;
+  vertical-align:top;
+}
+#credential_panel .panel-body .form-group .title {
+  margin-top:0;
+  float:left;
+}
+#credential_panel .panel-body .form-group .title span {
+  display:block;
+  margin-bottom:5px;
+}
+#credential_panel .panel-body .form-group .control-group {
+}
+video, object {
+  background:#444;
+  border:solid 2px #fff;
+  padding:0!important;
+}
+video#local_video,
+object#local_video {
+  right:15px;
+  position:absolute;
+  z-index:9999;
+}
+#file_body {
+  max-height:200px;
+  overflow-y:auto;
+}
+#chat_panel {
+  margin:15px 0 45px;
+}
+#chat_body {
+  max-height:200px;
+  overflow-y:auto;
+}
+.list-group-item-heading em {
+  float:right;
+  font-style:normal;
+  color:#888;
+}
+.chat-item {
+  border:0;
+  padding:0 0 15px 0;
+}
+.chat-item img {
+  width: 250px;
+}
+#chat_input {
+  display:block;
+  width:100%;
+}
+.control_settings .col {
+  margin: 7px 0;
+}
+#leave_room_btn {
+  margin-left:12px;
+}
+.control_settings .btn-group {
+  width: 100%;
+}
+footer {
+  background:#f5f5f5;
+  padding:12px 0 0;
+  border-top:solid 1px #e0e0e0;
+}
+.selected-users em {
+  font-style: normal;
+  font-size: 12px;
+  margin-right: 12px;
+}
+@media screen and (max-width:1999px){
+  #credential_panel .panel-body {
+    margin-bottom:15px;
+  }
+  #credential_panel .panel-body button {
+    margin-left:14px;
+  }
+}
+@media screen and (max-width:991px){
+  video, object {
+   display:block;
+   width:100%;
+  }
+  video#local_video,
+  object#local_video {
+    right:0;
+    position:static;
+    display:block
+  }
+}