MediaRecorder实时音频流传输问题：转Uint8Array后无法发送数据

问题根源分析与修复步骤 #

• 立即执行函数未调用：你定义的async匿名函数仅声明未执行，导致内部逻辑完全没触发，需要在函数末尾添加()执行。
• Blob对象错误处理：dataavailable事件回调的参数（建议命名为event而非stream）中，event.data本身就是Blob对象，无需再用new Blob(stream.data)重新创建，否则会导致数据异常。
• Uint8Array序列化问题：JSON.stringify无法正确序列化Uint8Array的字节数据，会输出无效结构（如空对象或键值对形式的类数组），服务器无法解析。解决方式二选一：
  1. 将Uint8Array转为普通数组后再序列化
  2. 直接发送二进制数据（Socket.IO默认支持二进制传输）

修正后的代码 #

mediaRecorderAudio.addEventListener("dataavailable", (event) => {
    // 立即执行async函数
    (async () => {
        // 直接使用事件返回的Blob数据
        const blob = event.data;
        const buffer = await blob.arrayBuffer();
        const data_to_send = new Uint8Array(buffer);
        
        // 方案1：转普通数组后序列化发送
        socket.emit('socket_audio', JSON.stringify(Array.from(data_to_send)));
        
        // 方案2：直接发送二进制数据（推荐，效率更高）
        // socket.emit('socket_audio', data_to_send);
    })();
});
mediaRecorderAudio.start(100);

额外注意事项 #

• 服务器端需对应调整解析逻辑：如果用方案1，要将接收的数组转回Uint8Array；如果用方案2，直接处理二进制数据即可。
• 确认MediaRecorder的MIME类型（如audio/ogg; codecs=opus）与服务器端的音频解析格式一致。

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