add error messages for getUserMedia failing with mic

bigbluebutton-html5/imports/ui/components/audio/audio-modal/component.jsx

@@ -124,6 +124,7 @@ class AudioModal extends Component {
     this.state = {
       content: null,
       hasError: false,
+      errCode: null,
     };
 
     this.handleGoToAudioOptions = this.handleGoToAudioOptions.bind(this);
@@ -250,6 +251,7 @@ class AudioModal extends Component {
       if (err.type === 'MEDIA_ERROR') {
         this.setState({
           content: 'help',
+          errCode: err.code,
         });
       }
     });
@@ -441,9 +443,12 @@ class AudioModal extends Component {
   }
 
   renderHelp() {
+    const { errCode } = this.state;
+
     return (
       <Help
         handleBack={this.handleGoToAudioOptions}
+        errCode={errCode}
       />
     );
   }

bigbluebutton-html5/imports/ui/components/audio/help/component.jsx

@@ -11,34 +11,57 @@ const intlMessages = defineMessages({
   backLabel: {
     id: 'app.audio.backLabel',
     description: 'audio settings back button label',
-  }
-})
+  },
+  noSSL: {
+    id: 'app.audioModal.help.noSSL',
+    description: 'Text decription for domain not using https',
+  },
+  macNotAllowed: {
+    id: 'app.audioModal.help.macNotAllowed',
+    description: 'Text decription for mac needed to enable OS setting',
+  },
+});
 
 class Help extends Component {
   render() {
     const {
       intl,
       handleBack,
+      errCode,
     } = this.props;
 
+    let helpMessage = null;
+
+    switch (errCode) {
+      case 2:
+        helpMessage = intl.formatMessage(intlMessages.noSSL);
+        break;
+      case 3:
+        helpMessage = intl.formatMessage(intlMessages.macNotAllowed);
+        break;
+      default:
+        helpMessage = intl.formatMessage(intlMessages.descriptionHelp);
+        break;
+    }
+
     return (
       <span className={styles.help}>
         <div className={styles.text}>
-          { intl.formatMessage(intlMessages.descriptionHelp) }
+          { helpMessage }
         </div>
         <div className={styles.enterAudio}>
           <Button
             className={styles.backBtn}
             label={intl.formatMessage(intlMessages.backLabel)}
-            size={'md'}
-            color={'primary'}
+            size="md"
+            color="primary"
             onClick={handleBack}
             ghost
           />
         </div>
       </span>
-    )
+    );
   }
-};
+}
 
 export default injectIntl(Help);

bigbluebutton-html5/imports/ui/services/audio-manager/index.js

@@ -432,9 +432,19 @@ class AudioManager {
           errorMessage: error.message,
         },
       }, `Error getting microphone - {${error.name}: ${error.message}}`);
+
+      const disabledSysSetting = error.message.includes('Permission denied by system');
+      const isMac = navigator.platform.indexOf('Mac') != -1;
+      const noSSL = !window.location.protocol.includes('https');
+
+      let code = 1;
+      if (noSSL) code = 2;
+      if (isMac && disabledSysSetting) code = 3;
+
       return Promise.reject({
         type: 'MEDIA_ERROR',
         message: this.messages.error.MEDIA_ERROR,
+        code,
       });
     };
 

bigbluebutton-html5/private/locales/en.json

@@ -398,6 +398,8 @@
     "app.audioModal.settingsTitle": "Change your audio settings",
     "app.audioModal.helpTitle": "There was an issue with your media devices",
     "app.audioModal.helpText": "Did you give permission for access to your microphone?  Note that a dialog should appear when you try to join audio, asking for your media device permissions, please accept that in order to join the audio conference.  If that is not the case, try changing your microphone permissions in your browser's settings.",
+    "app.audioModal.help.noSSL": "The webpage must use HTTPS for microphone access to work. Please contact the administrator of your website",
+    "app.audioModal.help.macNotAllowed": "Check in your Mac system preferences > Security & Privacy > Privacy > Microphone, that it's checked.",
     "app.audioModal.audioDialTitle": "Join using your phone",
     "app.audioDial.audioDialDescription": "Dial",
     "app.audioDial.audioDialConfrenceText": "and enter the conference PIN number:",