[javascript] 비동기 데이터 요청을 이용한 동영상 스트리밍

11 Dec 2023

javascript

개요

이번 글에서는 비동기 데이터 요청을 이용하여 동영상을 스트리밍하는 방법에 대해 알아보겠습니다. 동영상 스트리밍은 대규모 비디오 파일을 한 번에 다운로드하지 않고 조각조각 나누어 받아서 재생하는 기술로, 네트워크 대역폭을 효율적으로 관리할 수 있어 사용자 경험을 향상시킬 수 있습니다.

비동기 데이터 요청 (Ajax)

동영상 스트리밍은 서버에서 조각조각의 데이터를 비동기적으로 요청하여 받아와야 합니다. 이때 Ajax 기술을 사용하면 동적으로 데이터를 서버로부터 받아올 수 있습니다.

아래는 간단한 JavaScript 코드로 Ajax 요청을 하는 예제입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'videoChunkUrl', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 비디오 조각을 받아서 처리하는 로직
    }
};
xhr.send();

비디오 스트리밍 플레이어

비디오를 스트리밍하는 동안 사용자에게 끊김 없이 자연스러운 동영상 재생을 제공하기 위해서는 비디오 스트리밍 플레이어가 필요합니다. 이러한 플레이어는 비디오 데이터를 받아와서 재생할 수 있도록 해주는 역할을 합니다.

HTML5에서는 <video> 요소를 이용하여 간단한 비디오 스트리밍 플레이어를 만들 수 있습니다.

<video controls>
    <source src="videoChunkUrl" type="video/mp4">
    Your browser does not support the video tag.
</video>

결론

비동기 데이터 요청을 이용하여 동영상을 스트리밍하는 기술은 웹 애플리케이션에서 동영상을 효율적으로 제공할 수 있는 방법 중 하나입니다. 이를 통해 네트워크 대역폭을 효율적으로 활용하여 사용자에게 더 원활한 동영상 시청 경험을 제공할 수 있습니다.

참고문헌:

Mozilla Developer Network. “Using XMLHttpRequest” https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Mozilla Developer Network. “HTMLMediaElement: The Media Elements in HTML” https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video