我正在使用 RecordRTC
在我的 javascript 客户端中录制一些音频数据。我想通过 WebSockets
将此音频数据发送到我的 Spring RestController
。
录制后我的 javascript 客户端中有一个 blob 对象:Blob {size: 65859, type: "audio/webm"}
我尝试使用 FileReader
将此 blob 转换为 ArrayBuffer 对象,它看起来像这样 ArrayBuffer {} byteLength: 65859
我发送 ArrayBuffer 的 javascript 代码如下所示:
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 );
} );
我的 Spring Boot 应用程序中的 WebSocket 端点如下所示:
@MessageMapping("/hello")
public void stream(byte[] input) throws Exception {
System.out.println("incoming message ...");
System.out.println(input);
System.out.println(input.length);
}
这是控制台输出:
incoming message ...
[B@6142acb4
20
我服务器中的bytearray只有20个字节,看起来只传输了元数据?
如何将记录的 Blob 传输到我的 Spring 服务器并创建它的 (webm) 文件?我是否必须更改端点的参数?
最佳答案
我建议您使用以下代码为您的音频 blob 创建 base64 字符串:
var reader = new FileReader();
var base64data;
reader.readAsDataURL(blob);
reader.onloadend = function() {
base64data = reader.result;
console.log(base64data);
}
你会得到像这样的 base64 字符串:
data:audio/webm;base64,T2dnUwACAAAAAAAAAAAyzN3N....
现在在您的后端将您的流方法代码更改为:
@MessageMapping("/hello")
public void stream(String base64Audio) throws Exception {
System.out.println("incoming message ...");
Decoder decoder = Base64.getDecoder();
byte[] decodedByte = decoder.decode(base64Audio.split(",")[1]);
FileOutputStream fos = new FileOutputStream("MyAudio.webm");
fos.write(decodedByte);
fos.close();
}
关于javascript - 如何将音频 blob 从 javascript 发送到 java spring 服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45658004/