Сохранение огромных файлов

Мне нужно сохранить файл неизвестного размера, потенциально несколько гигабайт, в JS. Источником данных является медиапоток, захваченный с помощью mediarecorder.

В Chrome это можно сделать с помощью API-интерфейсов файловой системы и файлового редактора с файловой системой: URL-адреса, записывая фрагменты BLOB-объектов в запись файла по мере их получения, а затем устанавливая ссылку для загрузки на URL-адрес файла.

Однако я не могу найти способ сделать это в Firefox или Edge (всякий раз, когда он получает медиа-рекордер).


person Daniel Herr    schedule 30.03.2016    source источник


Ответы (1)


Это работает для меня в Firefox:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => record(stream, 5000)
    .then(recording => {
      stop(stream);
      video.src = link.href = URL.createObjectURL(new Blob(recording));
      link.download = "recording.webm";
      link.innerHTML = "Download blob";
      log("Playing "+ recording[0].type +" recording.");
    })
    .catch(log).then(() => stop(stream)))
  .catch(log);

var record = (stream, ms) => {
  var rec = new MediaRecorder(stream), data = [];
  rec.ondataavailable = e => data.push(e.data);
  rec.start();
  log(rec.state + " for "+ (ms / 1000) +" seconds...");
  var stopped = new Promise((r, e) => (rec.onstop = r, rec.onerror = e));
  return Promise.all([stopped, wait(ms).then(() => rec.stop())])
    .then(() => data);
};

var stop = stream => stream.getTracks().forEach(track => track.stop());
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var log = msg => div.innerHTML += "<br>" + msg;
<video id="video" height="120" width="160" autoplay></video>
<a id="link"></a><br>
<div id="div"></div>

Пользователь по-прежнему должен щелкнуть ссылку для скачивания. Я не экспериментировал с размером файла.

person jib    schedule 09.04.2016
comment
Вы установили имя файла recording.blob, но это видеофайл. Что такое тип файла и как вы его воспроизводите? - person styfle; 22.07.2016
comment
@styfle После того, как я запустил этот фрагмент в OSX, ffmpeg говорит, что загруженный файл представляет собой файл формата мультимедиа matroska webm с видеодорожкой vp8, yuv420p, 640x480 внутри. Я изменил расширение в примере с .blob на .webm, и оно отлично работает для меня в качестве URL-адреса файла в Firefox и Chrome, например. файл:///Users/Foo/recording.webm. - person jib; 23.07.2016