자바스크립트와 MediaStream API를 활용하여 웹 카메라 필터 기능 개발하기

13 Oct 2023

mediastreamapi

이번 기술 블로그에서는 자바스크립트와 MediaStream API를 이용하여 웹 카메라 필터 기능을 개발하는 방법에 대해 알아보겠습니다.

필수 준비물

웹 카메라 필터 기능을 개발하기 위해서는 다음과 같은 필수 준비물이 필요합니다:

웹 브라우저
자바스크립트 코드 에디터

MediaStream API 소개

MediaStream API는 웹 브라우저에서 미디어 스트림(예: 웹 카메라, 마이크)을 사용할 수 있게 해주는 API입니다. 이를 활용하여 웹 카메라로부터 영상을 받아오고, 자바스크립트를 이용하여 이 영상에 필터를 적용할 수 있습니다.

웹 카메라 액세스하기

MediaStream API를 사용하여 웹 카메라에 액세스하는 방법은 다음과 같습니다:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 성공적으로 웹 카메라에 액세스한 경우
    var videoElement = document.querySelector('#video');
    videoElement.srcObject = stream;
  })
  .catch(function(err) {
    // 웹 카메라 액세스 실패 시 에러 처리
    console.error('웹 카메라 액세스 에러:', err);
  });

위 코드에서 navigator.mediaDevices.getUserMedia() 함수를 호출하여 웹 카메라에 액세스하고, stream 객체를 통해 받아온 영상을 <video> 요소에 출력합니다.

필터 적용하기

웹 카메라에서 받아온 영상에 필터를 적용하기 위해서는 <canvas> 요소를 사용합니다. 예를 들어, 세피아 필터를 적용하는 코드는 다음과 같습니다:

function applySepiaFilter() {
  var videoElement = document.querySelector('#video');
  var canvasElement = document.querySelector('#canvas');

  var context = canvasElement.getContext('2d');
  context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);

  var imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height);
  var data = imageData.data;

  for (var i = 0; i < data.length; i += 4) {
    var r = data[i];
    var g = data[i + 1];
    var b = data[i + 2];

    data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); // red
    data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); // green
    data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); // blue
  }

  context.putImageData(imageData, 0, 0);
}

위 코드에서는 <video> 요소와 <canvas> 요소를 JavaScript로 가져와서 <canvas>에 영상을 그린 후, 필터를 적용하여 화면에 출력합니다.

마무리

이렇게 자바스크립트와 MediaStream API를 이용하여 웹 카메라 필터 기능을 개발할 수 있습니다. 필터링 알고리즘을 변경하거나 다른 필터를 추가할 수도 있습니다.

더 많은 자세한 정보 및 예제 코드는 다음 참고 자료를 참고하시기 바랍니다:

#웹카메라 #MediaStreamAPI