使用javascript下载嵌入在html视频标签中的视频

Question

如果你们能帮我解决这个困扰我好几天的问题，我将不胜感激

代码块 1(Cb1) 录制视频并在 10 秒后将其嵌入标签中并显示模态。

代码块 2 使用 Cb1 中的模态从用户那里收集数据。 从模态提交时，我想添加之前录制的视频并将其与从用户收集的其他数据一起提交。 谢谢你。

代码块 1

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

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);
    }
    //run this after 10s of recording 
    setTimeout(()=>{
      stopRecording();
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      mediaRecorder.onstop = (ev)=>{
        let mediafile= new Blob(vidData, { 'type' : 'video/mp4;' });
        
        vidData= [];
        let videoURL = window.URL.createObjectURL(mediafile);
        document.getElementById('video').src = videoURL;
      }
      
      sendDataModal();//prompt('Please where do you want to send this video?');
      sec =0; // reset seconds on stop
    }, 10000);
      
  })
  .catch((err) => {
        var errName = err.name;
        document.getElementById('msgPanel').className = 'error'
        document.getElementById('msgPanel').textContent = errors[errName];
  });
}

代码块 2

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);
  
  //I tried this but it did not work
  let mediaURL = document.getElementById('video').src;      
  let urlSections = mediaURL.split("/");
  let mediafile = urlSections[3]+".mp4";
  
  payload.append('mediafile', mediafile, "mediafile.mp4");
    

Answer 1

经过几个小时的研究，我发现了这个对我有用的 XMLHttpRequest 方法。 我现在正在研究如何将其转换为 fetch api。 任何帮助将不胜感激。 以下是对我有用的黑客

var xhr = new XMLHttpRequest();
var video=document.getElementById("vid2");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
var blob = new Blob([this.response], {type: 'video/webm'});
payload.append("mediafile",blob,"mediafile.webm");