CANVAS 다루기 - 비디오

오늘은 캔바스에서 동영상을 다뤄 보도록 하겠습니다. 먼저 HTML5에 새롭게 도입된 비디오(video) 엘러먼트에 대한 지식이 있어야 하겠죠.

가장 기본적으로 <video>라는 태그를 사용하며 src속성에 재생될 비디오 파일 경로를 작성하는 방식입니다. 자세한 내용은 ie9html5.com강좌 페이지의 비디오 강좌를 참고해 주세요.

아래는 HTML5의 캔바스와 비디오를 활용한 대표적인 예제입니다.(캔바스와 비디오가 지원되는 브라우저로 확인 하셔야 합니다.)

<Blowing apart fragments of video>

 

<3D Video>

그럼 캔바스와 비디오를 어떻게 활용하는지 알아보도록 하겠습니다.
오늘은 아래와 같이 재미있는 예제 두가지를 만들어볼까 합니다.

• 나만의 스크린샷 만들기
• 추억의 흑백영화 보기

나만의 스크린샷 만들기

위와 같이 멀티미디어 파일 재생중에 스크린샷을 만들어주는 코드를 작성해 보겠습니다.

video {border:5px solid red;}
canvas {border:5px solid blue;}
img {width:96px;height:54px;}

<video src="transformers-3-teaser-trailer.mp4" id="v" width="480" height="270" autoplay controls></video>
<canvas id="c" width="480" height="270"></canvas><hr>
<button>스크린샷 만들기</button><br>

var
	video = document.getElementById("v"),
	width = document.getElementById("v").width,
	height = document.getElementById("v").height,
	canvas = document.getElementById("c"),
	ctx = document.getElementById("c").getContext("2d"),
	btn = document.querySelector("button");

if ( !(video.paused && video.ended)) {
	var _intervalId = setInterval(function () {
		ctx.clearRect(0, 0, width, height);
		try { ctx.drawImage(video, 0, 0, width, height); }
		catch(e) {}
	}, 1000 / 10);		
}

btn.addEventListener( "click",  function() {
	var img = document.createElement("img");
	img.src = canvas.toDataURL();
	document.body.appendChild(img);
}, false);

위 코드를 살펴보면,
우선 스타일시트를 활용하여 비디오 요소는 빨간색 테두리로 캔바스는 파란색 테두리로 구분했습니다.
재생할 비디오 파일은 올 여름 기대하고 있는 트랜스포머3 티저 영상을 넣어습니다.
( 메건 폭스양이 안나오는게 가슴 아프지만... -_-v )

자바스크립트 코드의 7라인을 보시면 querySelector이라는 docuemnt객체의 새로운 메서드를 보실 수 있는데요. 메서드명 그대로 인자로 넘긴 첫번째 해당 셀렉터를 반환해주고 없을 경우는 null을 반환하는 메서드 입니다.
자매품 querySelectorAll도 있으니 많이 많이 애용해주세요. :)

9~15 라인이 바로 오늘의 핵심 코드입니다.
비디오가 재생중이라면 100ms 단위로 캔바스에 비디오 프레임을 그리게 됩니다. 참 간단하죠?

17 라인부터는 스크린샷 만들기 버튼에 이벤트 리스너를 추가한 코드가 나옵니다.
잠시 19 라인에서 사용된 toDataURL 메서드를 살펴볼까 합니다.

toDataURL 메서드는 캔바스를 Base64 인코딩 형태의 스트링으로 변환해주는 메서드입니다.
이때 canvas.toDataURL("image/jpeg") 처럼 이미지의 마임 타입을 설정해 줄 수 있고 명시하지 않을 경우 기본 마임타입은 image/png입니다. 하지만 아직은 브라우저에 따라 상이합니다.



추억의 흑백영화 보기 

위와 같이 비디오와 캔바스의 만남은 가히 획기적이라 할 수 있습니다.
요번에는 또 다른 효과인 흑백영화를 만들어볼까요? 벌써 어떻게 해야 할지 머릿속에 떠오른 분들이 계실꺼라 생각합니다.

바로 이전 강좌에서 소개한 캔바스의 getImageData / putImageData 메서드를 활용하는 방법입니다.

위의 코드중 12라인의 try절을 수정해볼까요?

ctx.drawImage(video, 0, 0, width, height); 

var 
	pixels = ctx.getImageData( 0, 0, width, height ),
	pd = pixels.data;

for (var i = 0, len = pd.length; i < len; i += 4) {
	var gray = (pd[i] * .3) + (pd[i + 1] * .59) + (pd[i + 2] * .11);
	pd[i] = gray;
	pd[i + 1] = gray;
	pd[i + 2] = gray;
}
ctx.putImageData( pixels, 0, 0 );

사실 흑백효과는 휘도 공식(luminance formula)만 알고 있다면 쉽게 만들 수 있는 효과입니다.^^

< 자바스크립트 휘도 공식 >
G = R x 0.3 + G x 0.59 + B x 0.11

여러분도 아래와 같이 흑백효과를 쉽게 만들 수 있게죠?

다음 강좌에서는 여러분이 HTML5의 캔바스에서 가장 많은 기대를 가지고 있을(?) 애니메이션에 대하여 알아보도록 하겠습니다.

좋은 하루 보내세요 :)