diff --git a/package-lock.json b/package-lock.json index a235c57..ea8c385 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "keanuapp-weblite", - "version": "0.1.19", + "version": "0.1.21", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -7775,6 +7775,14 @@ "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz", "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==" }, + "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" + } + }, "launch-editor": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.2.1.tgz", @@ -8111,6 +8119,14 @@ "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", "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": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", @@ -10949,11 +10965,6 @@ "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==" - }, "regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", @@ -13015,6 +13026,11 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", "dev": true }, + "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.11.1", "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz", diff --git a/package.json b/package.json index 0a8460e..1af172e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "keanuapp-weblite", - "version": "0.1.21", + "version": "0.1.22", "private": true, "scripts": { "serve": "vue-cli-service serve", @@ -26,10 +26,10 @@ "material-design-icons-iconfont": "^6.1", "matrix-js-sdk": "^15.2.0", "md-gum-polyfill": "^1.0.0", + "mic-recorder-to-mp3": "^2.2.2", "pretty-bytes": "^5.6.0", "qrcode": "^1.4.4", "raw-loader": "^4.0.2", - "recordrtc": "^5.6.2", "roboto-fontface": "*", "v-emoji-picker": "^2.3.1", "vue": "^2.6.11", diff --git a/package.json.bak b/package.json.bak index 256989b..5c3d552 100644 --- a/package.json.bak +++ b/package.json.bak @@ -1,6 +1,6 @@ { "name": "keanuapp-weblite", - "version": "0.1.20", + "version": "0.1.21", "private": true, "scripts": { "serve": "vue-cli-service serve", @@ -26,10 +26,10 @@ "material-design-icons-iconfont": "^6.1", "matrix-js-sdk": "^15.2.0", "md-gum-polyfill": "^1.0.0", + "mic-recorder-to-mp3": "^2.2.2", "pretty-bytes": "^5.6.0", "qrcode": "^1.4.4", "raw-loader": "^4.0.2", - "recordrtc": "^5.6.2", "roboto-fontface": "*", "v-emoji-picker": "^2.3.1", "vue": "^2.6.11", diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue index 545074a..92895b4 100644 --- a/src/components/VoiceRecorder.vue +++ b/src/components/VoiceRecorder.vue @@ -150,8 +150,9 @@ const State = { import util from "../plugins/utils"; import VoiceRecorderLock from "./VoiceRecorderLock"; require("md-gum-polyfill"); -import RecordRTC from "recordrtc"; +import MicRecorder from "mic-recorder-to-mp3"; import ysFixWebmDuration from "fix-webm-duration"; +//import { duration } from "dayjs"; export default { name: "VoiceRecorder", @@ -161,19 +162,19 @@ export default { props: { show: { type: Boolean, - default: function () { + default: function() { return false; }, }, ptt: { type: Boolean, - default: function () { + default: function() { return false; }, }, micButtonRef: { type: Object, - default: function () { + default: function() { return null; }, }, @@ -328,25 +329,13 @@ export default { }, startRecording() { - var constraints = { - audio: { - // channelCount: 1, - // sampleRate: 16000, - echoCancellation: false, - autoGainControl: true, - noiseSuppression: true, - volume: 1.0, - }, - video: false, - }; - navigator.mediaDevices - .getUserMedia(constraints) - .then((stream) => { - this.recorder = RecordRTC(stream, { - type: "audio", - mimeType: "audio/webm", - }); - this.recorder.startRecording(); + // Start recording. Browser will request permission to use your microphone. + this.recorder = new MicRecorder({ + bitRate: 128, + }); + this.recorder + .start() + .then(() => { this.state = State.RECORDING; this.recordStartedAt = Date.now(); this.startRecordTimer(); @@ -363,7 +352,7 @@ export default { this.state = State.INITIAL; if (this.recorder) { this.recorder.stopRecording(); - this.recorder.destroy(); + //this.recorder.destroy(); this.recorder = null; } this.stopRecordTimer(); @@ -391,25 +380,25 @@ export default { this.$emit("file", { file: this.recordedFile }); }, getFile(send) { - const duration = Date.now() - this.recordStartedAt; - this.recorder.stopRecording(() => { - this.correctMetadata(this.recorder.getBlob(), duration).then((blob) => { + //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 this.recordedFile = new File( - [blob], - util.formatRecordStartTime(this.recordStartedAt) + ".webm", + buffer, + util.formatRecordStartTime(this.recordStartedAt) + ".mp3", { type: blob.type, lastModified: Date.now(), } ); - //const player = new Audio(URL.createObjectURL(this.recordedFile)); - //player.play(); if (send) { - //console.log("send"); this.send(); } }); - }); }, startRecordTimer() { this.stopRecordTimer(); @@ -436,7 +425,7 @@ export default { async correctMetadata(blob, duration) { return new Promise((resolve, reject) => { try { - ysFixWebmDuration(blob, duration, function (fixedBlob) { + ysFixWebmDuration(blob, duration, function(fixedBlob) { const b = new Blob([fixedBlob], { type: blob.type }); resolve(b); }); @@ -474,4 +463,4 @@ export default { .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } - +