Upload a video made with mediaRecorder to the server

Question

Good Morning, I'm new in Stackoverflow. Please Help me. I need to upload the video to the server. The video is recorded using mediarecording but I cannot pass the video to the controller which will then load it. I would like the video to be uploaded by clicking Save button but I can't implement the code for that. I tried with ajax and also with the FormData but it didn't work. I'm using Laravel 7 Framework. This is HTML code:

    <video  muted="muted" ></video>
    <video  id="vid2"  controls></video>
    <button id="btnStart" type="button">Rec</button>
    <button id="btnStop" type="button">Stop</button>
    <button id="btnSave" type="button">Save</button>

This is Javascript code:

     let start = document.getElementById('btnStart');
        let stop = document.getElementById('btnStop');
        let save = document.getElementById('btnSave');
        let mediaRecorder = new MediaRecorder(mediaStreamObj);
        let chunks = [];
        var blob = null;

        start.addEventListener('click', (ev)=>{
            mediaRecorder.start();
            console.log(mediaRecorder.state);
        })

       save.addEventListener('click', (ev)=>{

            const formData = new FormData();
        formData.append('video', blob);
         fetch('videoRec/', {
            method: 'POST',
            body: formData
            })
            .then(response => {console.log('upload success');})
        .catch(error => {console.log('error');})
});


        stop.addEventListener('click', (ev)=>{
            mediaRecorder.stop();
            console.log(mediaRecorder.state);
        });


        mediaRecorder.ondataavailable = function(ev) {
            chunks.push(ev.data);
        }
        mediaRecorder.onstop = (ev)=>{
             blob = new Blob(chunks, { 'type' : chunks[0].type });
            chunks = [];
            let videoURL = window.URL.createObjectURL(blob);
            vidSave.src = videoURL;
            const formData = new FormData();

        formData.append('video', blob);
         fetch('videoRec', {
            method: 'POST',
            body: formData
            })
            .then(response => { console.log('upload success');})
        .catch(error => {console.log('error');})
        } 
        }
    })
    .catch(function(err) { 
        console.log(err.name, err.message); 
    });

This is the route of controller:

Route::post('/videoRec','VideoController@save');

The function of the contrller:

public function save(Request $req){
        $file = $req->file('video');
        $path=$file->store('avatars');
        return ['path'=>$path,'upload'=>'success'];

    }

Answer 1

let blob = new Blob(chunks, { 'type' : 'video/mp4;' })

That might not work. Use the type of the first blob chunks[0].type.

let blob = null;

mediaRecorder.onstop = (ev)=>{
  let blob = new Blob(chunks, { type : chunks[0].type });
  chunks = [];
  let videoURL = window.URL.createObjectURL(blob);
  vidSave.src = videoURL;
}

save.addEventListener('click', (ev) => {
  const formData = new FormData();

  formData.append('video', blob);

  fetch('<url>/<controller>', {
    method: 'POST',
    body: formData
  })
  .then(response => {})
  .catch(error => {})
})

Laravel docs provide some examples of how to get file from formData

public function save(Request $req){
  $file = $request->video;
}