🍟Hls 콘텐츠 변경 감시

현재 Hls를 사용하는 도중 컨텐츠가 바뀌면 화면에 보여지는 정보가 바뀌어 하는 서비스를 제공하고있다.

근데 현재 interval으로 API를 호출하기 때문에 서버에 부담이 가고 있어서, 이번에 Hls에서 컨텐츠 변경감지 하는 법에 대해 알아보았다.

 

 

🥙 Hls.js에서의 변경 감지

 

🦴 Hls.js를 지원하는 경우

만약 Hls.js를 사용할 수 있는 상황이라면 아래 처럼, FRAG_CHANGED 이벤트가 트리거가 될때 , "DIS" 가 포함 되면 컨텐츠가 변경된것으로 감지가 된다. 

 

Hls에서 EXT-X-DISCONTINUITY은 컨텐츠 내용이 변경될때마다 발견되는 태그이다.

아래는 Hls.js사용할 수 있는 경우에 대한 코드이다.

현재는 배열의 길이로 체크를 했지만, 정확하게 할려면 "DIS"가 포함되면 컨텐츠 변경에 따른 API를 호출하는게 맞을것이다.

let video = null;
		/* 샘플 m3u8 url */
		let videoSrc = 'm3u8확장자를 가진 url'

		/* initVideo */
		const initVideo = () => {
			video = document.querySelector('#video')
		}

		/* initHls : hls를 초기화 하는 함수 */
		const initHls = () => {
			hls = new Hls({
					autoStartLoad: false,
					renderTextTracksNatively: true
				});

				hls.loadSource(videoSrc);
				hls.attachMedia(video);
				hls.startLoad();



				hls.on(Hls.Events.FRAG_CHANGED, (event, data) => {
					if (data.frag.tagList.length > 1) {
						console.log(`${new Date()} FRAG_CHANGED triggered`);
						console.log(data.frag.tagList);
					}
				});
		}

		/* DOMContentLoaded 로드를 통해 video Element 담기*/
		window.addEventListener("DOMContentLoaded", () => {
			initVideo();
			initHls();
		})

🦴 Hls.js를 지원하지 않는 경우

Ios/safari 같은 경우는 Hls.js를 지원하지 않는다. ios/safari같은 경우는 Hls가 기본적으로 built-in 되어있다.

그래서 다른 브라우저에서 지원되지 않는 이벤트를 사용해야한다.

https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event

AudioTrackList: addtrack event - Web APIs | MDN

addTrack 이벤트는 safari에서만 사용이 가능하다.
콘텐츠가 변경될때마다 이벤트가 트리거가 된것을 확인 할 수 있다.

 

let video = null;
		/* 샘플 m3u8 url */
		let videoSrc = 'm3u8확장자를 가진 URL'

		/* initVideo */
		const initVideo = () => {
			video = document.querySelector('#video')
		}

		/* initHls : hls를 초기화 하는 함수 */
		const initHls = () => {
			if (Hls.isSupported()) {
				
			}
       		/* IOS/Safari 코드 */
			/* ios/safari 같은 경우에 hls가 built-in 되어있다.*/
			else {
				video.src = videoSrc;

				video.audioTracks.addEventListener("addtrack", event => {
					console.log("evnet : ", event);
					console.log(`${new Date().getTime()} Audio track: ${event.track.label} added`);

				})
			}
		}

		/* DOMContentLoaded 로드를 통해 video Element 담기*/
		window.addEventListener("DOMContentLoaded", () => {
			initVideo();
			initHls();
		})

 

 

🧆 후기

그동안 Http Live Streaming에 대해서 조사가 부족했던 것 같다. Hls.js에서의 다양한 이벤트가 존재가 있었음에도 불구하고, interval으로만 해결할려고 하는것이 좀 부끄럽긴했다.