====== 비디오 크로마키 가이드 ======
이 화면은 비디오 컴포넌트에 대한 크로마키 처리 샘플 화면이다.
비디오 크로마키 처리는 비디오/캔서스/타이머 컴포넌트를 통해 구현된다.
타이머 이벤트를 통해서 비디오 이미지를 캡쳐하여 투명색 처리 이후에 캔버스에 표시하는 방식으로 처리한다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/VIDEO/video_chromakey
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/VIDEO/video_chromakey.xml|video_chromakey.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/VIDEO/video_chromakey.js|video_chromakey.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/VIDEO/video_chromakey|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 타이머 이벤트
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();
}
}