Merge pull request #5959 from matrix-org/travis/voicemessages/permissions

Handle no/blocked microphones in voice messages

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -27,6 +27,9 @@ import LiveRecordingClock from "../voice_messages/LiveRecordingClock";
 import {VoiceRecordingStore} from "../../../stores/VoiceRecordingStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import RecordingPlayback from "../voice_messages/RecordingPlayback";
+import Modal from "../../../Modal";
+import ErrorDialog from "../dialogs/ErrorDialog";
+import CallMediaHandler from "../../../CallMediaHandler";
 
 interface IProps {
     room: Room;
@@ -115,6 +118,42 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             await this.state.recorder.stop();
             return;
         }
+
+        // The "microphone access error" dialogs are used a lot, so let's functionify them
+        const accessError = () => {
+            Modal.createTrackedDialog('Microphone Access Error', '', ErrorDialog, {
+                title: _t("Unable to access your microphone"),
+                description: <>
+                    <p>{_t(
+                        "We were unable to access your microphone. Please check your browser settings and try again.",
+                    )}</p>
+                </>,
+            });
+        };
+
+        // Do a sanity test to ensure we're about to grab a valid microphone reference. Things might
+        // change between this and recording, but at least we will have tried.
+        try {
+            const devices = await CallMediaHandler.getDevices();
+            if (!devices?.['audioinput']?.length) {
+                Modal.createTrackedDialog('No Microphone Error', '', ErrorDialog, {
+                    title: _t("No microphone found"),
+                    description: <>
+                        <p>{_t(
+                            "We didn't find a microphone on your device. Please check your settings and try again.",
+                        )}</p>
+                    </>,
+                });
+                return;
+            }
+            // else we probably have a device that is good enough
+        } catch (e) {
+            console.error("Error getting devices: ", e);
+            accessError();
+            return;
+        }
+
+        try {
             const recorder = VoiceRecordingStore.instance.startRecording();
             await recorder.start();
 
@@ -125,6 +164,13 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             });
 
             this.setState({recorder, recordingPhase: RecordingState.Started});
+        } catch (e) {
+            console.error("Error starting recording: ", e);
+            accessError();
+
+            // noinspection ES6MissingAwait - if this goes wrong we don't want it to affect the call stack
+            VoiceRecordingStore.instance.disposeRecording();
+        }
     };
 
     private renderWaveformArea(): ReactNode {

src/i18n/strings/en_EN.json

@@ -1649,6 +1649,10 @@
     "Invited by %(sender)s": "Invited by %(sender)s",
     "Jump to first unread message.": "Jump to first unread message.",
     "Mark all as read": "Mark all as read",
+    "Unable to access your microphone": "Unable to access your microphone",
+    "We were unable to access your microphone. Please check your browser settings and try again.": "We were unable to access your microphone. Please check your browser settings and try again.",
+    "No microphone found": "No microphone found",
+    "We didn't find a microphone on your device. Please check your settings and try again.": "We didn't find a microphone on your device. Please check your settings and try again.",
     "Record a voice message": "Record a voice message",
     "Stop the recording": "Stop the recording",
     "Delete recording": "Delete recording",