将mediaRecorder制作的视频上传到服务器

Question

早上好，我是Stackoverflow的新手。请帮我。我需要将视频上传到服务器。视频是使用mediarecording录制的，但是我无法将视频传递给控制器​​，然后控制器将进行加载。我希望通过单击“保存”按钮来上传视频，但是我无法实现该代码。我尝试使用ajax以及FormData，但是没有用。我正在使用Laravel 7 Framework。这是HTML代码：

    <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>

这是Javascript代码：

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

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

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

            var fd = new FormData();

          fd.append('data', blob);
$.ajax({
    type: 'POST',
    url: '/videoRec/data,
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
})
        })

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


        mediaRecorder.ondataavailable = function(ev) {
            chunks.push(ev.data);
        }
        mediaRecorder.onstop = (ev)=>{
            let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
            chunks = [];
            let videoURL = window.URL.createObjectURL(blob);
            vidSave.src = videoURL;
        }
    })
    .catch(function(err) { 
        console.log(err.name, err.message); 
    });

这是控制者的路线：

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

控制功能：

public function save(Request $req){


    }

Answer 1

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

这可能行不通。使用第一个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提供了一些有关如何从formData获取文件的示例

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