socket connection disconnects upon calling recordAudio.stopRecording()

Question

I am trying to record audio from browser Microphone and send it back to node server for converting it to text using google cloud STT service.

Every thing works fine but the problem is when I record audio first time it works fine recorded audio file gets sent to server for processing but when I try recording second time the socket connection gets disconnected and the browser is reconnected to server for establishing a new socket connection.

Here's the client side code:

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!");
    });
  });
};

• On the server side for now I'm simply writing the audio file to the local machine

Server Code

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}`);
});

EDIT: I'have tried to debug this Issue and I think, maybe it's because of the transport err, I have seen that if I record audio file upto 700kb-800kb everything works fine, If File size exceeds that value I get transport err and socket disconects.

Console Opuput on trying to send base-64 encoded audio file of size more than 700-800kb.

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!...

Any help is appriciated!

Answer 1

So after a lot of digging into socket.io docs I found out that socket connection disconnects if maxHttpBufferSize exceeds 1e6 (default value) to Avoid Dos.

I hope it helps anyone having this problem.