Switch package for webm duration fixing

Issue #95. This is to set duration on recorded audio, otherwise clients will not know how long the audio file is.

package-lock.json

@@ -11,7 +11,7 @@
         "axios": "^0.21.0",
         "core-js": "^3.6.5",
         "dayjs": "^1.10.3",
-        "ebml": "^3.0.0",
+        "fix-webm-duration": "^1.0.0",
         "intersection-observer": "^0.11.0",
         "js-sha256": "^0.9.0",
         "json-web-key": "^0.4.0",
@@ -3285,14 +3285,6 @@
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
     },
-    "node_modules/buffers": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-      "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s=",
-      "engines": {
-        "node": ">=0.2.0"
-      }
-    },
     "node_modules/builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -5343,31 +5335,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/ebml": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ebml/-/ebml-3.0.0.tgz",
-      "integrity": "sha512-Q6C1u4/TX1nYipT9HNIopp95YyyyI0zs1GXdNRKO7XL7k+oo+ZtDc1CaJjpCdmlLxWsnlKBOXJCXkYU0K/Anlg==",
-      "dependencies": {
-        "buffers": "^0.1.1",
-        "debug": "~3.1.0"
-      },
-      "engines": {
-        "node": ">= 6.4"
-      }
-    },
-    "node_modules/ebml/node_modules/debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/ebml/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -6406,6 +6373,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fix-webm-duration": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.0.tgz",
+      "integrity": "sha512-fwYAr+wYZoeHNPSpHXdNFqUs0EpwAkNzmDM6bHPpVeVN8NNB1jipvUssC4kjhUMb0fML266nEGii3NXHL/eWJw=="
+    },
     "node_modules/flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@@ -18262,11 +18234,6 @@
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
     },
-    "buffers": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
-      "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s="
-    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -19919,30 +19886,6 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
-    "ebml": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ebml/-/ebml-3.0.0.tgz",
-      "integrity": "sha512-Q6C1u4/TX1nYipT9HNIopp95YyyyI0zs1GXdNRKO7XL7k+oo+ZtDc1CaJjpCdmlLxWsnlKBOXJCXkYU0K/Anlg==",
-      "requires": {
-        "buffers": "^0.1.1",
-        "debug": "~3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
-      }
-    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -20767,6 +20710,11 @@
         "path-exists": "^4.0.0"
       }
     },
+    "fix-webm-duration": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fix-webm-duration/-/fix-webm-duration-1.0.0.tgz",
+      "integrity": "sha512-fwYAr+wYZoeHNPSpHXdNFqUs0EpwAkNzmDM6bHPpVeVN8NNB1jipvUssC4kjhUMb0fML266nEGii3NXHL/eWJw=="
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",

package.json

@@ -12,7 +12,7 @@
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.3",
-    "ebml": "^3.0.0",
+    "fix-webm-duration": "^1.0.0",
     "intersection-observer": "^0.11.0",
     "js-sha256": "^0.9.0",
     "json-web-key": "^0.4.0",

src/components/VoiceRecorder.vue

@@ -147,7 +147,7 @@ import util from "../plugins/utils";
 import VoiceRecorderLock from "./VoiceRecorderLock";
 require("md-gum-polyfill");
 import RecordRTC from "recordrtc";
-import {Decoder, tools, Reader} from 'ebml';
+import ysFixWebmDuration from "fix-webm-duration";
 
 export default {
   name: "VoiceRecorder",
@@ -385,26 +385,25 @@ export default {
       this.$emit("file", { file: this.recordedFile });
     },
     getFile(send) {
-      this.recorder.stopRecording(
+      const duration = Date.now() - this.recordStartedAt;
-        function () {
+      this.recorder.stopRecording(() => {
-          this.correctMetadata(this.recorder.getBlob()).then((blob) => {
+        this.correctMetadata(this.recorder.getBlob(), duration).then((blob) => {
-            this.recordedFile = new File(
+          this.recordedFile = new File(
-              [blob],
+            [blob],
-              util.formatRecordStartTime(this.recordStartedAt) + ".webm",
+            util.formatRecordStartTime(this.recordStartedAt) + ".webm",
-              {
+            {
-                type: blob.type,
+              type: blob.type,
-                lastModified: Date.now(),
+              lastModified: Date.now(),
-              }
-            );
-            //const player = new Audio(URL.createObjectURL(this.recordedFile));
-            //player.play();
-            if (send) {
-              //console.log("send");
-              this.send();
             }
-          });
+          );
-        }.bind(this)
+          //const player = new Audio(URL.createObjectURL(this.recordedFile));
-      );
+          //player.play();
+          if (send) {
+            //console.log("send");
+            this.send();
+          }
+        });
+      });
     },
     startRecordTimer() {
       this.stopRecordTimer();
@@ -426,32 +425,20 @@ 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 es-embl to try to update the cues section.
+     * Use fix-webm-duration package to try to update the cues section.
      */
-    async correctMetadata(blob) {
+    async correctMetadata(blob, duration) {
-      try {
+      return new Promise((resolve, reject) => {
-        const decoder = new Decoder();
+        try {
-        const reader = new Reader();
+          ysFixWebmDuration(blob, duration, function (fixedBlob) {
-        reader.logging = true;
+            const b = new Blob([fixedBlob], { type: blob.type });
-        reader.logGroup = "Raw WebM file";
+            resolve(b);
-        reader.drop_default_duration = false;
+          });
-        const webMBuf = await blob.arrayBuffer();
+        } catch (err) {
-        const elms = decoder.decode(webMBuf);
+          console.error(err);
-        elms.forEach((elm) => {
+          reject(err);
-          reader.read(elm);
+        }
-        });
+      });
-        reader.stop();
-        const refinedMetadataBuf = tools.makeMetadataSeekable(
-          reader.metadatas,
-          reader.duration,
-          reader.cues
-        );
-        const body = webMBuf.slice(reader.metadataSize);
-        return new Blob([refinedMetadataBuf, body], { type: blob.type });
-      } catch (err) {
-        console.err(err);
-        return blob;
-      }
     },
   },
 };