如何正确等待navigator.getUserMedia执行完成？

你的问题核心是navigator.getUserMedia是异步操作，创建Recorder的代码执行时，input还没被赋值，所以出现未定义的情况。固定超时的方式不可靠，推荐以下两种更严谨的优化方案：

方案一：在异步回调内直接创建Recorder #

把创建Recorder的逻辑放在getUserMedia的成功回调里，确保input已经被正确初始化后再执行：

const audioSetter = new AudioContext();
let rec;
let gumStream;

navigator.getUserMedia(
    { audio: true },
    (stream) => {
        gumStream = stream;
        const input = audioSetter.createMediaStreamSource(stream);
        // 此时input已就绪，直接初始化Recorder
        rec = new Recorder(input, { numChannels: 1 });
        // 在这里可以执行Recorder的后续操作，比如开始录制
        // rec.record();
    },
    (err) => console.log(`No live audio input: ${err}`)
);

方案二：用Promise包装API，结合async/await控制流程 #

使用标准的navigator.mediaDevices.getUserMedia（旧版navigator.getUserMedia已废弃），将其包装为Promise后，通过async/await让异步代码同步化，流程更清晰：

async function initAudioRecorder() {
    try {
        const audioSetter = new AudioContext();
        // 等待媒体流获取完成
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const gumStream = stream;
        const input = audioSetter.createMediaStreamSource(stream);
        // input就绪后创建Recorder
        const rec = new Recorder(input, { numChannels: 1 });
        // 执行后续操作
        // rec.record();
        return rec;
    } catch (err) {
        console.log(`No live audio input: ${err}`);
    }
}

// 调用初始化函数
initAudioRecorder();

你之前尝试async/await没效果，大概率是没有正确将getUserMedia的异步逻辑用Promise包裹，或者在await之前就执行了创建Recorder的代码，导致异步流程没有被正确控制。

内容的提问来源于stack exchange，提问作者VladTbk321