WebRTC and sending pics from client side to server side

I am working on a NodeJS project.
The objective is to take a picture of a user’s webcam from the client-side and upload it to the server (Heroku) without prompting the user.
I have to use this image on the server to POST on an API.

This is the initial idea (MDN docs)

What I have tried so far-

  1. node-webcam
    The problem with this package was that it makes the pictures on the client-side and prompts users to download them. Most of the articles and tutorials had a similar problem.

  2. node-server-screenshot
    Since I was not able to take pics from live video and upload. I thought of rendering the live video of the client and take a screenshot of it. The idea was very promising as this works flawlessly in the local machine. It opens up the URL in electron and takes a screenshot. It also helped me to store the image on my server automatically.
    But when deployed on Heroku it doesn’t works. Reason- Heroku servers work on stack OS and do not run electron pre-installed. I tried to make buildpacks of electron on Heroku serve. And failed again.

  3. Save via fs
    I tried to save the image generated to the server by fs. (I quite didn’t get the fs system). The problem I ran into was that the image is generated in img-64 format and I needed .jpg images. (I am still trying this method). @ssshreyans26 Bhaiya helped me out with, I was able to convert the img-64 to a string but quite confused about what to do next.

  4. Online Screenshots APIs.
    These have a problem that they are good for static sites. Since Webrtc is working on the client side the screenshot they generate are blank.

What I have done so far-
I have implemented the project JS and HTML from here.
I have made the NodeJS server and deployed it here
Tried and failed to implement most of the ideas above.