티스토리 뷰

javascript30

19 - Webcam Fun

fistful 2019. 4. 3. 19:23
반응형

개요

 

웹캠의 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 안에 넣어준다.


반응형

'javascript30' 카테고리의 다른 글

19 - Webcam Fun  (0) 2019.04.03
18 - Adding Up Times with Reduce  (0) 2019.03.28
17 - Sort Without Articles  (0) 2019.03.27
16 - Mouse Move Shadow  (0) 2019.03.26
15 - Local Storage  (0) 2019.03.26
14 - JavaScript References VS Copying  (0) 2019.03.19
댓글
댓글쓰기 폼