비디오 크로마키 가이드

이 화면은 비디오 컴포넌트에 대한 크로마키 처리 샘플 화면이다.

비디오 크로마키 처리는 비디오/캔서스/타이머 컴포넌트를 통해 구현된다.

타이머 이벤트를 통해서 비디오 이미지를 캡쳐하여 투명색 처리 이후에 캔버스에 표시하는 방식으로 처리한다.

템플릿 위치: /HTML5/COMPONENT/VIDEO/video_chromakey

템플릿 파일

• video_chromakey.xml
• video_chromakey.js
• 새창으로 실행

// 타이머 이벤트
function tmr_chroma_on_time(objInst)
{
	var ctx_1, image_width, image_height, i, frame, frame_data_length, r, g, b,
		canvas_dom_1, video_dom;

	// 타이머 비활성화 처리
	this.tmr_chroma.setenable(false);

	// 비디오 컴포넌트의 DOM을 구함
	video_dom = this.vdo_chroma.getdom();

	// 동영상이 멈춤이나 재생 완료 상태인 경우 리턴
    if (video_dom.paused || video_dom.ended) {
        return;
    }

	// 비디오의 내용 크기 계산 (border 제외 처리)
	image_width = this.vdo_chroma.getwidth() - 2;
	image_height = this.vdo_chroma.getheight() - 2;

	// 캔버스 컴포넌트의 DOM을 구한
	canvas_dom_1 = this.cvs_chroma_1.getdom();

	// 캔버스 컨텍스트를 구함
	ctx_1 = canvas_dom_1.getContext("2d");

	// 캔버스 컨텍스트에 비디오의 이미지를 표시
    ctx_1.drawImage(video_dom, 0, 0, image_width, image_height);

	// 캔버스 컨텍스트의 이미지 데이터를 구함
    frame = ctx_1.getImageData(0, 0, image_width, image_height);

	// 이미지 데이터 Looping 하면서 투명 색상 처리
    frame_data_length = frame.data.length / 4;
    for (i = 0; i < frame_data_length; i++) {
        r = frame.data[i * 4 + 0];
        g = frame.data[i * 4 + 1];
        b = frame.data[i * 4 + 2];

		// TODO:
		// 색상 기준은 동영상의 배경 색상을 기준으로 변경해야 함
		// 색상이 특정 기준을 만족하면 투명 처리
        if (g > 100 && r > 100 && b < 43) {
			frame.data[i * 4 + 3] = 0; // 투명 처리
		}
    }

	// 캔버스 컨텍스트에 투명 처리된 이미지 데이터 표시
	ctx_1.putImageData(frame, 0, 0);

	// 타이머 활성화
	tmr_chroma.setenable(true);
}

// 비디오 "on_play" 이벤트
function vdo_chroma_on_play(objInst)
{
	// 타이머 활성화
	this.tmr_chroma.setenable(true);
}

// 비디오 "on_ended" 이벤트
function vdo_chroma_on_ended(objInst)
{
	// 타이머 비활성화
	this.tmr_chroma.setenable(false);
}

// 비디오 "on_pause" 이벤트
function vdo_chroma_on_pause(objInst)
{
	// 타이머 비활성화
	this.tmr_chroma.setenable(false);
}

// 캔버스 "on_click" 이벤트
function cvs_chroma_1_on_click(objInst, nXPoint, nYPoint, nPageXPoint, nPageYPoint, nItemId)
{
	// 비디오 재생 상태 토글 처리
	if (this.vdo_chroma.isplaying()) {
		this.vdo_chroma.pause();
	}
	else {
		this.vdo_chroma.play();
	}
}