[꼼꼼한 개발자] 꼼코더

22. [개발일지] - [카메라 방명록 프로젝트] - 04. 카메라 기능 개발 (구글링 잘 하는 방법, 스택오버플로우) 본문

개발일지/카메라 방명록 프로젝트

22. [개발일지] - [카메라 방명록 프로젝트] - 04. 카메라 기능 개발 (구글링 잘 하는 방법, 스택오버플로우)

꼼코더 2023. 5. 8. 03:33
반응형

😁 찾았다! 코드

내가 전혀 맨 소스부터 개발하기가 어려운 기능이라 구글링을 엄청 열심히 했던 기억이 있다.

그때 '웹 카메라 연결', '웹 카메라 기능' 등 정말 단순하게 검색했었다.

 

그렇게 구글링 하던 중 자바스크립트 canvas를 활용하여 개발이 완료된 코드를 확인했고

신난 나머지 바로 복+붙을 시전하였다.

 


😅 찾자! 코드

실제 동작을 해보니 메인화면에 버튼이 하나가 있고

[camera] 버튼 클릭 -> 노트북에 있는 캠 연결 -> [ok] 버튼 클릭 -> 화면에 [ok] 클릭 시 캡쳐된 사진확인(실시간 카메라 화면을 대체)

 

나는 이때 개선사항이 보였다.

 

현재는 [촬영 시작] 버튼 클릭 시 카메라 화면이 하나만 나왔었고.

이후 첫 [촬영] 시 카메라 기능은(실시간 카메라) 멈추고 [촬영] 버튼을 클릭할 때마다 캡처 화면만 보였다.

 

원하는 건. 카메라 화면이 두 개로 나눠지는 것!

[촬영] 버튼 클릭 시 위(카메라 동작) 아래(촬영 결과물)가 보였으면 했다. 

 

(위 화면은 카메라 기능이 꺼지지 않고 아래화면은 [버튼] 클릭 당시의 사진을 보여주는 것)

 

이를 위해 다시 구글링을 하였고 수정을 거듭하다가 그렇게 무려 5일이 지났고

기존 코드를 수정하는 방법 대신 과감히 새로운 코드를 찾아서 붙였다.

 

(구글링 시 영문으로 검색했던 것이 매우 도음이 많이 되었다.)

 

👏🏻 여기까지

지금 현재는 (카메라 연동) 화면이 두 가지로 나눠진다 위(카메라 기능), 아래(사진 결과물)

이제는 무슨 기능이 필요할까??(다음 글에서 계속..)

 

Comments