如何使用JavaScript提交HTML video标签中嵌入的录制视频及表单数据

错误原因 #

你当前实现不生效的核心原因是：window.URL.createObjectURL()生成的是浏览器为本地Blob对象创建的临时访问地址，仅在当前页面会话内有效，本质是一串指向内存资源的标识字符串，并不是实际的视频文件。你拆分该字符串得到的只是无意义的字符片段，提交到服务端自然无法得到正确的视频文件。

修改步骤 #

1. 调整代码块1逻辑，全局存储录制的视频Blob #

首先在全局作用域声明变量存储录制结果，生成视频Blob后给该变量赋值，方便提交逻辑调用：

<video controls id='video'></video>

// 全局作用域声明变量存储录制好的视频Blob
let recordedVideo = null;

navigator.mediaDevices.getUserMedia(constraintObj)
  .then(function(mediaStreamObj){
    let mediaRecorder = new MediaRecorder(mediaStreamObj);
    let vidData= [];

    mediaRecorder.start();
    if(mediaRecorder.state == 'recording'){
     timer();
    }
    mediaRecorder.ondataavailable = function(ev){
        vidData.push(ev.data);
    }
    // 录制10秒后执行逻辑
    setTimeout(()=>{
      stopRecording();
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      mediaRecorder.onstop = (ev)=>{
        let mediafile= new Blob(vidData, { 'type' : 'video/mp4;' });
        // 给全局变量赋值
        recordedVideo = mediafile;
        vidData= [];
        let videoURL = window.URL.createObjectURL(mediafile);
        document.getElementById('video').src = videoURL;
      }
      
      sendDataModal();
      sec =0;
    }, 10000);
  })
  .catch((err) => {
        var errName = err.name;
        document.getElementById('msgPanel').className = 'error'
        document.getElementById('msgPanel').textContent = errors[errName];
  });

2. 调整代码块2提交逻辑，直接添加Blob到FormData #

删除之前拆分video.src的错误代码，直接将全局存储的Blob对象加入FormData：

let payload = new FormData();
payload.append('institution', institution.value);
payload.append('anonymity', anonimityOnOff);
payload.append('lat', latitude);
payload.append('long', longitude);
payload.append('today', timeStamp);

// 直接添加Blob对象到FormData
if(recordedVideo) {
  payload.append('mediafile', recordedVideo, "mediafile.mp4");
}

注意事项 #

发送FormData请求时，不要手动设置Content-Type: multipart/form-data请求头，浏览器会自动生成带分隔符的正确请求头，手动设置会导致服务端无法正常解析表单数据。

内容的提问来源于stack exchange，提问作者Albert Naa