Как записывать аудио и видео с помощью JAVASCRIPT? (REACT JS)

#javascript #reactjs #audio #video #web-mediarecorder

#javascript #reactjs #Аудио #Видео #web-mediarecorder

Вопрос:

Я пробовал, но есть ошибка «Ошибка типа: не удается прочитать свойства undefined (чтение ‘stop’)» Я вызываю функцию при нажатии кнопки, здесь тоже есть функция 🙂

 const getAudio= async ()=>{

         let device = await navigator.mediaDevices.getUserMedia({audio: true});
         let chunks = [];
         let recorder;
         device.then(stream => {
             recorder = new MediaRecorder(stream);
             recorder.ondataavailable = e => {
                 chunks.push(e.data);
                 if (recorder.state === 'inactive') {
                     this.blob = new Blob(chunks, {type: 'audio/webm'});
                     let testAudioRecord  = URL.createObjectURL(this.blob);
                     console.log(testAudioRecord)
                 }
             }
             recorder.start(1000);
         });
         setTimeout(() => {
             recorder.stop();     //   Cannot read ('stop') =error
         }, 2000)
     }

 

Ответ №1:

Я замечаю небольшую путаницу между использованием async с await и .затем обещайте обработку.

Поскольку вы используете асинхронную функцию, давайте проведем рефакторинг try...catch с помощью await, чтобы дождаться разрешения рекламной кампании.

   const getAudio = async () => {
    let chunks = [];
    let recorder;

    try {
      //wait for the stream promise to resolve
      let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      recorder = new MediaRecorder(stream);
      recorder.ondataavailable = (e) => {
        chunks.push(e.data);
        if (recorder.state === "inactive") {
          this.blob = new Blob(chunks, { type: "audio/webm" });
          let testAudioRecord = URL.createObjectURL(this.blob);
          console.log(testAudioRecord);
        }
      };
      recorder.start(1000);

      setTimeout(() => {
        recorder.stop();
      }, 2000);
    } catch (e) {
      console.log("error getting stream", e);
    }
  };
 

Есть лучшие способы построения кода, но это должно заставить вашу функцию работать.

Вот codesandbox с вашей функцией и опцией воспроизведения

Вот еще один аудиокод и поле