Реакция игрока и авторизация требуют проблемы

Question

Я занимаюсь разработкой приложения, в котором сервер передает некоторые видеофайлы, и клиент на основе ReactJS может воспроизводить этот поток с помощью act-player.

Все отлично работает, когда я играю поток, используя обычную переменную url из компонента ReactPlayer. Но теперь мне нужно передать некоторые данные (токен авторизации) в заголовок вместе с запросом, чтобы получить доступ к потоку.

В идеале было бы так или иначе сделать запрос к потоку, используя Fetch API, а затем пропустить только видеоданные к компоненту ReactPlayer, но я не уверен, возможно ли это.

Реактивист поддерживает такую ​​ситуацию? Если нет, то как мне этого добиться или есть какой-нибудь другой универсальный видеоплеер, который я могу использовать, который поддерживает создание пользовательских запросов?

Если это имеет значение, backend-сервер - это REST-приложение на основе Flask.

Answer 1

Решение, которое я использовал, заключается в изменении запроса XHR, отправляемого HLS, при загрузке потока. Это сделано путем предоставления ReactPlayer компонент некоторых опций для hls:

          <ReactPlayer
              config={{
                file: {
                  hlsOptions: {
                    forceHLS: true,
                    debug: false,
                    xhrSetup: function(xhr, url) {
                      if (needsAuth(url)) {
                        xhr.setRequestHeader('Authorization', getToken())
                      }
                    },
                  },
                },
              }}
            />

Список опций для hls доступен здесь.

Вы можете использовать это с react-player версия 1.1.2 в соответствии с этим вопросом GitHub

Answer 2

Я потратил на это несколько часов, пока наконец не нашел удивительный ответ. Это сработало для меня, так как мне нужно было передать токен в реквизите авторизации.

Если ваш файловый сервер поддерживает CORS, вы можете использовать выборку и URL.createObjectURL

      const token = getUserToken();
const CustomVideo = ({ videoUrl }) => {
    const options = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }
    const [url, setUrl] = useState()
    useEffect(() => {
        fetch(videoUrl, options)
        .then(response => response.blob())
            .then(blob => {
            setUrl(URL.createObjectURL(blob))
            
        });
    }, [videoUrl])
   
    
    return (
        <ReactPlayer url={url} width="100%"  controls />
    )
}

Подробности здесь: https://github.com/CookPete/react-player/issues/282