Как читать большие видеофайлы в JavaScript с помощью FileReader? - PullRequest
Новая
       6

Как читать большие видеофайлы в JavaScript с помощью FileReader?

1 голос
/ 03 апреля 2020

Я хочу, чтобы пользователь моего веб-сайта мог загружать в него потенциально большой видеофайл, используя ввод HTML-файла. Видео должно затем обрабатываться и воспроизводиться локально в браузере пользователя. 

let fileInput = document.createElement("INPUT");
fileInput.setAttribute("type", "file");
fileInput.onChange = onFileSelected;

Для чтения видеофайла, загруженного пользователем, я хотел использовать File Reader, например: 

function onFileSelected(e) {
  // The file uploaded by the user:
  let file = e.target.files[0];

  // Create a file reader:
  let reader = new  FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e) {
    video.src = e.target.result;
  }
}

Однако, когда я загружал действительно большие видеофайлы (≈300 МБ), e.target.result был не URI для видеофайла, как я ожидал, а пустой строкой.

Как я могу читать очень большие видеофайлы с использованием File Reader in JavaScript?

1 Ответ

1 голос
/ 03 апреля 2020

Класс FileReader в JavaScript содержит несколько методов для чтения файлов :

  • readAsText(): Это читает файл и возвращает его содержимое в виде текста. Подходит для небольших текстовых файлов.
  • readAsBinaryString(): считывает файл и возвращает его содержимое в виде двоичной строки. Подходит для небольших файлов любого типа.
  • readAsDataURL(): Это читает файл и возвращает URL-адрес данных, ссылающийся на него. Это неэффективно для больших файлов, так как файл загружается в память целиком перед обработкой.
  • readAsArrayBuffer(): Это читает файл и возвращает ArrayBuffer, содержащий входной файл, разделенный на более мелкие части ». Это работает и для очень больших файлов.

В этом вопросе используется метод readAsDataURL(), так как он обычно наиболее удобен. Однако для очень больших видеофайлов (и очень больших файлов в целом) это не работает по причине, описанной выше, приводящей к пустому результату. Вместо этого вы должны использовать readAsArrayBuffer(): 

let reader = new  FileReader();
reader.readAsArrayBuffer(file);

Теперь программа чтения файлов возвращает ArrayBuffer после загрузки файла. Чтобы показать видео в формате HTML, мы должны преобразовать этот буфер в большой двоичный объект, который затем может дать нам URL-адрес видеофайла: 

reader.onload = function(e) {
  // The file reader gives us an ArrayBuffer:
  let buffer = e.target.result;

  // We have to convert the buffer to a blob:
  let videoBlob = new Blob([new Uint8Array(buffer)], { type: 'video/mp4' });

  // The blob gives us a URL to the video file:
  let url = window.URL.createObjectURL(videoBlob);

  video.src = url;
}
...