자바스크립트 async/await를 이용한 비디오 스트리밍

10 Sep 2023

javascript

비디오 스트리밍은 인터넷을 통해 동영상을 실시간으로 재생하는 기술입니다. 자바스크립트의 async/await를 이용하면 비디오 스트리밍을 더 쉽게 구현할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 비디오 스트리밍을 구현하는 방법을 알아보겠습니다.

비디오 스트리밍 시작하기

비디오 스트리밍을 시작하기 위해 먼저 비디오를 HTML5

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

위의 코드에서는 “example.mp4”라는 비디오 파일을 로드합니다. 비디오 파일의 경로와 형식은 실제로 사용할 비디오에 맞게 수정해야 합니다.

비디오 재생을 위한 비동기 함수 만들기

이제 자바스크립트의 async/await를 이용해 비디오를 로드하고 재생하는 비동기 함수를 만들어 보겠습니다.

async function playVideo() {
  const videoPlayer = document.getElementById('videoPlayer');
  try {
    await videoPlayer.play();
    console.log('비디오 재생 시작');
  } catch (error) {
    console.log('비디오 재생 오류:', error.message);
  }
}

위의 코드에서는 videoPlayer.play() 메서드를 async/await로 호출하여 비디오를 재생합니다. play() 메서드는 Promise를 반환하기 때문에 await 키워드를 사용하여 비동기 처리를 할 수 있습니다. 비디오 재생이 성공하면 ‘비디오 재생 시작’을 출력하고, 오류가 발생하면 오류 메시지를 출력합니다.

비디오 스트리밍 이벤트 처리하기

비디오 스트리밍 중에는 여러 이벤트가 발생할 수 있습니다. 이벤트를 처리하기 위해 이벤트 리스너를 등록해 보겠습니다.

async function playVideo() {
  const videoPlayer = document.getElementById('videoPlayer');
  try {
    await videoPlayer.play();
    console.log('비디오 재생 시작');

    videoPlayer.addEventListener('ended', () => {
      console.log('비디오 재생 종료');
    });

    videoPlayer.addEventListener('error', (error) => {
      console.log('비디오 재생 오류:', error.message);
    });
  } catch (error) {
    console.log('비디오 재생 오류:', error.message);
  }
}

위의 코드에서는 비디오가 재생이 종료되면 ‘비디오 재생 종료’를 출력하고, 오류가 발생하면 오류 메시지를 출력합니다. 비디오 재생 중 다른 이벤트도 추가로 처리할 수 있습니다.

비디오 스트리밍 컨트롤하기

비디오 스트리밍 중에는 비디오를 일시 정지하거나 재생할 수 있는 컨트롤이 필요할 수 있습니다. 이를 위해 재생/일시정지 버튼을 추가해 보겠습니다.

async function playVideo() {
  const videoPlayer = document.getElementById('videoPlayer');
  const playButton = document.getElementById('playButton');

  playButton.addEventListener('click', async () => {
    if (videoPlayer.paused) {
      try {
        await videoPlayer.play();
        console.log('비디오 재생 중');
        playButton.innerHTML = '일시정지';
      } catch (error) {
        console.log('비디오 재생 오류:', error.message);
      }
    } else {
      videoPlayer.pause();
      console.log('비디오 일시 정지');
      playButton.innerHTML = '재생';
    }
  });
}

위의 코드에서는 playButton을 클릭했을 때, 비디오가 일시 정지 상태이면 재생하고 ‘일시정지’ 버튼을 ‘재생’ 버튼으로 변경하고, 비디오가 재생 중이면 일시 정지하고 ‘재생’ 버튼을 ‘일시정지’ 버튼으로 변경합니다.

마무리

이번에는 자바스크립트의 async/await를 이용해 비디오 스트리밍을 구현하는 방법에 대해 알아보았습니다. async/await를 사용하면 코드의 가독성을 높이고 비디오 재생과 관련된 비동기 작업을 쉽게 처리할 수 있습니다.

비디오 스트리밍은 웹 애플리케이션에서 많이 사용되는 기술 중 하나이며, 좋은 사용자 경험을 제공할 수 있는 핵심 요소입니다. 이를 활용해 다양한 비디오 스트리밍 기능을 구현해 보세요!