HLSの正しい制御の仕方を考える

このスクラップのきっかけ

• 関わっているプロダクトで、AWS MediaLiveを活用した配信と、それを流すプレイヤーを作成している
• Next.jsを用いてフロント側は作成しており、HLSの制御にはhls.jsを利用していた
• しかしhls.jsはiOSには対応していない。そのため、iOSのみOS側のネイティブ処理、それ以外がhls.jsでの制御という形になっていた
• ここで深く内部処理を理解していなかった結果、iOSとそれ以外のライブ配信で流れている映像に50秒ほどのラグができてしまうというバグが起こった
• それに対して試行錯誤したメモを残しつつ、他の方で正しい対処法をご存知の方がいれば知恵をお借りしたいというのがこのスクラップの意図になります

ラグの原因

• ラグの原因となったのはvideo要素のcurrentTimeやdurationの挙動の差のせいだと考えられる
• 当初適切な参考記事が見つからなかったため、想像で最新の映像を取ってくるためにduration - X秒をcurrentTimeにすることで最新のタイムに追従しようとしていた
• 小さいとバッファに追いついてしまい映像が止まりがちになるということが起きたためこのXをかなり大きめに取っていた
• するとiOS以外に関してはこの方策が効き、止まりがちになることを防ぐことができた
• しかしiOSではこのXがまともに効いてしまい、実際に最新状態より約X秒遅れた状態になってしまうということが発生していた

ひとまずの対策

• そこで現状iOSとそれ以外で処理を変えることで対処している
• iOSに関しては「最新状態＝一律でcurrentTimeが0」という仮定で設定するようにした
• それ以外に関してはhls.jsのデフォルトのliveSyncDurationCountという起動時に何セグメント読み込んでおくかを規定する数値が3であること、セグメント長が6秒であることからduration - 18を最新とし、念の為0とduration - 18の大きい方を採用することにした
• これによってラグはほぼなくなった上に再生も止まらなかったらしい

懸念点

• そもそもライブ配信時のcurrentTimeの値に関して現状参考になりそうな知見がネット上になく、今回の対策が正しいものなのかが微妙
• durationを使ってしまうと、読み込みが早い端末などでブレが起きないかが若干心配
• そもそもこれらもきちんと理解しないまま雰囲気で対策しているので後学のためにも正しい考え方を知っておきたい