Как из JS получить и сохранить на сервер видео файл в формате mp4?

Question

Записываю видео с телефона, скачать могу, но сохранить на сервер не получается.

Как из JS получить и сохранить на сервер видео файл в формате mp4 (создать функцию function upload())?

Мой код:

<script>

var mediaRecorder;
var recordedBlobs;

var gumVideo = document.querySelector('video#gum');
var recordedVideo = document.querySelector('video#recorded');

var recordButton = document.querySelector('button#record');
var playButton = document.querySelector('button#play');
var downloadButton = document.querySelector('button#download');

recordButton.onclick = toggleRecording;
playButton.onclick = play;
downloadButton.onclick = download;


navigator.mediaDevices.getUserMedia({ audio: true,video: true})
  .then((stream) => {
      recordButton.disabled = false;
      console.log('getUserMedia() got stream: ', stream);
      window.stream = stream;
      gumVideo.srcObject = stream;
  })
  .catch((error) => {
      console.log('navigator.getUserMedia error: ', error);
  });

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function handleStop(event) {
  console.log('Recorder stopped: ', event);
}

function toggleRecording() {
  if (recordButton.textContent === 'Start Recording') {
    startRecording();
  } else {
    stopRecording();
recordButton.textContent = 'Start Recording';
playButton.disabled = false;
downloadButton.disabled = false;
  }
}


function startRecording() {
  recordedBlobs = [];

  try {
    mediaRecorder = new MediaRecorder(window.stream);
  } catch (e) {
console.error('Exception while creating MediaRecorder: ' + e);
return;
  }
  console.log('Created MediaRecorder', mediaRecorder);
  recordButton.textContent = 'Stop Recording';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10);
  console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
  mediaRecorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);
  recordedVideo.controls = true;
}

function play() {
  var superBuffer = new Blob(recordedBlobs, {type: 'video/mp4'});
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
}

function download() {
  var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.mp4';
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}
  </script>

Answer 1

Используйте, например, FormData и fetch:

async upload = () => {    //советую использовать стрелочный es6-синтаксис и хотя бы async для всех ваших функций (кроме различных геттеров), чтобы не блокировать поток всякими операциями, вроде начала записи или получения данных
    if (!recordedBlobs.length) return false;
    let data = new FormData();
    data.append('file', recordedBlobs, 'test.mp4');    //синтаксис присоединения файлов к форме, где вторым аргументом может быть в том числе и Blob, а третьим (необязательным) - название файла
    fetch(<some server script url>, {
        method: 'POST',
        body: form
    }).then(response=>{
        console.log(response.ok ? 'Файл сохранен' : 'Сохранение не удалось');
    });
}

БЛОГ НА HUSL

Как из JS получить и сохранить на сервер видео файл в формате mp4?

Ответы (1 шт):