HTML5 캔버스 내부에 비디오 표시하기

HTML5 캔버스 내부에 비디오 표시하기

HTML5의 <canvas> 요소를 활용하면 웹 페이지에서 재생 중인 비디오를 캔버스 위에 직접 그려서 표시할 수 있습니다. 핵심은 drawImage() 메서드가 <video> 요소를 이미지 소스로 받을 수 있다는 점입니다. 아래 코드 예제를 참고해 보세요.

var canvas1 = document.getElementById('canvas');
var context = canvas1.getContext('2d');
var video = document.getElementById('video');
video.addEventListener('play', function () {
   var $this = this;
   (function loop() {
      if (!$this.paused && !$this.ended) {
         context.drawImage($this, 0, 0);
         setTimeout(loop, 1000 / 30);
      }
   })();
}, 0);

코드 동작 원리

1. 캔버스 컨텍스트 가져오기: getContext('2d')를 호출하여 캔버스의 2D 드로잉 컨텍스트를 얻습니다. 모든 그리기 작업은 이 컨텍스트 객체를 통해 수행됩니다.

2. play 이벤트 리스너 등록: 비디오가 재생을 시작할 때 'play' 이벤트가 발생하면 루프 함수가 실행됩니다.

3. 프레임 반복 그리기: loop() 함수는 비디오가 일시정지되거나 종료되지 않은 동안 drawImage()로 현재 프레임을 캔버스에 계속 그립니다. setTimeout(loop, 1000 / 30)을 사용해 초당 약 30프레임(30fps)으로 갱신하여 부드러운 재생 화면을 만듭니다.

참고 사항

더 정밀한 화면 갱신이 필요하다면 setTimeout 대신 requestAnimationFrame()을 사용하는 것이 좋습니다. 브라우저의 렌더링 주기에 맞춰 최적화되어 배터리 소모도 줄일 수 있습니다. 또한 비디오 파일이 다른 도메인에 있는 경우 CORS 정책으로 인해 캔버스 오염(tainted canvas) 문제가 발생할 수 있으니, 같은 출처의 영상을 사용하거나 서버에 적절한 CORS 헤더를 설정해야 합니다.