主页 / 问题 / 1169954
Accepted
Иван
Asked:2020-08-25 00:46:29 +0000 UTC2020-08-25 00:46:29 +0000 UTC

如何从 JS 获取并保存 mp4 格式的视频文件？

  • 772

我用手机录制视频，可以下载，但无法保存到服务器。

如何从JS（创建函数upload（）函数）获取并保存mp4格式的视频文件到服务器？

我的代码：

<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>
javascript

1 个回答

  1. Best Answer

    使用例如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 ? 'Файл сохранен' : 'Сохранение не удалось');
    });
}
    • 2

相关问题