Tuesday, 9 October 2018

Sending Blob data from Angular6 client to Spring Boot API as MultipartFile

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