Use RecordRTC as audio recorder
Old one does not work anymore. Maybe this is a good option?
This commit is contained in:
N-Pex
parent
83d8e03f97
commit
e7759fa4a6
3 changed files with 43 additions and 143 deletions
134
package-lock.json
generated
134
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue