Only getting errors in Safari

[imCorfitz]

What do you want to do with Hls.js? I want to playback a radio stream, and the stream buffers for about 29 seconds, then stops - but only in Safari. HLS.js Demo with my radio stream

What have you tried so far? I have tried to test with different live stream: HLS.js Demo with gameplay stream Which works fine... So I thought it could be a CORS issue.. But I wonder why it works in Chrome then? And MS Edge.

And when I test out my radio stream in the bitmovin tester on safari - I don't have any issues.

Something as simple as the audio component itself doesn't cause issues in safari neither, but doesn't work in Chrome as it doesn't support HLS out of the box.. I am using React-Player in order to have HLS work in Chrome browser.

---

Update:

I tested the stream on my Safari on iPhone. The stream works fine there - so it is apparently only Safari for Mac OS.

Also - just quickly sharing my React code - should there be a config or something that I have missed.

const AudioPlayer = () => {
    const { isPlaying, play, pause, playNextTrack, currentTrack, isRadio } = useMusicPlayer();
    const [isSafari, setIsSafari] = useState(false);
    useEffect(() => {
        setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent));
    }, [setIsSafari])
    const config = {
        file: {
            forceHLS: !isSafari,
            forceVideo: !isSafari,
            hlsVersion: '0.13.2',
        }
    }
    return <ReactPlayer playsinline id="react-player"
        config={config}
        onReady={() => play()}
        onError={(e, data) => { console.log('onError', e); console.log(data) }}
        onBuffer={() => console.log('onBuffer')}
        onStart={() => console.log('onStart')} url={currentTrack} playing={isPlaying} onPause={pause} onPlay={play} onEnded={isRadio ? () => { console.log('ended') } : playNextTrack} />

}

[robwalch]

Safari is reporting that it is a CORS issue. All three renditions fail with the same error:

https://21253.live.streamtheworld.com/OWR_INTERNATIONAL_ADP/HLS/1365156/0/playlist.m3u8 https://21253.live.streamtheworld.com/OWR_INTERNATIONAL_ADP/HLS/1365156/1/playlist.m3u8 https://21253.live.streamtheworld.com/OWR_INTERNATIONAL_ADP/HLS/1365156/2/playlist.m3u8

Failed to load resource: Origin https://hls-js.netlify.app is not allowed by Access-Control-Allow-Origin.

We can't fix or diagnose CORS errors for you. That's a question for your streaming server.

If the stream plays in Safari with video.src = then I suggest not using hls.js to play your HLS streams in Safari. Only use hls.js in other browsers that do not support native playback of HLS by setting video.src.

[imCorfitz]

I got that it could be the CORS issue - but that doesn't answer why it works in Chrome and why bitmovin is able to play the stream without CORS issues in Safari.

The playing in video.src is current workaround.. But I imagined this would appear odd to more people than me... Again... It oddly enough works fine on iPhone Safari as well..

[robwalch]

@CorfitzMe I can't find any evidence that suggests CORS errors in Safari are caused by how playlists are requested by hls.js. Just because it works in other browsers or players is not an indicator that there is a problem with hls.js.

I suggest you use a proxy to debug the responses from your streaming server, and ask your server administrator to look at the server logs for 4XX errors - especially in response to Safari user-agents. A quick check in Charles shows your server responding to a playlist request with a 410 http status code and dropping the Access-Control-Allow-Origin on those error responses.

The demo player is implemented to drop levels that return errors such as these. If you need hls.js to configured to be more fault tolerant because you expect your playlist to error often, try setting the values of levelLoadingMaxRetry and levelLoadingRetryDelay.

https://github.com/video-dev/hls.js/blob/master/docs/API.md#fragloadingmaxretry--manifestloadingmaxretry--levelloadingmaxretry

[robwalch]

v0.14.4 includes fixes for Safari.