使用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");