Disable mic button if getUserMedia not available in browser

Issue #92.

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.1.3",
+      "version": "0.1.4",
       "dependencies": {
         "aes-js": "^3.1.2",
         "axios": "^0.21.0",
@@ -17,6 +17,7 @@
         "linkifyjs": "^2.1.9",
         "material-design-icons-iconfont": "^5.0.1",
         "matrix-js-sdk": "^9.4.1",
+        "md-gum-polyfill": "^1.0.0",
         "mic-recorder-to-mp3": "^2.2.2",
         "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
         "qrcode": "^1.4.4",
@@ -8461,6 +8462,11 @@
         "unhomoglyph": "^1.0.6"
       }
     },
+    "node_modules/md-gum-polyfill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/md-gum-polyfill/-/md-gum-polyfill-1.0.0.tgz",
+      "integrity": "sha1-gppRLSXtAxjAxJqWEEi1BfZwots="
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -22104,6 +22110,11 @@
         "unhomoglyph": "^1.0.6"
       }
     },
+    "md-gum-polyfill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/md-gum-polyfill/-/md-gum-polyfill-1.0.0.tgz",
+      "integrity": "sha1-gppRLSXtAxjAxJqWEEi1BfZwots="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -18,6 +18,7 @@
     "linkifyjs": "^2.1.9",
     "material-design-icons-iconfont": "^5.0.1",
     "matrix-js-sdk": "^9.4.1",
+    "md-gum-polyfill": "^1.0.0",
     "mic-recorder-to-mp3": "^2.2.2",
     "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
     "qrcode": "^1.4.4",

src/components/Chat.vue

@@ -163,6 +163,7 @@
             elevation="0"
             v-blur
             style="z-index: 10"
+            :disabled="!canRecordAudio"
             v-longTap:250="[showRecordingUI, startRecording]"
           >
             <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
@@ -517,6 +518,9 @@ export default {
       }
       return "top:" + top + "px;left:" + left + "px";
     },
+    canRecordAudio() {
+      return util.browserCanRecordAudio();
+    }
   },
 
   watch: {

src/components/VoiceRecorder.vue

@@ -139,6 +139,7 @@ const State = {
 };
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
+require('md-gum-polyfill');
 
 export default {
   name: "VoiceRecorder",

src/plugins/utils.js

@@ -11,6 +11,16 @@ dayjs.extend(localizedFormat)
 var duration = require('dayjs/plugin/duration')
 dayjs.extend(duration);
 
+// Store info about getUserMedia BEFORE we aply polyfill(s)!
+var _browserCanRecordAudioF = function() {
+    var legacyGetUserMedia = (navigator.getUserMedia ||
+        navigator.webkitGetUserMedia ||
+        navigator.mozGetUserMedia ||
+        navigator.msGetUserMedia);
+    return legacyGetUserMedia !== undefined || (navigator.mediaDevices && navigator.mediaDevices.getUserMedia !== undefined);
+}
+var _browserCanRecordAudio = _browserCanRecordAudioF();
+
 class Util {
     getAttachment(matrixClient, event, progressCallback) {
         return new Promise((resolve, reject) => {
@@ -507,6 +517,10 @@ class Util {
         var then = dayjs(timestamp);
         return then.format('lll');
     }
+
+    browserCanRecordAudio() {
+        return _browserCanRecordAudio;
+    }
 }
 export default new Util();