How to push photo from user's webcam into input[type="file"]?

Question

JavaScript

I carefully lit up the documentation on getUserMedia () and getting a picture from the user's camera in canvas. There was one question left: how to assign this received photo as a "value" for the input field?
Now there is one large form, with a bunch of fields, including file attachments. Everything is sent to the server in bulk. There is an irresistible desire to attach files directly from the webcam. The preview window with the stream and getting a snapshot is almost completed. Only this moment slows down :(

Answer 1

Nothing can be stuffed into input[type=file] . As an option canvas.asDataURL and forward this value in a hidden field. To some extent, crutches, but nothing faster comes to mind

Answer 2

Why do you need input[type=file]?
I would do so.
The user enters a page, for example, filling out his profile, where, in addition to his name, date of birth, etc., you need to connect through a webcam.
To do this, when entering the page, you need to create a ramdom identifier, save it to the session. After the user has taken a photo, the path to the photo is written to the database along with this identifier, which he has in the session. When a person saves the profile (name, surname, birthday, etc.), then together with the profile we save this very identifier, after saving the profile, we look for a photo by this identifier and associate it with the profile

Answer 3

Good day. I'm typing the registration page and a similar question arose with yours. May I know how you solved it?