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.
This commit is contained in:
N-Pex
parent
2fb883a4d1
commit
544f9066af
3 changed files with 44 additions and 109 deletions
74
package-lock.json
generated
74
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue