проблема с реактивным игроком и авторизацией

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

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

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

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

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


reactjs flask authorization react-player
person SP5RFD    schedule 08.11.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Решение, которое я использовал, - это изменить запрос 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

person Stephane L    schedule 27.01.2019