ERROR EBML header parsing failed. /input/import1/test.webm Invalid data found when processing input

Question

I'm working on a real-time audio recording feature in my web application, and I'm trying to send WebM audio chunks from the frontend (React) to the backend (Flask) using Socket.IO. However, I'm struggling with correctly transmitting and handling the audio data in webm format. When I tried to convert webm audio to mp3 in cloudconvert it threw ERROR EBML header parsing failed. /input/import1/test.webm Invalid data found when processing input as seen in this image.

From Frontend - React JS

const startRecording = async () => {
if (!socket) return;

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(stream, {
  mimeType: "audio/webm;codecs=opus",
});

recorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    socket.emit("audio_chunk", event.data);
  }
};

recorder.start(250); 
setMediaRecorder(recorder);
setIsRecording(true);

};

handling in flask

@socketio.on("audio_chunk")
def handle_audio_chunk(data):
    """
    Handles incoming audio chunks from the client.
    """
    try:
        # Convert the incoming webm data to raw PCM

        audio_bytes = base64.b64decode(data)
        with open("test.webm", 'ab') as f:
            f.write(audio_bytes)

    emit("transcription", "inspecting the issue ...")
except Exception as e:
    emit("error", {"message": str(e)})