hls.js 를 이용한 liveStreaming 서비스를 사용할 때 사용할 만한 config!

오늘은 hls.js에 대한 기록이다.

 

https://github.com/video-dev/hls.js

video-dev/hls.js

 

hls.js란? 아주 간단하게

 

HTTP Live Streaming의 약어로 2017년 프로젝트를 하면서 알게되었다.

HTML5 Video, MediaSource Extensions이 지원되야만 사용이 가능하다.

 

시작

사실 오늘 기록할 것은 config에 대한 내용이므로 hls.js를 전반적으로 분석하고 기록하는 것은 아니지만.. 그래도 어떻게 시작하는지는 적어놔야지..

 

출처 : hls.js github

 

API, docs

 

hls.js 는 docs 정리가 잘되어 있어서 사용할 때 굉장히 편하다.

물론 짧은 영어를 하는 나는.. 번역하는데 힘이 들긴 하지만 그래도 docs 조차 없어서 하나하나 테스트해봐야 하는 여느 라이브러리들과는 다르게 상당히 친절하다.

 

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

video-dev/hls.js

 

config

 

수많은 config들 중에서 나는 live Streaming 관련된 config를 조금 확인해 보았다.

애초에 미디어쪽에 큰 지식이 없었는데 hls.js를 접하면서 조금이나마(?) 공부하고 사용해 보는 것 같다.

 

현재 진행하고 있는 프로젝트는 Live Streaming을 이용한 서비스 개발인데, 발생한 문제는 Chrome에서 사용시 자동 재생 이슈가 있다는것!  

( 포스트 이동  -> https://ddunnimlabs.tistory.com/94?category=786462 )

 

그리고 버퍼 이슈..

 

트위치나 다른 인터넷 방송 플랫폼을 보면 네트워크나 로딩이슈로 인하여 방송 지연이 발생할 경우 갑자기 가장 빠른 지연상태로 seek 되는것을 볼 수 있는데

내가 개발해 놓은것은 그런 seek나 buffer에 대한 설정을 해주지 않아서 페이지가 실행되고 정지 혹은 재생을 하지 않으면 buffer는 계속 땡겨오지만 가장 실시간에 가까운 영상을 보여주지 않고 그동안 쌓인 버퍼부터 재생한다.

 

즉 페이지에 들어가자마자 재생한 유저와 10초뒤에 재생한 유저가 서로 약 10초정도의 영상 지연을 가지게 되며, 이를 극복할 수 있는 방법은 없었다.

 

이 문제는 hls.js 설정 값을 튜닝해주면 해결이 가능할 것 같다.

 

친절하게도 hls.js docs를 보면 아래와 같이 config를 모아놓았다.

출처 : hls.js github docs

 

앞에 live가 붙어버리니 이거 liveStreaming관련된 config 같은 느낌적인 느낌

 

* 아래 표에 나오는 N이란 라이브 재생 목록의 제일 끝부분이다.

 

Config	Default Value	Description
liveSyncDurationCount	3	3으로 설정하면 N-3 부터 재생이 실행되며, 즉 기본적으로 3초 지연이 기본값이라는 것인데, 이 시간을 줄이면 지연시간이 줄어들 수 있지만 재생이 멈출 수 있음. 네트워크 상황을 고려하여 튜닝해야함.
liveMaxLatencyDurationCount	Infinity	로딩한 버퍼가 N 기준으로 설정값 만큼 차이나면 N값을 다시 검색한다. 즉 이 값을 10으로 설정하면 N-10 이상 차이날 경우 N 값을 다시 검색한다.
liveSyncDuration	undefined	Alternative parameter to liveSyncDurationCount, expressed in seconds vs number of segments. If defined in the configuration object, liveSyncDuration will take precedence over the default liveSyncDurationCount. You can't define this parameter and either liveSyncDurationCount or liveMaxLatencyDurationCount in your configuration object at the same time. A value too low (inferior to ~3 segment durations) is likely to cause playback stalls. ( 이 값이랑.. 아래 값은 뭔말인지 모르겠음..ㅠ )
liveMaxLatencyDuration	undefined	Alternative parameter to liveMaxLatencyDurationCount, expressed in seconds vs number of segments. If defined in the configuration object, liveMaxLatencyDuration will take precedence over the default liveMaxLatencyDurationCount. If set, this value must be stricly superior to liveSyncDuration which must be defined as well. You can't define this parameter and either liveSyncDurationCount or liveMaxLatencyDurationCount in your configuration object at the same time. A value too close from liveSyncDuration is likely to cause playback stalls.
liveDurationInfinity	false	현재 미디어 소스 기간을 재정의함. iOS Safari, Safari, Android Chrome 등의 환경에서 라이브 UI를 만들때 true로 사용하면 좋음.
liveBackBufferLength	Infinity	라이브 스트림동안 유지할 버퍼의 최대 길이를 설정함. 초단위 이며 이후에 버퍼링된 비디오는 모두 제거됨. 0으로 설정할 경우 최소 수치만큼의 버퍼만 유지함.

 

위의 config를 확인해 보면 나에게 테스트 해볼만한 config는 liveSyncDurationCount , liveMaxLatencyDurationCount, liveBackBufferLength 인 것 같다.