Как создать почтовый запрос с использованием blob для Api Giphy в javascript (видео RECORDRT C)

Question

Это мой первый проект в javascript, идея состоит в том, чтобы создать gif с помощью RECORDRT C y subirlo a la api de giphy, я сделал превью, записал видео и теперь хочу загрузить его на giphy, я понимаю, что мне нужно взять blob и сделать запрос с загрузкой конечной точки. Любые комментарии, которые помогут мне двигаться вперед, были бы очень полезны! Спасибо;)

Код:

let constraintObj = {
  audio: false,
  video: {
    facingMode: "user",
    width: {
      min: 640,
      ideal: 1280,
      max: 1920
    },
    height: {
      min: 480,
      ideal: 720,
      max: 1080
    }
  }
};
// width: 1280, height: 720  -- preference only
// facingMode: {exact: "user"}
// facingMode: "environment"

//handle older browsers that might implement getUserMedia in some way
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
  navigator.mediaDevices.getUserMedia = function(constraintObj) {
    let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraintObj, resolve, reject);
    });
  }
} else {
  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      devices.forEach(device => {
        console.log(device.kind.toUpperCase(), device.label);
        //, device.deviceId
      })
    })
    .catch(err => {
      console.log(err.name, err.message);
    })
}

navigator.mediaDevices.getUserMedia(constraintObj)
  .then(function(mediaStreamObj) {
    //connect the media stream to the first video element
    let video = document.querySelector('video');
    if ("srcObject" in video) {
      video.srcObject = mediaStreamObj;
    } else {
      //old version
      video.src = window.URL.createObjectURL(mediaStreamObj);
    }

    video.onloadedmetadata = function(ev) {
      //show in the video element what is being captured by the webcam
      video.play();
    };

    //add listeners for saving video/audio
    let start = document.getElementById('btnStart');
    let stop = document.getElementById('btnStop');
    let vidSave = document.getElementById('vid2');
    let mediaRecorder = new MediaRecorder(mediaStreamObj);
    let chunks = [];

    start.addEventListener('click', (ev) => {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
    })
    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);
  });


function uploadGif() {
  const apiKey = `KcNytFirfMyEbq16U4LVnvGQQGy4QnJ0`;
  upload = new FormData();
  upload.append("file", blob, "usergif.gif");
  console.log(upload.get("file"));

  fetch("https://upload.giphy.com/v1/gifs?file=" + upload + "&api_key=" + apiKey, {
      method: "POST"
    })
    .then(response => {
      console.log(response.status);
      return response.json;
    })
}

<main>

  <p><button id="btnStart">Capturar</button><br/>
    <button id="btnStop">Listo</button></p>

  <video controls></video>

  <video id="vid2" controls></video>

</main>