Как решить долгий запрос blob?

Question

[74383773]

Есть код который меняет mp4 на блоб протокол, но если взять довольно длинное видео, скажем на 25 минут, то видео не сразу появляется, а спустя минуты 3, но если взять какое-то фильм, то вообще ждать можно вечно. Как решить эту проблему?

function App() {
  const [src, setSrc] = React.useState('')
  
  React.useEffect(() => {
    const fetchVideo = async () => {
      try {
        const response = await axios.get('//assets.mixkit.co/videos/preview/mixkit-white-cat-lying-among-the-grasses-seen-up-close-22732-large.mp4', { responseType: 'blob' })

        console.log(response)

        setSrc(URL.createObjectURL(response.data))
      } catch (err) {
        console.log(err)
      }
    };

    fetchVideo()
  }, [])

  console.log(src)

  return (<video src={src} controls />);
}

Comments

[Александр]

Видимо никак, Вы же скачиваете себе видео целиком.

[74383773]

Александр, то есть, видео должно быть у меня на сервере и тогда все будет ок? :(

[Александр]

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

[Антон Антон]

74383773,

то есть, видео должно быть у меня на сервере и тогда все будет ок? :(

нет, идет скачивание на клиента.
в теории можно скачивать кусками и воспроизводить через https://developer.mozilla.org/en-US/docs/Web/API/S... но я такого не пробовал

[74383773]

Антон Антон, вот только хотел спросить про кусочки :)

[74383773]

Антон Антон, у меня вот сейчас 25 минутное видео в 1040, уже минуты 6 грузит :/

[74383773]

Александр, на стримы и буфферы натыкался, но так и не понял :(

[Антон Антон]

копипаста со стековерфлоу

const response = await axios.get('https://stream.example.com', {
    headers: {Authorization: `Bearer ${token}`, 
    responseType: 'stream'
});
...
const stream = response.data;

if (typeof video.srcObject == "object") {
  video.srcObject = stream;
} else {
  video.src = URL.createObjectURL(stream);
}

[74383773]

Антон Антон, Я это видел, он жаловался на srcObject

[Антон Антон]

74383773, этот код не может на srcObject жаловаться

[74383773]

Антон Антон, ну он все равно не работает :)

[74383773]

Rise, не поверишь, хром

[Александр]

Rise, ну а какая в данном конкретном случае разница будет? Или как Вы можете утверждать, что речь была не про именование функции fetchVideo?

[Aetae]

Честного говоря если ты это делаешь из-за авторизации - пробуй таки пробить использование куки для любой работы с файлами. Это мракобесие с использованием authorization заголовка не только для сраных json-чиков сливает в унитаз как многолетний юзер экспириенс так и 100500 оптимизаций которые есть в браузере из коробки.