Hi guys, I am making an app prototype and I am trying to allow users to access their camera (using the ‘start’ button on the screenshot below) and start filming directly from Webflow.
Ideally I need the user to be able to then upload the video they just filmed on the page so that they can view it and create their own gallery/collection of videos.
How could this be made possible? So far I have managed to connect the camera using this custom code ```
But haven't been able to upload and allow the user to create a collection of videos using this app prototype.
Does anyone know how I could do this?
----------
Here is my public share link: https://preview.webflow.com/preview/fitfam-2d2d36?utm_medium=preview_link&utm_source=dashboard&utm_content=fitfam-2d2d36&preview=f99e7e423d03291c6f97cc68e8412ab5&mode=preview
Published link (made for phone view): https://preview.webflow.com/preview/fitfam-2d2d36?utm_medium=preview_link&utm_source=dashboard&utm_content=fitfam-2d2d36&preview=f99e7e423d03291c6f97cc68e8412ab5&mode=preview
Many thanks!
Oof, there’s going to be someone who has put more research into this than me; but I want to get the discussion started since I would like to know as well.
I have built this in the past, using only html5, js and node. From what Ive learned is that it is fairly easy to have camera live image on your html5 canvas but capturing it and storing that file remotely is not browser native. What we ended up doing was sending the video data as blob to a node backend that then managed the blob as files and passed then to the accounts video storage service.
So in terms of backend, I havent seen anything in webflow yet that can do this (mind you, my way might not have been the easiest way NOR the only way!). But if you ignore backend/storage for a sec; I wonder if you can let the browser render a file from the capture. If so, with custom code, then you can simply let javascript pass that file over to your backend that’s listening. Assuming that the video file is in browser cache all the time between recording and sending it off. Because I don’t think webflow takes on external file upload via javascript (correct me if I’m wrong here!)
I have solved this issue by using a third party tool and by integrating it with Webflow. I have written a tutorial which is published here in the forum.
