react-player 和需要授权的问题答案

【问题标题】：react-player and authorization required problemreact-player 和需要授权的问题
【发布时间】：2019-04-12 01:46:42
【问题描述】：

我正在开发一个应用程序，其中服务器流一些视频文件，基于 ReactJS 的客户端可以使用react-player 播放该流。

当我使用 ReactPlayer 组件中的普通 url 变量播放流时，一切都很好。但现在我需要在标头中传递一些数据（授权令牌）以及请求以访问流。

理想情况是使用 Fetch API 以某种方式向流发出请求，然后仅将视频数据绕过到 ReactPlayer 组件，但我不确定是否可能。

react-player 支持这种情况吗？如果没有，我该如何实现这一点，或者我可以使用任何其他支持自定义请求制作的通用视频播放器？

如果这很重要，后端服务器是基于 Flask 的 REST api 应用程序。

【问题讨论】：

标签： reactjs flask authorization react-player

【解决方案1】：

我花了几个小时才终于找到了这个惊人的答案。它对我有用，因为我需要在授权道具上传递令牌。

如果您的文件服务器支持 CORS，您可以使用 fetch 和 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

【讨论】：

【解决方案2】：

我使用的解决方案是在加载流时修改 HLS 发送的 XHR 请求。这是通过为 ReactPlayer 组件提供一些 hls 选项来实现的：

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

hls 的选项列表可用here。

根据this github issue1.1.2版本react-player以后可以使用这个

【讨论】：