Hls.js 사용

📺 HLS(Http Live Streaming)

HLS(HTTP 라이브 스트리밍)은 가장 널리 사용되는 비디오 스트리밍 프로토콜입니다. HTTP "라이브" 스트리밍이라 불리지만 주문형 스트리밍이자 동시에 라이브 스트리밍입니다. HLS는 비디오 파일을 다운로드할 수 있는 HTTP 파일 조각으로 나누고 HTTP 프로토콜을 이용하여 전송합니다. 클라이언트 장치는 이러한 HTTP 파일을 로드한 후 비디오로 재생합니다.

🔋 Hls.js

Hls.js는 http live streaming을 구현하는 javascript 라이브러리입니다.
ios/safari 같은 경우 빌트인이 되어있기때문에 지원하지는 않고, 다른 브라우저에서는 Hls.js를 통해서 스트리밍이 가능합니다.

💰 Hls.js 라이브러리 사용

cdn 방식으로 hls를 추가합니다.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- ######### hls 라이브러리를 cdn 방식으로 추가해준다.######### -->
	<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
	<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
	<title>Hls Practice</title>
	<style>
		video {
			max-width: 500px;
			width: 100%;
			max-height: 500px;
			height: 100%;
			object-fit: fill;
		}
	</style>
</head>

<body>
	<!--
		controls : 사용자가 비디오 컨트롤이 가능하게 할 수 있다
		playsinline : 전체 화면 방지이다
		autoplay : 자동재생이며 , 정책상 음소거 상태에서 가능하다.
	-->
	<video id="video" controls playsinline autoplay></video>

</body>

</html>

다음으로 샘플 m3u8 url를 준비하고, video를 초기화 시킵니다.

<script>
    /* video Element */
    let video = null;
    /* 샘플 m3u8 url */
    let videoSrc = 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'

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

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

인제 hls.js를 사용하여 초기화 시킵니다.

"initHls" 함수를 통해 hls를 초기화 시켜줍니다.

다만 여기서 Hls를 지원하지 않는 경우가 있는데 그건 ios/safari 이다. ios/safari는 hls가 built-in이 되어있기 때문이다.

<script>
    /* video Element */
    let video = null;
    /* 샘플 m3u8 url */
    let videoSrc = 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8'

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

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

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

</script>

여기까지 하면 실시간 스트리밍 방식으로 구현이 가능하다.

다음에는 video "자동재생" 시키기를 해볼예정이다.

그리고 hls.js 대한 config은 https://github.com/video-dev/hls.js/blob/master/docs/API.md 에서 확인이 가능하다.

'Javascript' 카테고리의 다른 글

navigator.mediaSession (0)	2023.07.27
🦘비디오 자동재생 실행시키기 (0)	2023.07.02
🏸 브라우저 렌더링 과정 (0)	2023.04.12
👏 렉시컬 스코프 & 클로저 (0)	2023.03.07
감시자(Observer) 패턴 (0)	2022.01.23

one step

Hls.js 사용

📺 HLS(Http Live Streaming)

🔋 Hls.js

💰 Hls.js 라이브러리 사용

'Javascript' 카테고리의 다른 글

댓글

티스토리툴바

Hls.js 사용

📺 HLS(Http Live Streaming)

🔋 Hls.js

💰 Hls.js 라이브러리 사용

'Javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바