Unreal Funny WebCam project

jeanbaek·2020년 9월 10일
0

TIL (Today I Learned)

목록 보기
70/106

오늘은 컴퓨터에 연결된 카메라를 통해 화면을 출력하고,
화면 픽셀의 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

(아직 효과 버튼 추가 등 코드를 더 작성해야하기 때문에 웹주소를 부여하지는 않았다.)

profile
💡 Software Engineer - F.E

0개의 댓글