diff --git a/package-lock.json b/package-lock.json index a66f288..3ba1595 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6da64b2..03ae6cd 100644 --- a/package.json +++ b/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", diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue index b3b658e..9991384 100644 --- a/src/components/VoiceRecorder.vue +++ b/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( - function () { - this.correctMetadata(this.recorder.getBlob()).then((blob) => { - this.recordedFile = new File( - [blob], - util.formatRecordStartTime(this.recordStartedAt) + ".webm", - { - type: blob.type, - lastModified: Date.now(), - } - ); - //const player = new Audio(URL.createObjectURL(this.recordedFile)); - //player.play(); - if (send) { - //console.log("send"); - this.send(); + const duration = Date.now() - this.recordStartedAt; + this.recorder.stopRecording(() => { + this.correctMetadata(this.recorder.getBlob(), duration).then((blob) => { + this.recordedFile = new File( + [blob], + util.formatRecordStartTime(this.recordStartedAt) + ".webm", + { + type: blob.type, + lastModified: Date.now(), } - }); - }.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) { - try { - const decoder = new Decoder(); - const reader = new Reader(); - reader.logging = true; - reader.logGroup = "Raw WebM file"; - reader.drop_default_duration = false; - const webMBuf = await blob.arrayBuffer(); - const elms = decoder.decode(webMBuf); - elms.forEach((elm) => { - 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; - } + 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); + } + }); }, }, };