diff --git a/package-lock.json b/package-lock.json index 6e500f6..bd9db17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,6 @@ "dayjs": "^1.10.3", "deepmerge": "^4.3.1", "file-saver": "^2.0.5", - "fix-webm-duration": "^1.0.0", "image-resize": "^1.4.1", "image-size": "^2.0.2", "intersection-observer": "^0.12", @@ -28,14 +27,14 @@ "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", "material-design-icons-iconfont": "^6.7.0", - "matrix-js-sdk": "^37.3.0", + "matrix-js-sdk": "^37.5.0", "md-gum-polyfill": "^1.0.0", - "mic-recorder-to-mp3": "^2.2.2", "path-browserify": "^1.0.1", "pretty-bytes": "^5.6.0", "process": "^0.11.10", "qrcode": "^1.5.4", "raw-loader": "^4.0.2", + "recordrtc": "^5.6.2", "roboto-fontface": "*", "stream-browserify": "^3.0.0", "tiny-emitter": "^2.1.0", @@ -4134,11 +4133,6 @@ "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": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -4995,14 +4989,6 @@ "node": ">= 8" } }, - "node_modules/lamejs": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz", - "integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==", - "dependencies": { - "use-strict": "1.0.1" - } - }, "node_modules/level-blobs": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/level-blobs/-/level-blobs-0.1.7.tgz", @@ -5334,9 +5320,10 @@ "dev": true }, "node_modules/loglevel": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", - "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz", + "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==", + "license": "MIT", "engines": { "node": ">= 0.6.0" }, @@ -5389,9 +5376,9 @@ "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==" }, "node_modules/matrix-js-sdk": { - "version": "37.3.0", - "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.3.0.tgz", - "integrity": "sha512-uYpXEucA+y9b116Hn+zG+X+u2GE2dACh+aN0BhiJDL/LtvhQgrXT4ZLG/N7OizomoHHF+i/WetDhi+rzDJQdDw==", + "version": "37.5.0", + "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz", + "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==", "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", @@ -5401,7 +5388,7 @@ "bs58": "^6.0.0", "content-type": "^1.0.4", "jwt-decode": "^4.0.0", - "loglevel": "^1.7.1", + "loglevel": "^1.9.2", "matrix-events-sdk": "0.0.1", "matrix-widget-api": "^1.10.0", "oidc-client-ts": "^3.0.1", @@ -5454,17 +5441,6 @@ "node": ">= 8" } }, - "node_modules/mic-recorder-to-mp3": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz", - "integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==", - "dependencies": { - "lamejs": "^1.2.0" - }, - "peerDependencies": { - "webrtc-adapter": ">=4.1.1" - } - }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -6171,6 +6147,12 @@ "node": ">= 0.10" } }, + "node_modules/recordrtc": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/recordrtc/-/recordrtc-5.6.2.tgz", + "integrity": "sha512-1QNKKNtl7+KcwD1lyOgP3ZlbiJ1d0HtXnypUy7yq49xEERxk31PHvE9RCciDrulPCY7WJ+oz0R9hpNxgsIurGQ==", + "license": "MIT" + }, "node_modules/regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -6511,12 +6493,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/sdp": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz", - "integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==", - "peer": true - }, "node_modules/sdp-transform": { "version": "2.14.1", "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz", @@ -7276,11 +7252,6 @@ "punycode": "^2.1.0" } }, - "node_modules/use-strict": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz", - "integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A=" - }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -7835,19 +7806,6 @@ "node": ">=10.13.0" } }, - "node_modules/webrtc-adapter": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.2.tgz", - "integrity": "sha512-j1tsxKR/NmNgqrlLTL5jsNmFBrsIdTvBWZ2I1UAs/J37M1s1chLy1Fp7RfQHflHk3KoSNAxp/4y6ictHJ8prSw==", - "peer": true, - "dependencies": { - "sdp": "^3.0.2" - }, - "engines": { - "node": ">=6.0.0", - "npm": ">=3.10.0" - } - }, "node_modules/which-module": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", @@ -10669,11 +10627,6 @@ "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": "3.0.4", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", @@ -11274,14 +11227,6 @@ "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", "dev": true }, - "lamejs": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz", - "integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==", - "requires": { - "use-strict": "1.0.1" - } - }, "level-blobs": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/level-blobs/-/level-blobs-0.1.7.tgz", @@ -11582,9 +11527,9 @@ "dev": true }, "loglevel": { - "version": "1.7.1", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", - "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==" + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz", + "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==" }, "lru-cache": { "version": "5.1.1", @@ -11624,9 +11569,9 @@ "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==" }, "matrix-js-sdk": { - "version": "37.3.0", - "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.3.0.tgz", - "integrity": "sha512-uYpXEucA+y9b116Hn+zG+X+u2GE2dACh+aN0BhiJDL/LtvhQgrXT4ZLG/N7OizomoHHF+i/WetDhi+rzDJQdDw==", + "version": "37.5.0", + "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-37.5.0.tgz", + "integrity": "sha512-5tyuAi5hnKud1UkVq8Z2/3c22hWGELBZzErJPZkE6Hju2uGUfGtrIx6uj6puv0ZjvsUU3X6Qgm8vdReKO1PGig==", "requires": { "@babel/runtime": "^7.12.5", "@matrix-org/matrix-sdk-crypto-wasm": "^14.0.1", @@ -11635,7 +11580,7 @@ "bs58": "^6.0.0", "content-type": "^1.0.4", "jwt-decode": "^4.0.0", - "loglevel": "^1.7.1", + "loglevel": "^1.9.2", "matrix-events-sdk": "0.0.1", "matrix-widget-api": "^1.10.0", "oidc-client-ts": "^3.0.1", @@ -11681,14 +11626,6 @@ "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true }, - "mic-recorder-to-mp3": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz", - "integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==", - "requires": { - "lamejs": "^1.2.0" - } - }, "micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -12185,6 +12122,11 @@ "resolve": "^1.1.6" } }, + "recordrtc": { + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/recordrtc/-/recordrtc-5.6.2.tgz", + "integrity": "sha512-1QNKKNtl7+KcwD1lyOgP3ZlbiJ1d0HtXnypUy7yq49xEERxk31PHvE9RCciDrulPCY7WJ+oz0R9hpNxgsIurGQ==" + }, "regenerator-runtime": { "version": "0.13.9", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", @@ -12395,12 +12337,6 @@ "ajv-keywords": "^3.5.2" } }, - "sdp": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz", - "integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==", - "peer": true - }, "sdp-transform": { "version": "2.14.1", "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz", @@ -12927,11 +12863,6 @@ "punycode": "^2.1.0" } }, - "use-strict": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz", - "integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A=" - }, "util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -13265,15 +13196,6 @@ "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", "dev": true }, - "webrtc-adapter": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.2.tgz", - "integrity": "sha512-j1tsxKR/NmNgqrlLTL5jsNmFBrsIdTvBWZ2I1UAs/J37M1s1chLy1Fp7RfQHflHk3KoSNAxp/4y6ictHJ8prSw==", - "peer": true, - "requires": { - "sdp": "^3.0.2" - } - }, "which-module": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz", diff --git a/package.json b/package.json index d676ae8..9694a8a 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "dayjs": "^1.10.3", "deepmerge": "^4.3.1", "file-saver": "^2.0.5", - "fix-webm-duration": "^1.0.0", "image-resize": "^1.4.1", "image-size": "^2.0.2", "intersection-observer": "^0.12", @@ -29,14 +28,14 @@ "linkify-html": "^4.1.0", "linkifyjs": "^4.1.0", "material-design-icons-iconfont": "^6.7.0", - "matrix-js-sdk": "^37.3.0", + "matrix-js-sdk": "^37.5.0", "md-gum-polyfill": "^1.0.0", - "mic-recorder-to-mp3": "^2.2.2", "path-browserify": "^1.0.1", "pretty-bytes": "^5.6.0", "process": "^0.11.10", "qrcode": "^1.5.4", "raw-loader": "^4.0.2", + "recordrtc": "^5.6.2", "roboto-fontface": "*", "stream-browserify": "^3.0.0", "tiny-emitter": "^2.1.0", diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue index 3adfdb4..7e9b94f 100644 --- a/src/components/VoiceRecorder.vue +++ b/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 */