Fix LL-HLS playback issue

[zcesur]

We currently use HLS to deliver livestreams and VODs to users, which works fine on most devices and browsers. We also implemented LL-HLS delivery (#60), but it doesn't work in some cases. We found out that:

• If we use video.js, it works everywhere except iOS
• If we use vidstack, it works on all devices including iOS, but the playback buffers a lot

Ideally we would make it work with Vidstack so we can switch to that as our default player

Here's a matrix of all player/delivery configurations we have right now:

Branch	Player	Delivery
main	video.js	HLS
ll-hls	video.js	LL-HLS
vidstack	vidstack	HLS
vidstack-llhls	vidstack	LL-HLS

Steps to Reproduce

1. Check out one of the LL-HLS branches above
2. Set up and run the development server
3. Paste your RTMP URL from settings into OBS and start streaming
4. Navigate to your stream on an iOS device

Useful Links

• videojs/video.js: Video.js - open source HTML5 video player
• videojs/http-streaming: HLS, DASH, and future HTTP streaming protocols library for video.js
• vidstack/player: Vidstack Player
• Enabling Low-Latency HTTP Live Streaming (HLS) | Apple Developer Documentation

[zcesur]

/bounty $300

[algora-pbc]

## 💎 $300 bounty • Algora

### Steps to solve:
1. Start working: Comment /attempt #91 with your implementation plan
2. Submit work: Create a pull request including /claim #91 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

### ❗ Important guidelines:
- To claim a bounty, you need to provide a short demo video of your changes in your pull request
- If anything is unclear, ask for clarification before starting as this will help avoid potential rework
- For assistance or questions, join our Discord

Thank you for contributing to algora-io/tv!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🟢 @DestinedCodes	Sep 12, 2024, 4:41:45 PM	WIP
🟢 @lastcanal	Sep 17, 2024, 2:47:37 AM	#96

[ThePrimeJnr]

/attempt #91

Options

• Cancel my attempt

[lastcanal]

I believe the issue is that video.js supports X-PRELOAD-HINT while HLS.js (via Vidstack) does not, as least not yet. Luckily the amazing devs over at HLS.js have a feature/preload_hint branch that implements it. This could be why Vidstack is stalling while Video.js is not.

Currently none of the X-PRELOAD-HINT code that holds requests open until the future 'preloaded' new segment is ready is being exercised by Vidstack.

Here is a waterfall from vanilla Vidstack, you'll notice requests for partial segments happen after the manifest response returns. The short ~30ms duration of the requests show the true time to load a segment on my laptop.

With the feature/preload_hint branch you'll notice that requests for the next segment are concurrent with requests for the new manifest and the 'future' segment is able to be downloaded before the new manifest even ready.

I have a PR ready with this very small change, but the ultimate solution to combat stalls is to implement multiple bitrates by transcoding using the Membrane FFmpeg SWScale plugin. Hopefully this change makes it possible to use Vidstack because it's quite nice!

/attempt #91

Options

• Cancel my attempt

[algora-pbc]

💡 @lastcanal submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[algora-pbc]

🎉🎈 @lastcanal has been awarded $300! 🎈🎊

• Share on socials
• Give feedback