Updates to video conferencing sample (#340)

* full-screen feature for video conferencing sample

* ability to set video res for video-conferencing sample via 'videores' query param; better config options

* quickblox-multiparty-video-conferencing-client-0.2.1.min.js

Author: soulfly

samples/video_conferencing/images/icon-full-mode-on.png

@@ -207,6 +207,7 @@ <h5 class="col-md-12 col-sm-12 col-xs-12 push">Add more user (select to add):</h
 <script src="js/video/soundmeter.js"></script>
 <script src="js/helpers.js"></script>
 <script src="js/connection.js"></script>
+<script src="js/config/apps.js"></script>
 <script src="js/config/main.js"></script>
 <script src="js/messages.js"></script>
 <script src="js/ui_helpers.js"></script>
@@ -218,7 +219,7 @@ <h5 class="col-md-12 col-sm-12 col-xs-12 push">Add more user (select to add):</h
 <script src="libs/spin.min.js"></script>
 <script src="libs/jquery.blockUI.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/5.0.1/adapter.min.js" ></script>
-<script src="libs/quickblox-multiparty-video-conferencing-client-0.2.0.min.js"></script>
+<script src="libs/quickblox-multiparty-video-conferencing-client-0.2.1.min.js"></script>
 <script src="js/video/core.js"></script>
 <script src="js/video/ui_helpers.js"></script>
 

samples/video_conferencing/index.html

@@ -0,0 +1,38 @@
+var DEMO_APPS = {
+  "qa": {
+    endpoints: {
+      api: "api.quickblox.com",
+      chat: "chat.quickblox.com"
+    },
+    credentials: {
+      'appId': 56252,
+      'authKey': 'yPJfas45qY3jbgq',
+      'authSecret': 'qTFM-eN4vN8rmAw'
+    },
+    demoChatDialogId: ""
+  },
+  "VideoRecordingDemoApp1": {
+    endpoints: {
+      api: "apirc.quickblox.com",
+      chat: "chatrc.quickblox.com"
+    },
+    credentials: {
+      'appId': 67897,
+      'authKey': 'JEMb6GKcrrzOBTP',
+      'authSecret': 'h2UxCPHf7Oqk8Pw'
+    },
+    demoChatDialogId: "5afa823c12685f101adaf628"
+  },
+  "VideoRecordingDemoApp2": {
+    endpoints: {
+      api: "apirc.quickblox.com",
+      chat: "chatrc.quickblox.com"
+    },
+    credentials: {
+      'appId': 67898,
+      'authKey': 'kAgbhA9Q99UtygB',
+      'authSecret': 'DxgzQyyOgaYaLJL'
+    },
+    demoChatDialogId: "5afa825512685f101adaf62a"
+  }
+}

samples/video_conferencing/js/config/apps.js

@@ -1,33 +1,43 @@
-var QBCONFIG = {
-    endpoints: {
-        api: "api.quickblox.com", // set custom API endpoint
-        chat: "chat.quickblox.com" // set custom Chat endpoint
-    },
-    debug: {
-        mode: 1,
-        file: null
-    }
-};
-
-var QBApp = {
-    'prod': {
-        'appId': 56252,
-        'authKey': 'yPJfas45qY3jbgq',
-        'authSecret': 'qTFM-eN4vN8rmAw'
-    }
-};
-
+// Sample version
+//
 var SAMPLE_VER = 78;
 $('.j-version').text('v.' + SAMPLE_VER);
 
-var QBAppCreds = QBApp.prod;
-
-
+// WebRTC server endpoint
+//
 var MULTIPARTY_SERVER = getQueryVar('server');
 if(!MULTIPARTY_SERVER){
   var noServerError = "The 'server' query parameter is not set. You need to provide it in order to run the sample. Multi-conference server is available only for Enterprise plans. Please refer to https://quickblox.com/developers/EnterpriseFeatures for more information and contacts."
   alert(noServerError);
   throw noServerError;
-
 }
 console.info("server var: ", MULTIPARTY_SERVER);
+
+// Demo app credentials
+//
+var QB_APP = getQueryVar('app');
+console.info("demo app: ", QB_APP);
+var appCreds;
+if(!QB_APP){
+  appCreds = DEMO_APPS.qa;
+}else{
+  appCreds = DEMO_APPS[QB_APP];
+}
+
+var QBCONFIG = {
+    endpoints: appCreds.endpoints,
+    debug: {
+        mode: 1,
+        file: null
+    }
+};
+
+var QBAppCreds = appCreds.credentials;
+
+var DEMO_DIALOG_ID = appCreds.demoChatDialogId;
+
+var VIDEO_RESOLUTION = getQueryVar('videores');
+if(!VIDEO_RESOLUTION){
+  VIDEO_RESOLUTION = "lowres";
+}
+console.info("video resolution: ", VIDEO_RESOLUTION);

samples/video_conferencing/js/config/main.js

@@ -1,4 +1,4 @@
-var currentDialog = {};
+var currentDialog;
 var opponentId;
 
 var dialogsMessages = [];

samples/video_conferencing/js/messages.js

@@ -16,7 +16,7 @@ function initialise(){
         iceServers: [{urls: "stun:stun.l.google.com:19302"},
                      {urls: "turn:turn.quickblox.com:3478?transport=udp", username: "quickblox", credential: "baccb97ba2d92d71e26eb9886da5f1e0"},
                      {urls: "turn:turn.quickblox.com:3478?transport=tcp", username: "quickblox", credential: "baccb97ba2d92d71e26eb9886da5f1e0"}],
-        video: {quality: 'lowres', frameRate: 25}
+        video: {quality: VIDEO_RESOLUTION}
     };
     client = new QBVideoConferencingClient(config);
 
@@ -274,6 +274,11 @@ function clickJoinOrLeaveVideoChat(isStopByInitiator, isStopByBadNetwork) {
 
     // Start
     } else {
+        if(!currentDialog){
+          bootbox.alert("Please create a chat dialog first");
+          return;
+        }
+
         $('#call_btn').prop('disabled', "disabled");
 
         // Init Video engine
@@ -302,7 +307,7 @@ function clickJoinOrLeaveVideoChat(isStopByInitiator, isStopByBadNetwork) {
                                 addFeedView(currentUser.id, true);
 
                                 // join video chat
-                                var roomIdToJoin = dialogIdForVideoRecording();
+                                var roomIdToJoin = currentDialog._id;
 
                                 client.join(roomIdToJoin, currentUser.id, isAudioCallOnly, {
                                     success: function() {
@@ -462,15 +467,30 @@ function toggleMute() {
     console.info("Now is muted=" + muted);
 }
 
+function toggleFullscreen(){
+  var mediaScreen = document.getElementById("myvideo");
+  enableFullScreen(mediaScreen);
+}
+
 function toggleRemoteMute(event) {
     var userId = parseInt(event.target.id.replace("mute_", ""));
     var muted = client.toggleRemoteAudioMute(userId);
     $("#" + event.target.id).html(muted ? "Unmute" : "Mute");
     console.info("Now remote is muted=" + muted);
 }
 
+function toggleRemoteFullscreen(event){
+  console.log(event);
+  console.log(event.target.id);
+    var userId = parseInt(event.target.id.replace("fullscreen_", ""));
+    console.log(userId);
+    var mediaScreen = document.getElementById("remotevideo"+userId);
+    console.log(mediaScreen)
+    enableFullScreen(mediaScreen);
+}
+
 function actionsForTheInitiator() {
-    client.listOnlineParticipants(dialogIdForVideoRecording(), {
+    client.listOnlineParticipants(currentDialog._id, {
         success: function(participants){
             console.log("listOnlineParticipants, participants: ", participants);
             if (!participants) {
@@ -592,15 +612,26 @@ function stopAllICEFailedTimers(){
   iceFailedTimers = [];
 }
 
-
-function dialogIdForVideoRecording(){
-  if(currentDialog.name == "RecordingDemoRoom"){
-    roomIdToJoin = "5ab234c01cc0c00e62c96960";
-  }else{
-    roomIdToJoin = currentDialog._id;
+function enableFullScreen(mediaScreen){
+  if (mediaScreen.requestFullscreen) {
+    if (document.fullScreenElement) {
+        document.cancelFullScreen();
+    } else {
+        mediaScreen.requestFullscreen();
+    }
+  } else if (mediaScreen.mozRequestFullScreen) {
+    if (document.mozFullScreenElement) {
+        document.mozCancelFullScreen();
+    } else {
+        mediaScreen.mozRequestFullScreen();
+    }
+  } else if (mediaScreen.webkitRequestFullscreen) {
+    if (document.webkitFullscreenElement) {
+        document.webkitCancelFullScreen();
+    } else {
+        mediaScreen.webkitRequestFullscreen();
+    }
   }
-
-  return roomIdToJoin;
 }
 
 // function ICE_RESTART_LOCAL_TEST(){

samples/video_conferencing/js/video/core.js

@@ -76,10 +76,16 @@ function prepareLocalVideoUI() {
 
     $('#videolocal').append('<video class="rounded centered" id="myvideo" width="100%" height="100%" autoplay muted="muted"/>');
 
+    // Add a 'video full screen' button
+    $('#videolocal').append('<button class="btn btn-default btn-xs" id="fullscreen" style="position: absolute; top: 0px; right: 0px; margin-top: 28px; margin-right: 20px; background-color: #ccc;"> <img src="images/icon-full-mode-on.png" /></button>');
+    $('#fullscreen').click(toggleFullscreen);
+
     // Add a 'mute' button
     $('#videolocal').append('<button class="btn btn-warning btn-xs" id="mute" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;">Mute</button>');
     $('#mute').click(toggleMute);
     // $('#mute').click(ICE_RESTART_LOCAL_TEST);
+    //
+    //icon-full-mode-on.png
 }
 
 function prepareRemoteVideoUI(userId) {
@@ -89,13 +95,17 @@ function prepareRemoteVideoUI(userId) {
     }
     if(!isAudioCallOnly){
       $('#videoremote' + userId).append(
-          '<span class="label label-primary hide" id="curres' + userId + '" style="position: absolute; top: 17px; right: 0px; margin: 15px;"></span>' +
+          '<span class="label label-primary hide" id="curres' + userId + '" style="position: absolute; top: 17px; left: 10px; margin: 15px;"></span>' +
           '<span class="label label-info hide" id="curbitrate' + userId + '" style="position: absolute; bottom: 0px; right: 0px; margin: 15px;"></span>'
       );
     }
     //
     $('#videoremote' + userId).append('<meter max="1" value="0" id="audioStreamVolume' + userId + '" style="position: absolute; bottom: 10px; left: 0px; right: 0px; margin: 34px; color: #0f9d58; width: 65%;"></meter>');
 
+    // Add a 'video full screen' button
+    $('#videoremote' + userId).append('<button class="btn btn-default btn-xs" id="fullscreen_' + userId + '" style="position: absolute; top: 0px; right: 0px; margin-top: 28px; margin-right: 20px; background-color: #ccc;"> <img src="images/icon-full-mode-on.png" id="fullscreen_' + userId + '" /></button>');
+    $('#fullscreen_' + userId).click(toggleRemoteFullscreen);
+
     // Add a 'mute' button
     $('#videoremote' + userId).append('<button class="btn btn-warning btn-xs" id="mute_' + userId + '" style="position: absolute; bottom: 0px; left: 0px; margin: 15px;">Mute</button>');
     $('#mute_' + userId).click(toggleRemoteMute);