[javascript] 자바스크립트의 비동기 제어와 비디오/오디오 처리

08 Dec 2023

javascript

이번 블로그 포스트에서는 자바스크립트에서 비동기 작업을 어떻게 제어하고, 비디오 및 오디오 처리에 대해 알아보겠습니다.

비동기 제어

대부분의 웹 애플리케이션은 네트워크 호출, 파일 처리 등의 비동기 작업을 다뤄야 합니다. Promise와 async/await을 사용하여 비동기 코드를 보다 쉽게 작성하고 제어할 수 있습니다.

// Promise 예제
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

// async/await 예제
async function getData() {
  try {
    let data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

비디오/오디오 처리

웹 애플리케이션에서 비디오와 오디오를 다루려면 HTML5의 **

// 비디오 재생
let videoElement = document.querySelector('video');
videoElement.src = 'video.mp4';
videoElement.play();

// 오디오 재생
let audioElement = document.querySelector('audio');
audioElement.src = 'audio.mp3';
audioElement.play();

// MediaStream API를 사용한 웹캠에서 비디오 스트림 가져오기
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    videoElement.srcObject = stream;
  })
  .catch(error => {
    console.error(error);
  });

자바스크립트를 사용하여 비동기 작업을 효과적으로 제어하고, 웹 애플리케이션에서 비디오와 오디오를 다루는 방법에 대해 간단히 소개했습니다. 더 많은 정보는 MDN 웹 문서나 자바스크립트 관련 도서에서 찾아볼 수 있습니다.

참고 문헌:

MDN Web Docs
더블린, 비래키. (2017). Learning JavaScript: Add Sparkle and Life to Your Web Pages. O’Reilly Media.