additional changes

Author: dimaspirit

samples/webrtc/index.html

@@ -220,7 +220,7 @@ <h4>Call from <strong class="j-ic_initiator"></strong></h4>
     </script>
 
     <script type="text/template" id="device_not_found">
-        Error: devices (camera or microphone) are not found.
+        <span>Error: devices (camera or microphone) are not found.</span>
         &emsp;Login&nbsp;in&nbsp;as&nbsp;<%=name%>
         <button class='fw-link j-logout'>Logout</button>
     </script>

samples/webrtc/js/app.js

@@ -119,11 +119,14 @@
             }
         }
 
-        function checkAccessPermission(err) {
-          if(err && err.name === 'PermissionDeniedError' && !err.message) {
-            alert('Failed to get access to your camera or microphone. Please check your hardware configuration.');
-          } else if(err) {
-            alert(err.message);
+        function showErrorAccessPermission(error) {
+          var errorTitle = 'Error: ',
+            errorMsg = 'Failed to get access to your camera or microphone. Please check your hardware configuration.';
+
+          if(error && error.message) {
+            alert(errorTitle + error.message);
+          } else {
+            alert(errorTitle + errorMsg);
           }
         }
 
@@ -136,7 +139,7 @@
         /** Before use WebRTC checking WebRTC is avaible */
         if (!QB.webrtc) {
           qbApp.MsgBoard.update('webrtc_not_avaible');
-          alert(window.MESSAGES.webrtc_not_avaible);
+          alert('Error: ' + window.MESSAGES.webrtc_not_avaible);
           return;
         }
 
@@ -246,18 +249,14 @@
 
               app.currentSession.getUserMedia(mediaParams, function(err, stream) {
                 if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
-                  if(err && err.name === 'PermissionDeniedError' && !err.message) {
-                    alert('Failed to get access to your camera or microphone. Please check your hardware configuration.');
-                  } else if(err) {
-                    alert(err.message);
-                  }
+                  showErrorAccessPermission(err);
 
-                  qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
+                  qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name}, true);
                   app.currentSession.stop({});
                 } else {
                   app.currentSession.call({}, function(error) {
                     if(error) {
-                        checkAccessPermission(error);
+                        console.warn(error.detail);
                     } else {
                       var compiled = _.template( $('#callee_video').html() );
 
@@ -310,9 +309,9 @@
 
             app.currentSession.getUserMedia(mediaParams, function(err, stream) {
                 if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
-                  checkAccessPermission(err);
+                  showErrorAccessPermission(err);
 
-                  qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name});
+                  qbApp.MsgBoard.update('device_not_found', {name: app.caller.full_name}, true);
                   isDeviceAccess = false;
                   app.currentSession.stop({});
                 } else {

samples/webrtc/js/msgBoard.js

@@ -13,13 +13,20 @@
         /**
          * [updateMsg]
          * @param  {[String]} msg_title [key for MESSAGES object / id of template]
-         * @param  {[Objetc]} params    [custom params for compiled template]
+         * @param  {[Object]} params    [custom params for compiled template]
+         * @param  {[boolean]} isError  [flag is Error - add className to html]
          */
-        var updateMsg = function(msg_title, params) {
+        var updateMsg = function(msg_title, params, isError) {
             var msg = '',
-                msgFrag = document.createElement('div');
+                msgFrag = document.createElement('div'),
+                className = 'fw-inner';
+
+            if(isError) {
+              className += ' error';
+            }
+
+            msgFrag.className = className;
 
-            msgFrag.className = 'fw-inner';
             /**
              * In first we trying found msg in MESSAGES object
              * then tpl with id like msg_title
@@ -49,4 +56,4 @@
      */
     window.qbApp = window.qbApp || {};
     window.qbApp.MsgBoard = msgBoard;
-}(window, jQuery, _));
+}(window, jQuery, _));

samples/webrtc/styles.css

@@ -10,8 +10,8 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
     margin: 0;
@@ -31,7 +31,7 @@ body {
 .fw-link {
     display: inline-block;
     position: relative;
-    
+
     color: #025fca;
     /* reset */
     border: none;
@@ -172,6 +172,10 @@ body {
     color: #808080;
 }
 
+.msg_board .error span {
+  color: #ff2d55;
+}
+
 .msg_board .fw-link {
     padding: 0;
     margin: 0 0 0 10px;
@@ -201,7 +205,7 @@ body {
         z-index: 9;
     }
 
-/** 
+/**
  * USERS
  */
 .users {
@@ -280,18 +284,18 @@ body {
     display: block;
     width: 28px;
     height: 28px;
-    
+
     position: absolute;
     top: -3px;
     right: -3px;
-    
+
     background: url('images/ic_remove.svg') center no-repeat;
     background-size: cover;
     border-radius: 50%;
-    
+
     color: #fff;
     line-height: 16px;
-    
+
     box-shadow: inset 0 0 3px 3px rgba(255,255,255,1);
 
     visibility: hidden;
@@ -322,7 +326,7 @@ body {
     width: 100%;
     margin: 0 0 20px 0;
     padding: 10px 25px;
-    
+
     font-size: 18px;
     font-weight: 600;
     color: #025fca;
@@ -423,7 +427,7 @@ body {
     top: 8px;
     left: 10px;
     padding: 10px;
-    
+
     border-radius: 8px;
     background: rgba(0,0,0, .5);
     color: #fff;
@@ -452,12 +456,12 @@ body {
     display: inline-block;
     position: relative;
     width: 50%;
-    
+
     margin-bottom: 15px;
-    
+
     padding-top: 14px;
     padding-right: 10px;
-    
+
     vertical-align: top;
 
     font-size: 14px;
@@ -472,7 +476,7 @@ body {
     position: absolute;
     width: 100%;
     top: -14px;
-    
+
     font-size: 11px;
     text-transform: uppercase;
     text-align: center;
@@ -510,6 +514,3 @@ body {
         width: 20%;
     }
 }
-
-
-