reactjs - React Extendable-Media-Recorder İşlenmemiş Reddetme (Hata): Verilen id ile saklanmış bir kodlayıcı örneği yoktu

TypeScript ile yazılmış bir React projesinde, 'extendable-media-recorder' paketini 'extendable-media-recorder-wav-encoder' ile birlikte kullanıyorum (repo bağlantısı). Bu paket, kullanıcının sesini kaydetmesine olanak sağlamak için kullanılır. Kullanıcı sadece bir kez sesini kaydettiğinde bu çalışıyor, ancak tekrar kaydedip kaydı durdurduğunda aşağıdaki hata veriliyor: Media encoder error

Bu hata, kullanıcı kaydediciyi ikinci kez durdurduktan sonra verilir, bu yüzden kaydediciyi tekrar başlatmak işe yarıyormuş gibi görünüyor. Bu hatanın nereden geldiğini anlamıyorum çünkü hata ve oluşma şekli, hatanın kaydediciyi ikinci kez durdurmaktan kaynaklandığını gösterecek gibi. Ancak, kaydediciyi durdurmak için kullanılan kod olası hataları yakalarken hata, yakalanmadığını belirtiyor.

Kodumda medya kaydediciyi kullanma şeklim şudur:

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>
   )
}

Bu hatanın neden kaynaklandığını ve nasıl düzeltebileceğimi bilen var mı? TypeScript ile uyumlu diğer ses kaydı kütüphaneleri hakkında olası öneriler de çok memnuniyetle karşılanır.

Şimdiden çok teşekkürler.

Cevap #1

Buna bugün rastladım. Koddaki bir hata vardı, umarım v6.1.56'da düzeltilmiştir.

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

Artık beklendiği gibi çalışması gerekir. Daha fazla sorunla karşılaşırsanız lütfen GitHub'da bir sorun açmaktan çekinmeyin.