调用 recordAudio.stopRecording() 时套接字连接断开

Question

我正在尝试从浏览器麦克风录制音频并将其发送回节点服务器，以便使用谷歌云 STT 服务将其转换为文本。

一切正常，但问题是当我第一次录制音频时它工作正常录制的音频文件被发送到服务器进行处理，但是当我第二次尝试录制时，套接字连接断开并且浏览器重新连接到服务器以建立一个新的套接字连接。

这是客户端代码：

const socket = io();
const $recordBtn = document.getElementById("record-audio-btn");
const $stopRecrdingBtn = document.getElementById("stop-recording-btn");
// $stopRecrdingBtn.disabled = true;

socket.on("message", ({ msg, _id }) => {
  console.log("msg & _id >> ", msg, _id);
});

// for record audio with recordRTC
let recordAudio;

$recordBtn.onclick = () => {
  $recordBtn.disabled = true;
  // $stopRecrdingBtn.disabled = false;

  navigator.mediaDevices
    .getUserMedia({ audio: { echoCancellation: true } })
    .then((stream) => {      
      recordAudio = RecordRTC(stream, {
        type: "audio",
        mimeType: "audio/webm",
        sampleRate: 44100,
        desiredSampleRate: 16000,

        recorderType: StereoAudioRecorder,
        numberOfAudioChannels: 1, // using monoAudio Channel as backend req it

        // get intervals based blobs
        // value in milliseconds
        timeSlice: 1000,
      });
      recordAudio.startRecording();
      console.log("********** Audio Rec started **************");
    })
    .catch((err) => console.log("ERROR: >", err));
};

$stopRecrdingBtn.onclick = () => {
  $recordBtn.disabled = false;

  console.log("************ stopped ***********");
  console.log("recordAudio >> ", recordAudio);
  recordAudio.stopRecording(() => {
    // after stopping the audio, get the audio data
    recordAudio.getDataURL(function (audioDataURL) {
      var files = {
        audio: {
          type: recordAudio.getBlob().type || "audio/wav",
          dataURL: audioDataURL,
        },
      };
      // send the audio file to the server
      console.log("files >> ", files);

      socket.emit("message-transcribe", files);
      console.log("files Passed to backend for processing!");
    });
  });
};

• 在服务器端，我现在只是将音频文件写入本地机器

服务器代码

const path = require("path");
const express = require("express");
const http = require("http");
const fs = require("fs");
const socketio = require("socket.io");
// const socketStream = require("socket.io-stream");
const app = express();
const PORT = process.env.PORT || 3000;

const publicDirPath = path.join(__dirname, "../public");
app.use(express.static(publicDirPath));

const server = http.createServer(app);
const io = socketio(server); // passing raw http server to socket.io


app.get("/", (req, res) => {
  res.render("index");
});

io.on("connection", (client) => {
  console.log("New websocket connection!...");

  client.emit("message", {
    msg: "New WebSocket connection...",
    _id: client.id,
  });


  client.on("message-transcribe", (data) => {

    // we get the dataURL which was sent from the client
    const dataURL = data.audio.dataURL.split(",").pop();

    // we will convert it to a Buffer
    let fileBuffer = Buffer.from(dataURL, "base64");

    console.log("fileBuffer >> ", fileBuffer);
    
    // write audio file to local machine using fs.writeFileSync()
    fs.writeFileSync("testAudio.wav", fileBuffer);
  });

  client.on("disconnect", (reason) => {
    console.log(`\nDisconnected....\nReason=${reason}\n`);
  });
});


server.listen(PORT, () => {
  console.log(`Server Up & Listening on PORT: ${PORT}`);
});

编辑：我试图调试这个问题，我想，也许是因为传输错误，我已经看到如果我录制高达 700kb-800kb 的音频文件一切正常，如果文件大小超过我得到的值传输错误和套接字断开。

Console Opuput关于尝试发送大小超过 700-800kb 的 base-64 编码音频文件。

New websocket connection!...

// after initiating file tranfer from browser to server
Disconnected....
Reason=transport error // generated from client.on("disconnect", callback(reason))

New websocket connection!...

如有任何帮助，我们将不胜感激！

Answer 1

所以在深入研究 socket.io 文档后，我发现如果 maxHttpBufferSize 超过 1e6（默认值）以避免 Dos，则套接字连接会断开。

希望对遇到此问题的人有所帮助。