오늘은 컴퓨터에 연결된 카메라를 통해 화면을 출력하고,
화면 픽셀의 rgb를 이용해 다양한 효과를 입히는 프로그램을 만들었다.
다양한 카메라 어플에서 기본적으로 제공하고 있는 효과이다.
생각보다 더 많은 메소드가 필요하고 좀 더 복잡해서
평소 프로젝트 하나를 마치는 것보다 시간이 더 걸렸다.
그래도 greenScreen이라는 함수를 제외하고는 모두 기능이 발현되었다.
(greenScreen 함수는 cg를 입힐 수 있는 기능을 갖고 있는데,
강의자가 쓴 코드와 내 코드가 동일함에도 불구하고 기능이 구현되지 않았다..)
오늘 익힌 메소드
-
ImageCapture.takePhoto()
: ImageCapture 인터페이스의 메소드이다. 비디오 캡쳐 장치를 이용해 단일 노출 촬영을 한다. 촬영된 데이터는 Blob으로 담는 Promise를 반환한다. -
URL.createObjectURL()
: 으아!!! 이 메소드가 실행되지 않아 원인을 찾느라 30분이 걸렸다...
stackoverflow에서 보니, 구글 크롬이 71버전으로 업데이트 된 후 더이상 지원되지 않는 기능이었다.
그래서 원래
videoElement.src = URL.createObjectURL(screenStream);
로 작성한 구문을
videoElement.srcObject = screenStream;
으로 바꾸니 원래 의도한 기능이 작동했다.이 메소드는 URL에 포함된 DOMString을 만든다.
-
.catch()
.catch(err => {
console.error(`OH NO!!!`, err);
}): 어떤 명령이 거절된 상황에서 Promise를 반환한다. (예를 들면 error, undefined 상황 등)
-
setInterval()
: Windowdhk Worker 인터페이스에서 작동하는 메소드이다. 어떤 함수나 코드 일부분을 지속해서 실행하며, 매 회 고정된 시간에 따라 실행한다. -
Element.setAttribute()
: Element(요소)의 Attribute(속성) 값을 정하는 메소드이다.
나는const link = document.createElement('a')변수에서 'pretty'라는 이름의 사진으로 'download'하기 위해link.setAttribute('download', 'pretty');이렇게 사용했다. -
pixels.data[i+2]
: 화면에 출력되는 픽셀은 모두 문자와 숫자로 데이터화하여 출력될 수 있고, 하나의 픽셀은 red, green, blue, alpah로 이루어져있다.
나는 분홍색에 가까운 빨간색 화면을 만들기 위해 아래와 같이 코드를 짰다.pixels.data[i+0] = pixels.data[i+0] + 1000; // r pixels.data[i+1] = pixels.data[i+1] - 50; // g pixels.data[i+2] = pixels.data[i+2] * 5; // b // 픽셀 1개 중 4번째인 알파는 별도지정이 필요없음(알파는 색을 갖고있는 정보가 아니기 때문에) -
addEventListener('canplay', 함수명)
: 미디어를 재생할 수 있는 충분한 데이터가 로드되었을 때, canplay 이벤트가 발생한다. 그래서 canplay 이벤트는 미디어에 대한 재생을 할 수 있다는 점을 의미한다.
나는 스크립트 코드의 맨 마지막에 video.addEventListener('canplay', paintToCanvas);라고 코드를 써서 paintToCanvas() 함수가 다시 실행되도록 했다.
오늘 만든 프로그램의 코드는 아래 주소를 통해 만나볼 수 있다.
https://github.com/JeanBaek/projects/commit/5a4bd46e90b53078594eaa36a3d66789510c702f
(아직 효과 버튼 추가 등 코드를 더 작성해야하기 때문에 웹주소를 부여하지는 않았다.)
