Sending recorded video directly from recording to server

Question

I am building a react recording web app. Currently I record a video and when I stop the recorder it download the video via its created blob url, then I upload the downloaded video to backend with <input type="file"> and then store it to the destination folder with multer package

What I want is to send the recorded video directly to backend without downloading and uploading it. I didn't find a useful tutorial about it. nor I found something related to this in the doc of library I am using (react-media-recorder)

the video tag:

<video ref={videoRef} className='text-block-10 middle video' width="308" height="300" src={mediaBlobUrl} controls /\>

the code to download the video with the 'mediaBloblUrl' attribute of 'react-media-recorder' package:

stopRecording()                                                                                         
const a = document.createElement("a")                                               
document.body.appendChild(a)                                                                          
a.style = "display: none"                                                                               
a.href = mediaBlobUrl                                                                                        
a.download = 'test.mp4'                                                                             
a.click()

I am not finding any tutorial regarding this problem, or any related question that had been asked here.

Answer 1

Here how I get the blob from blobUrl:

const videoBlob = await fetch(url).then((e) => e.blob())

The function to convert blob to mp4 file type:

function blobToFile(theBlob, fileName) {
    return new File([theBlob], fileName, { lastModified: new Date().getTime(), type: theBlob.type })
  }