React可扩展媒体记录器未经处理的拒绝(错误):没有使用给定id存储的编码器实例

Question

在用TypeScript编写的React项目中，我使用"可扩展媒体记录器"one_answers"可扩展介质记录器wav编码器"(指向repo的链接(。此软件包用于允许用户录制他/她的声音。当用户只录制他/她的声音一次，但在再次录制并停止录制时，会出现以下错误：介质编码器错误

这个错误是在用户第二次停止记录器后出现的，因此再次启动记录器似乎确实有效。我不明白这个错误是从哪里来的，因为错误及其发生的方式表明错误源于第二次停止记录器。但是，停止记录器的代码确实捕捉到了潜在的错误，而错误声明它没有被捕捉到。

我在代码中使用媒体记录器的方式如下：

import microphoneLogo from '../images/microphone.png'
import stopLogo from '../images/stop.png'
import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';
let mediaRecorder: any;
export default () => {
const [microphoneOn, setMicrophone] = useState<boolean>(false)
const [audioSetUp, setAudioSetUp] = useState<boolean>(false)

//Instantiate the mediaRecorder and create an encoder object.
async function setupAudioRecording() {
let port;
try {
port = await connect();
try {
await register(port);
} catch (e2) {
console.log('E2: ' + e2);
}
} catch (e1) {
console.log('E1: ' + e1);
}
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: 'audio/wav',
audioBitsPerSecond: 44100,
});
setAudioSetUp(true);
}
async function startRecording() {
try {
mediaRecorder.start();
} catch (e) {
console.log(e);
}
mediaRecorder.addEventListener('dataavailable', ({ data }: any) => {
put(data); //This method sends the blob data to the server to be processed
});
}
async function stopRecording() {
try {
await mediaRecorder?.stop()
} catch (e) {
console.log(e);
}
}
return (
<div className="input">
<input 
className="input__microphone" 
type="image" 
src={microphoneOn ? stopLogo : microphoneLogo} 
alt="Microphone"
onClick={handleClick}
/>
</div>
)
}

有人知道这个错误的原因吗？我该如何解决？关于其他录音库(与TypeScript兼容(的可能建议也非常受欢迎。

非常感谢。

Answer 1

我今天偶然发现了这个。代码中有一个错误，有望在v6.1.56中修复。

https://github.com/chrisguttandin/extendable-media-recorder/commit/8f639309b93061dd39233ee702c11515cb992d4d

它现在应该如预期的那样工作。如果您遇到任何进一步的问题，请随时在GitHub上打开一个问题。