Use RecordRTC as audio recorder

Old one does not work anymore. Maybe this is a good option?

src/components/VoiceRecorder.vue

@@ -171,9 +171,7 @@ const State = {
 import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
 import "md-gum-polyfill";
-import MicRecorder from "mic-recorder-to-mp3";
-import ysFixWebmDuration from "fix-webm-duration";
-//import { duration } from "dayjs";
+import { RecordRTCPromisesHandler } from "recordrtc";
 import recordStop from "@/assets/sounds/record_stop.mp3";
 
 export default {
@@ -375,13 +373,14 @@ export default {
       event.stopPropagation();
     },
 
-    startRecording() {
+    async startRecording() {
       // Start recording. Browser will request permission to use your microphone.
-      this.recorder = new MicRecorder({
-        bitRate: 128,
+      let stream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
+      this.recorder = new RecordRTCPromisesHandler(stream, {
+        type: 'audio'
       });
       this.recorder
-        .start()
+        .startRecording()
         .then(() => {
           this.state = State.RECORDING;
           this.recordStartedAt = Date.now();
@@ -426,7 +425,7 @@ export default {
     },
     cancelRecording() {
       if(this.recorder) {
-        this.recorder.stop();
+        this.recorder.stopRecording();
         this.recorder = null;
       }
       this.releaseWakeLock();
@@ -475,14 +474,13 @@ export default {
     getFile(send) {
       const duration = Date.now() - this.recordStartedAt;
       this.recorder
-        .stop()
-        .getMp3()
-        .then(([buffer, blob]) => {
-          // do what ever you want with buffer and blob
-          // Example: Create a mp3 file and play
+        .stopRecording()
+        .then(() => this.recorder.getBlob())
+        .then((blob) => {
+          console.log("BLOB IS", blob);
           this.recordedFile = new File(
-            buffer,
-            util.formatRecordStartTime(this.recordStartedAt) + ".mp3",
+            [blob],
+            util.formatRecordStartTime(this.recordStartedAt) + ".webm",
             {
               type: blob.type,
               lastModified: Date.now(),
@@ -515,25 +513,6 @@ export default {
       }
     },
 
-    /*
-     * There is an issue with browsers not setting correct metadata in the generated webm file.
-     * See here: https://bugs.chromium.org/p/chromium/issues/detail?id=642012
-     * Use fix-webm-duration package to try to update the cues section.
-     */
-    async correctMetadata(blob, duration) {
-      return new Promise((resolve, reject) => {
-        try {
-          ysFixWebmDuration(blob, duration, function(fixedBlob) {
-            const b = new Blob([fixedBlob], { type: blob.type });
-            resolve(b);
-          });
-        } catch (err) {
-          console.error(err);
-          reject(err);
-        }
-      });
-    },
-
     /**
      * Show import picker to select file
      */