#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 с вашей функцией и опцией воспроизведения
Вот еще один аудиокод и поле