HLS videos with authorisation enabled does not play on iPhone

[shubham-1211]

I am using react-player to stream the m3u8 video that requires authorisation token to be accessible. Below is my react-player configuration

<ReactPlayer className="camera_video_discover" url={https://api.testdomain.in/hlsvideo/${courseVideo}/index.m3u8} //url={https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8}

          width="100%"
          height="686px"
          controls={true}
          playing
          config={{
            file: {
              attributes: { controlsList: "nodownload" },
              forceHLS: false,
              forceVideo: true,
              
              hlsOptions: {
                xhrSetup: (xhr: any) => {
                  const authToken = getAuthToken();
                  xhr.setRequestHeader("Authorization", `${authToken}`);
                },
              },
            },
          }}
        />

It is working correctly on all other platforms except iOS Safari/Chrome. As per my knowledge iOS redirects the video play to its native player and Authorization token is not getting passed in that. Is there any way to solve this?

[nivritgupta]

Hello @shubham-1211 did you find any solution?

[joshephan]

Same here

---

I tried to following code then fix it on some iPhone env. But some of iphone is not working :(

config={{
              file: {
                attributes: {
                  crossOrigin: 'true',
                  controlsList: 'nodownload'
                },
                forceHLS: true,
                forceVideo: true,
                hlsOptions: {
                  xhrSetup: function (xhr: any, url: any) {
                    xhr.setRequestHeader('token', 'admin');
                  }
                }
              }
            }}

[luwes]

this is because iOS uses native HLS, not hls.js. maybe try adding URL params to the m3u8 URL.