How to send audio blob from javascript to java spring server?

Viewed 7483

I'm recording some audio data in my javascript client using RecordRTC. I want to send this audio data to my Spring RestController via WebSockets.

After recording I have a blob object in my javascript client: Blob {size: 65859, type: "audio/webm"}

I tried to convert this blob to an ArrayBuffer object using FileReader which looks like this ArrayBuffer {} byteLength: 65859

My javascript code where I send the ArrayBuffer looks like this:

    const reader = new FileReader();
    reader.addEventListener( 'loadend', () => {
        console.log( 'readerResult', reader.result );
        this.stompClient.send( "/app/hello", {}, reader.result );
    } );

    this.recorder.stopRecording(() => {
        const blob = this.recorder.getBlob();
        reader.readAsArrayBuffer( blob );
        console.log( "blob", blob );
    } );

My WebSocket endpoint in my Spring Boot application looks like this:

@MessageMapping("/hello")
public void stream(byte[] input) throws Exception {
    System.out.println("incoming message ...");
    System.out.println(input);
    System.out.println(input.length);
}

And this is the console output:

incoming message ...
[B@6142acb4
20

The bytearray in my server contains only 20 bytes, which looks like only metadata are transfered?

How can I transfer the recorded Blob to my Spring server and create a (webm) file of it? Do I have to change the parameter of my endpoint?

1 Answers
Related