时间戳

首页 > 解决方案 > Download video embedded in html video tag using javascript

javascript - Download video embedded in html video tag using javascript

问题描述

I would be very grateful if you guys could help me solve this problem that has plagued me for days

Code block 1(Cb1) records a video and embeds it in a tag after 10 seconds and displays a modal.

Code block 2 collects data from the user using the modal in Cb1. On submit from the modal, I want to add the video recorded earlier and submit it together with the additional data collected from the user. Thank you.

Code block 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];
  });
}

Code block 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");

标签： javascript

解决方案

经过几个小时的研究，我发现了这个对我有用的 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");

推荐阅读