I am trying to upload audio as a MultiPart file to a Spring Boot API. i've never done anything similar in a Angular2.x app so not sure at all if my approach is correct. I keep getting a 500 error from the api and think it might be that my audio data is not sent in the correct format... Am I missing something here? I looked at the code of a gui for the same API that was done using javaFX in that gui the audio was recorded, saved as wav and then sent to the api endpoint. Should I first save a .wav file of the audio recording and then read/send it to the API or can I use the Blob as i'm currently doing?
my code:
the Kotlin/spring boot endpoint:@PostMapping("/vb/Verify")
fun verify(@RequestParam("Audio") file:MultipartFile,
@RequestParam(name = "SessionID") sessionId: String,
@RequestParam(name = "Risk") risk: String,
@RequestParam(name = "Strategy") strategy:String,
@RequestParam(name = "AudioType") audioType:String,
@RequestParam(name = "Channel") channel:String):VerifyResponseDTO {
val audioBytes = StreamUtils.copyToByteArray(file.inputStream)
return vbService.verify(sessionId, audioBytes, audioType, strategy, channel, Risk.byCode(risk))
}
my angular component code:
constructor(private restService: RestService) {
const onSuccess = stream => {
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.onstop = e => {
const audio = new Audio();
const blob = new Blob(this.chunks, {type : 'audio/wav'});
this.chunks.length = 0;
audio.src = window.URL.createObjectURL(blob);
this.verify(blob);
audio.load();
audio.play();
};
this.mediaRecorder.ondataavailable = e => this.chunks.push(e.data);
};
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getUserMedia({ audio: true }, onSuccess, e => console.log(e));
}
verify(blob: Blob) {
this.restService.startSession()
.subscribe((res) => {
console.log(res);
this.restService.verify(blob)
.subscribe((res) => {
console.log(res);
}, (err) => {
console.log(err);
});
}, (err) => {
console.log(err);
});
}
my Angular Service verify function:
verify(blob: Blob): Observable<any> {
let formData:FormData = new FormData();
formData.append("SessionID", "neld02");
formData.append("Strategy", "Phrase");
formData.append("AudioType", "Header");
formData.append("Risk", "Lo")
formData.append("Channel", "Smart")
formData.append('Audio', blob);
formData.append("Text", "");
return this.hc.post(`${this.api}/Verify`, formData);
}
from Sending Blob data from Angular6 client to Spring Boot API as MultipartFile
No comments:
Post a Comment