John Davidson

Message:

I have a form where users can record themselves with their webcam using getUserMedia, and I need to send the file they record to another page before saving the file to the server.

My question is how can I achieve this? So far I've generated a blob of the video, how do I send this through my form to the next page so I can access the file and then store it on the server?

Currently I'm generating the blob like so, which works:

let videoURL = window.URL.createObjectURL(blob, {autoRevoke: false});

But I'm not sure how I can send this file as part of the form's POST request without using AJAX and FormData. Is it even possible or am I approaching this incorrectly?

---

My Answer:
If you want to send the recorded video file through a form without using AJAX and FormData, you can try converting the blob to a base64 encoded string and then include it as a hidden input field in your form. Here's an example of how you can achieve this:

1. Convert the blob to a base64 encoded string:

javascript
let reader = new FileReader();
reader.onload = function() {
let base64data = reader.result.split(',')[1];
document.getElementById('videoData').value = base64data;
};
reader.readAsDataURL(blob);


2. Include a hidden input field in your form to store the base64 encoded video data:

html

3. When the form is submitted, the base64 encoded video data will be sent along with the other form data to the next page. You can then decode the base64 data back to a blob or file on the server side.

Keep in mind that base64 encoding can increase the size of the data by approximately 33%, so this method may not be suitable for large video files. Additionally, using AJAX and FormData is a more common and efficient way to send files asynchronously without reloading the page.