Http request with image body on angular7

Question

I am developing an angular application that takes a capture from webcam every second and send it to rest api end point to make some magic analysis on it. To do this; I am making an interval observable that takes a capture from video recoded from the webcam and embedded it in the body of post http request (on base 64) to send it to the end point. This is how I am doing things:

app.component.ts

secondsCounter = interval(1000);

@ViewChild("video")
public video: ElementRef;

url = "http://myapi.com";
httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/octet-stream',
    })
};

public capture() {
    let image = this.video.nativeElement
    return this.canvas.nativeElement.toDataURL("image/png"); 
}

getData(image): Observable<any>
{
   return this.http.post<any>(this.url, image, this.httpOptions)
}

public ngAfterViewInit() {
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
             this.video.nativeElement.srcObject = stream;
             this.video.nativeElement.play();
        });

    }   
}

ngOnInit() {
  this.secondsCounter.subscribe(n =>
    {
      try {
        let image = this.capture();
        this.getData(image).subscribe(
          data => {
             console.log( data);
          }
        );

    } catch (error) {
      console.log("error: ",error);
    }
  });
}

app.component.html

<div class="col-md-6">
   <video #video id="video" autoplay></video>
</div> 

When I launch the application I get an 400 Error

error: {…} code: "BadRequestImageFormat" message: "Bad Request Image Format, Uri: cde9bdf3442b45dc85256454f65ea068"

But when I test my end point with a http client like Insomnia or Fiddler Everything works right, How can I solve the problem?

Answer 1

Try to change capture() method to : This is an example from my code : updating profile picture. I made some modifications...

public capture() {

let encodedBase64Picture : any ;
var file: File = this.video.nativeElement ;
var reader: FileReader = new FileReader();
reader.onloadend = ( e ) => {
encodedBase64Picture = reader.result;
}
reader.readAsDataURL( file );
return encodedBase64Picture  ;