Видео загружаются пустыми на bunny.net с использованием JavaScript

Оффтоп javascript
1

При загрузке видео через JavaScript на bunny.net файлы оказываются пустыми. Ниже приведён обновлённый пример кода:

const videoInputElem = document.querySelector('#selectVideo');
const selectedVideo = videoInputElem.files[0];

function convertFile(file) {
  return new Promise((res, rej) => {
    const readerObj = new FileReader();
    readerObj.onload = () => res(readerObj.result);
    readerObj.onerror = () => rej('Ошибка чтения файла');
    readerObj.readAsDataURL(file);
  });
}

async function uploadFile() {
  const encodedVideo = await convertFile(selectedVideo);
  const createResponse = await fetch('https://video.bunnycdn.com/library/390820/videos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'AccessKey': 'новый_ключ'
    },
    body: JSON.stringify({ name: selectedVideo.name })
  });
  const videoData = await createResponse.json();
  const videoID = videoData.guid;
  await fetch(`https://video.bunnycdn.com/library/390820/videos/${videoID}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/octet-stream',
      'AccessKey': 'новый_ключ'
    },
    body: encodedVideo
  });
}

uploadFile();
2

Проблема может крыться в формате передаваемых данных. В моем опыте при работе с видео часто вызывать readAsArrayBuffer вместо readAsDataURL, т.к. bunny.net ожидает бинарные данные. Или можно использовать FormData для отправки файла напрямую. Проверял на разных сервисах, что формат данных влияет на корректность загрузки, так что сначала убедись, что сервер принимает именно тот формат, который отсылаешь.

3

Предлагаю попробовать использовать readAsArrayBuffer вместо readAsDataURL, хотя судя по коду это основной момент. Может, стоит попробовать передавать файл через FormData? Проверяли ли вы, как сервер реагирует на бинарные данные, или возможно есть нюансы с ключом?

4

Иногда кажется, что всё сделано правильно, а ошибка всё равно остаётся. Лично у меня была похожая ситуация, когда видео не загружалось корректно. Я попробовал использовать readAsArrayBuffer вместо readAsDataURL, и получилось. Возможно, сервер ожидает именно бинарный формат, а не строку в base64. Также проверь, что ключи и заголовки верны. Попробуй внести эти изменения — может, именно это поможет решить проблему.

5

Также можно проверить, правильно ли обрабатываются заголовки и настройки запроса. Возможно, само преобразование в base64 не подходит для bunny.net, а чтение файла не дает полноценный бинарный поток. В моем опыте добавление логирования на стороне клиента помогло выявить, где именно происходит потеря данных, а перенос в режим передачи бинарных данных решил проблему.

6

Попробуйте передать файл напрямую, без предварительного преобразования в base64. Возможно, прямой объект File лучше обрабатывается сервером. У меня похожая ситуация решалась отказом от промежуточной обработки. Что скажете, есть шанс, что проблема в лишних манипуляциях с файлом?