Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

102
Vistas
Converting MediaStream's VideoTrack to Blob and to FormData and to PNG

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.

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.