Rev. 2.73

애플의 기본 프로그램인 포토부스의 멋진 그래픽 필터 효과들을 사용해 본 경험이 있으세요? Paul Neave씨는 브라우저만으로 이와 유사한 기능을 제공하는 HTML5 비디오 이펙츠 데모를 선보였습니다. 아쉽게도, 지금 출시된 브라우저들은 플래시를 이용하지 않는 한 웹캠을 사용할 수 있는 방법이 없지만, 최근 구글 크롬은 차기 버전(코드네임 카나리아)에 들어갈 핵심기능인 WebRTC(Web Real-Time Communications) API의 getUserMedia를 이용하여 이 데모를 정상적으로 수행해 볼 수 있습니다. 카나리아를 구하는 방법과 설정하는 방법은 조금있다가 살펴 보기로 하고요. 이 데모에 포함된 비디오에 실시간으로 반영되는 효과들은 자바스크립트와 WebGL을 이용한 것입니다. 대략 살펴 보면, HTML5의 비디오 요소에서 얻어낸 아웃풋 데이터를 캔버스 요소로 불러와서 WebGL의 쉐이더 효과를 입힌 것입니다. 포토부스와 유사한 카운트가 나타나면서 스냅샷을 찍을 수 있고 찍은 사진을 소셜 네트워크에 공유하거나 다운로드 할 수 있습니다. 정말 멋지지 않아요?

videoeffects.png

만약 getUserMedia가 활성 되지 않은 경우 별도로 준비된 동영상이 나타나며 여러 그래픽 효과들만 실험해 볼 수 있습니다. 웹캠과 연동하여 태스트하려면 조금 복잡한 과정을 거쳐야 합니다. 앞서 말씀드린 크롬의 카나리아 버전을 설치한 후에 실행 옵션을 주어야 하는데, 윈도 버전은 속성창을 열어 대상란의 쌍따옴표(")뒤에 "--enable-media-stream" 이라고 작성해 주어야 하고 맥용은 다음과 같이 실행합니다.

open -a "/Applications/Google Chrome Canary.app" --args --enable-media-stream

그리고 주소창에 "chrome://flags"를 입력하여 나타난 옵션 패널에서 "Media Stream Flag"를 활성시키고 재시작 합니다. 보다 자세한 사용법은 이 곳에 있으니 참고하세요. 최대 100fps까지 확보되며 안정적으로 작동하는 것을 확인하였습니다. 페이스타임과 같은 웹앱이 나오는 것도 이제 시간문제로군요. 떨거지들이 어영부영 만든 블라블라 API의 웃는 얼굴에 침이라도 뱉듯이 종지부를 찍어버리는 구글은 참 무섭습니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar