Реакция игрока и авторизация требуют проблемы - PullRequest
0 голосов
/ 08 ноября 2018

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

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

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

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

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

1 Ответ

0 голосов
/ 27 января 2019

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

...