지난 몇 년 동안 실시간 비디오 효과와 필터를 적용하는 웹 애플리케이션이 인기를 끌고 있습니다. 그 중에서도 실시간 스티커 삽입은 사용자들 사이에서 많은 관심을 받고 있는 기능 중 하나입니다. 이 기능을 구현하기 위해 자바스크립트와 MediaStream API를 사용하는 방법을 알아보겠습니다.

MediaStream API 소개

MediaStream API는 브라우저에서 사용자 미디어 장치(카메라, 마이크 등)의 비디오 스트림에 접근할 수 있는 기능을 제공합니다. 이 API를 통해 비디오 스트림을 가져와서 실시간으로 가공하거나 필터를 적용할 수 있습니다.

스티커 이미지 준비하기

우선 사용할 스티커 이미지를 준비해야 합니다. 필요한 이미지를 인터넷에서 다운로드하거나 직접 디자인할 수 있습니다. 스티커 이미지는 PNG 또는 SVG 형식으로 준비해야하며 투명 배경이어야 합니다.

사용자의 카메라 스트림 가져오기

MediaStream API를 사용하여 사용자의 카메라 스트림을 가져오는 것으로 시작합니다. 여기에서는 getUserMedia 함수를 사용합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 비디오 스트림을 가져왔을 때 할 일
  })
  .catch(function(error) {
    // 오류 처리
  });

getUserMedia 함수를 호출하여 video 제약 조건을 지정합니다. 이렇게 하면 사용자의 카메라 스트림이 반환됩니다. 성공적으로 카메라 스트림을 가져오면 반환된 스트림을 가지고 필요한 작업을 수행할 수 있습니다.

비디오 요소에 스트림 연결하기

스트림을 가져온 후 비디오 요소에 연결하여 실시간으로 화면을 보여줄 수 있습니다. video 요소를 생성하고 srcObject 속성에 스트림을 할당합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();
  })
  .catch(function(error) {
    // 오류 처리
  });

이렇게 하면 비디오 요소가 생성되고 사용자의 카메라 스트림이 화면에 표시됩니다.

스티커 삽입하기

비디오 스트림을 표시하는 요소가 준비되면 스티커를 삽입할 수 있습니다. 여기서는 canvas 요소를 사용하여 스티커를 삽입합니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    function drawSticker() {
      requestAnimationFrame(drawSticker);
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 스티커 그리기
      context.drawImage(stickerImage, x, y, width, height);
    }

    // 스티커 이미지 로드
    const stickerImage = new Image();
    stickerImage.src = 'sticker.png';
    stickerImage.onload = function() {
      drawSticker();
    };
  })
  .catch(function(error) {
    // 오류 처리
  });

canvas 요소를 생성하고 getContext 함수를 사용하여 2D 컨텍스트를 가져옵니다. drawSticker 함수를 정의하여 스티커를 그리는 작업을 수행합니다. 이 함수는 requestAnimationFrame을 사용하여 반복 호출되어 실시간 스티커 삽입을 구현합니다.

결론

이렇게 자바스크립트와 MediaStream API를 사용하여 웹에서의 실시간 스티커 삽입 기능을 구현할 수 있습니다. 사용자의 카메라 스트림을 가져오고 비디오 요소에 연결한 후 스티커를 삽입하여 실시간으로 보이도록 할 수 있습니다. 이를 통해 재미있는 웹 애플리케이션을 구현할 수 있습니다.

더 자세한 내용은 MediaStream API 문서를 참조할 수 있습니다.