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-
-
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. -
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. -
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. -
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.