如何将音频Blob从JavaScript发送到java弹簧服务器？

我正在使用RecordRTC在我的JavaScript客户端录制一些音频数据。我想通过WebSockets将此音频数据发送到我的Spring RestController。如何将音频Blob从JavaScript发送到java弹簧服务器？

记录后，我在我的JavaScript客户端有一个Blob对象：Blob {size: 65859, type: "audio/webm"}

我想这个BLOB转换为使用FileReader一个ArrayBuffer对象，看起来像这样ArrayBuffer {} byteLength: 65859

我的JavaScript代码，我发送ArrayBuffer看起来是这样的：

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

在我的春节，启动应用程序的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 ... 
[[email protected] 
20

在我的服务器的ByteArray只包含20个字节，它看起来像只有元数据被转移？

如何将记录的Blob传输到我的Spring服务器并创建它的（webm）文件？我是否必须更改我的端点的参数？

来源

2017-08-13 Peter Lustig

你在哪里调用'.readAsArrayBuffer（）'？ – guest271314

@ guest271314当我从记录器中获取blob时，在我的stopRecording（）方法中。我在我的文章中加入了片段 –

'System.out.println（input）'的预期结果是什么？ – guest271314

我会建议你使用下面的代码创建的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(); 
}

来源

2017-08-13 16:56:36

它的工作。非常感谢。我打算发送音频块作为二进制文件，但我只是意识到base64字符串只是略大于blob。 –

如何将音频Blob从JavaScript发送到java弹簧服务器？

回答

相关问题