webrtc sample issues (#298)

* Recording time 10 min. max

* QBWEBSDK-181

* clean up

Author: dimaspirit

quickblox.min.js

@@ -279,6 +279,11 @@ <h4 class="caller__name">
 
                     <button class="caller__frames_acts_btn_record j-record" alt="record video">
                     </button>
+
+                    <p class="sample_info">
+                        The recording time is 10 minutes maximum.
+                        Check out a <a href="https://github.com/QuickBlox/javascript-media-recorder" target="_blank">recorder</a> if want more.
+                    </p>
                 </div>
 
                 <div class="caller__frames_fl">

samples/webrtc/index.html

@@ -9,14 +9,19 @@
         };
 
         var recorder = null;
+        var recorderTimeoutID;
 
         var recorderOpts = {
                 onstart: function onStartRecord() {
-                    console.log('[QB Recorder] onStartRecording');
                     $('.j-record').addClass('active');
+
+                    recorderTimeoutID = setTimeout(function() {
+                        if(recorder) {
+                            recorder.stop();
+                        }
+                    }, 600000); // 10min
                 },
                 onstop: function(blob) {
-                    console.log('[QB Recorder] onStopRecording');
                     $('.j-record').removeClass('active');
 
                     var down = confirm('Do you want to download video?');
@@ -26,6 +31,7 @@
                     }
 
                     recorder = null;
+                    clearTimeout(recorderTimeoutID);
                 },
                 onerror: function(error) {
                     console.error('Recorder error', error);
@@ -73,7 +79,7 @@
         var remoteStreamCounter = 0;
 
         function closeConn(userId) {
-            if(recorder) {
+            if(recorder && recorderTimeoutID) {
                 recorder.stop();
             }
 
@@ -222,14 +228,20 @@
                     return [item.name, item.value.trim()];
                 }));
 
+            /** Check internet connection */
+            if(!window.navigator.onLine) {
+                alert(CONFIG.MESSAGES['no_internet']);
+                return false;
+            }
+
             if(localStorage.getItem('isAuth')) {
                 $('#already_auth').modal();
                 return false;
             }
 
             $form.addClass('join-wait');
 
-            app.helpers.join(data).then(function (user) {
+            app.helpers.join(data).then(function(user) {
                 app.caller = user;
 
                 QB.chat.connect({
@@ -329,8 +341,9 @@
             if ($btn.hasClass('hangup')) {
                 if(!_.isEmpty(app.currentSession)) {
 
-                    if(recorder) {
+                    if(recorder && recorderTimeoutID) {
                         recorder.stop();
+
                     }
 
                     app.currentSession.stop({});

samples/webrtc/js/app.js

@@ -485,7 +485,7 @@ b {
 }
 
 .caller__ctrl{
-    height: 100px;
+    height: 90px;
 }
 
 .caller__ctrl_btn {
@@ -523,6 +523,9 @@ b {
         background: #ff2d55;
         color: #fff;
     }
+    .caller__ctrl_btn:last-child {
+        margin-bottom: 0;
+    }
 
 .caller__name {
     margin: 20px 0 0 0;
@@ -586,7 +589,7 @@ b {
     }
 
 .caller__frames_fl {
-    margin: 30px 0 10px 0;
+    margin: 15px 0 10px 0;
 }
 
 /**
@@ -684,3 +687,10 @@ b {
     font-size: 15px;
     line-height: 1.2;
 }
+
+.sample_info {
+    margin: 5px 0 0 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #808080;
+}