What I am trying to achieve here is converting an ImageCapture photo (contructed by a VideoTrack from a MediaStream), which is basically a blob, sending it using FormData via Ajax post request to the server, and then on server's side converting it back to image, which is sadly the troubling part - I do not know how to construct a file and save it. Tried FileSaver.js and using File from file-class, but couldn't have figured it out how to turn it into a png.
For more clarification, heres my client and server sides -
client side
ImageCapture.takePhoto().then(photo => {
console.log(photo)
let photoAsFormData = new FormData()
photoAsFormData.append("file", photo, '' + ID + '.png');
$.ajax({
type: 'POST',
url: 'http://localhost:3030/test/' + ROOM_ID + '/' + ID + '/',
data: photoAsFormData,
processData: false,
contentType: false,
success: function(msg){
console.log('posted' + msg);
}
});
}).catch(e => {
console.log(e)
})
server side
app.post('/test/:room/:userId',(req,res) => {
let blob = req.files.file // 'file' was appended to FormData
console.log(blob)
})
and here's an example of what am I getting from console.log(blob)
:
{
name: '9a890613-3d78-40cb-9f38-8188daeae834.png',
data: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 80 00 00 01 e0 08 02 00 00 00 ba b3 4b b3 00 00 20 00 49 44 41 54 78 9c ec bd dd 96 34 37 92 ... 183961 more bytes>,
size: 184011,
encoding: '7bit',
tempFilePath: '',
truncated: false,
mimetype: 'image/png',
md5: 'de593a55b911c7a9c82917babcc3df53',
mv: [Function: mv]
}
It is marked in the client side as 'Blob' so I assumed FileSaver.SaveAs([blob], *fileName*)
would work, but didn't save into the ~/Download directory as expected, and didn't throw any errors.
TL;DR - how should I turn Blob's buffer into a PNG file and save it
On another note, I am trying to send the image to the server, and after knowing I can view the image on that side, I will then send it to a python microservice. I just need to know it can be interpreted.