Posting An Image from Webcam to Azure Face Api

Question

I am trying to upload an image that I get from my webcam to the Microsoft Azure Face Api. I get the image from canvas.toDataUrl(‘image/png’) which contains the Data Uri. I change the Content Type to application/octet-stream and when I attach the Data Uri to the post request, I get a Bad Request (400) Invalid Face Image. If I change the attached data to a Blob, I stop receiving errors however I only get back an empty array instead of a JSON object. I would really appreciate any help for pointing me in the right direction.

Thanks!

Answer 1

So I got the answer finally by sending the image as a blob object. You first grab the image from canvas with:

let data = canvas.toDataURL('image/jpeg');

Afterwards, you can reformat it to a blob data object by running:

fetch(data)
  .then(res => res.blob())
  .then(blobData => {
    // attach blobData as the data for the post request
  }

You will also need to switch the Content-Type of the post request to "application/octet-stream"