19 - Webcam Fun

개요

 

웹캠의 video stream 을 받아서

브라우저 상에서 다양하게 가지고 놀아본다.

 

style.css

 

overflow-x: scroll - 가로축 (x축) 으로 내용이 넘칠때에 scroll bar 가  나오도록 함   nth-child - 웹캠이 없어 확인은 못했지만 지그재그로 흩뿌려져 이어진 모습으로 찍은 사진이 보이도록 하려는 것으로 보임

 

index.html

 

1) 버튼을 누르면 takePhoto() 라는 함수가 실행된다. 2) RGB 에 대해 각각 min 값 max 값을 설정할 수 있다. - 각각의 값은 rmin, rmax, gmin, gmax, bmin, bmax 에 저장(?) 된다. 3) photo class 를 사용하는 canvas 가 하나있고 4) player class 를 사용하는 video 5) 그리고 strip class 를 사용하는 div 가 하나있다. 6) 소리파일 하나가 있으며 class 는 snap 이다. "찰칵" 소리를 내준다. http://wesbos.com/demos/photobooth/snap.mp3

 

scripts.js

 

	1) video 는 player class 를 먹인 <video>  태그이다. - 비디오 파일이나 스트리밍을 넣을 수 있다. 2) canvas 는 <canvas> 태그 - 자바스크립트로 다양한 그림을 그릴 수 있다. 3) ctx 는 canvas.getContext('2d') 이며 - 이제 여기다가 마음껏 그림을 그릴 수 있다. 4) strip 은 단순 <div> 이고 5) snap 은 <audio> 태그이다.
	1) 가장 먼저 실행되는 것은 getVideo() 함수이며, 2) 이후엔 'canplay' 이벤트에 대해, paintToCanvas() 함수가 실행된다. - 'canplay' 란 브라우저가 (충분히 버퍼를 채워서) - video 나 audio 를 play 가능할때 발생한다.
	1) navigator.mediadevices.getusermedia() 함수는 강력하다. - 링크: https://mzl.la/2Vn9aba - 그냥 이렇게 호출만 하면 웹캠, 마이크 입력을 건드릴 수 있다. - video 는 무조건 true 여야 하고, mike 는 사용하지 않기에 false 2) 그러면 promise 로 리턴값이 오며 - 그것을 video.srcObject 로 설정한 다음 - play() 만 해주면 된다.
	paintToCanvas() 함수는 비디오가 플레이할 준비가 되면 실행되는 콜백함수였다.   video 의 폭과 넓이만큼 canvas 의 폭과 넓이를 설정한 다음 setInterval 을 통해 1) 16 ms 마다 (= 1000 / 16 = 62.5 fps 속도로) 2) 익명함수를 반복실행한다.   익명함수의 동작 1) drawImage() 함수로 canvas 의 0, 0, 에 video 를 그려준다. 2) getImageData() 함수로그려놓은걸 고스란히 pixels 에 담는다. - 이 녀석을 까보면 RGBA 값들의 연속인 배열이다. 3) 아래에 설명될 redEffect(), rgbSplit(), greenScreen() 으로 값을 만져준 다음 * globalAlpha 의 경우는 투명도를 전부 바꿔준다. 4) putImageData() 로 다시 그려준다.
	redEffect() 함수는 - RGB 값을 R 강화, G 약화, B 약화 시키는 것이고,   rgbSplit() 함수는 - 특정 픽셀의 R, G, B 값을 흩뿌려주는 효과를 준다.
	greenScreen() 함수는   1) R, G, B 슬라이드의 값을 받아서 각각의 min, max 값을 설정한 다음 2) 각각의 픽셀들이 이 범위안에 들어오면 픽셀의 Alpha 값을 0으로 만들어버린다 - 하얗게 만들어버리는 것이다.
	버튼을 누르면 실행되는 takePhoto() 함수이다.   1) 우선은 snap 을 이용해서 "찰칵" 소리를 낸다. 2) 그리고 toDataURL() 함수로 이미지 포맷을 생성한 뒤 3) a tag 를 만들고 그 href 를 data 로 정한다. 4) setAttribute 를 download 로 하여 download 가능하게 하고,  그 이름을 handsome 으로 정한다 5) 그리고 innerHTML 을 이용해서 HTML tag 를 생성한 다음 6) insertBefore() 함수를 이용하여 strip 안에 넣어준다.