Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

346
Visualizações
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.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda