Appspresso(앱스프레소) - Camera liveview (카메라 미리보기)

이번 예제는 카메라 기능입니다.
아마도 전화 기능 다음으로 많이 사용하게 되는 기능인것 같습니다.^^ 

 시작할까요. index.html입니다.

카메라 매뉴 페이지를 보니 세가지 항목으로 구성되어 있군요.
첫번째 라이브 뷰 페이지를 보겠습니다.

div태그만 있고  별거 없네요.

그럼 관련된 js 파일을 찾아보겠습니다.
index.js에 라이브 뷰 페이지가 보여질때 호출하는 함수와 페이지가 사라질때 호출되는 함수가 정의되어 있습니다.

위 함수들이 정의되어 있는 js/camera-capture-video.js을 열어 함수를 살펴봅니다.
기존에 카메라 정보가 없다면, getCameras를 호출하고, 지원가능한 카메라 정보가 이미 있다면 startPreview함수를 호출하는군요.

getCameras함수는 deviceapis를 통해 지원가능한 카메라를 배열로 받아옵니다.
카메라 리스트를 셋팅하고, 타겟 태그가 존재하면 startPreview함수를 호출하네요.

백그라운드 css를 셋팅하고, SelectedCamera.createPreviewNode함수를 호출하여 
선택한 카메라를 미리보기가 가능하도록 DOM객체에 셋팅합니다.

해당 페이지를 벗어나게 되면 미리보기를 중지하는 함수가 호출되고
visibility를 안보이도록 설정하고 DOM객체에서 제거 합니다. 

실제 아이폰에서 실행한 화면입니다.

  

다음에는 사진을 캡쳐하는 기능에 대하여 알아보겠습니다.