안드로이드 및 아이폰에서 카메라호출방법

안녕하세요 유건아빠입니다. 

프로젝트 내용중에 웹화면에서 카메라호출 하는 부분이 있었는데요

분명히 제가 스마트폰 나왔을때 웹에서 카메라호출하는 부분이 제약이 있어서 폰갭같은걸 써서

모바일웹앱으로 카메라를 제어 했던거 같은데 이제는 HTML5 에서는 코드한줄 이면 카메라를 호출하네요

(물론 네이티브처럼 카메라앱 자체를 수정하고 하는건 웹소스로는 불가능하겠죠)

그래도 웹화면에서 코드한줄로 쉽게 호출을 할수가 있다니 그동안 너무 모바일 공부를 안했었네요

앞으로는 틈틈히 모바일 안드로이드 IOS 공부도 해야겠네요

1. <input type="file"/>을 주는것입니다.

2. accept 에 파일형식을 써주고 capture 에 camera 를 써주면 카메라를 호출 할수 있습니다. 

샘플1(카메라, 갤러리 선택)

<input type="file" accept="image/*;capture=camera">

샘플2 (카메라직접 호출) 

<input type="file" accept="image/*" capture="camera">

이미지 파일에 액세스하는 방법 (2018.08.23 추가)

<input type="file" accept="image/*" capture="camera" id="camera">
<img id="frame">
<script>
  var camera = document.getElementById('camera');
  var frame = document.getElementById('frame');
 
  camera.addEventListener('change', function(e) {
    var file = e.target.files[0]; 
    // Do something with the image file.
    frame.src = URL.createObjectURL(file);
  });
</script>

 

제 포스팅이 도움이 되셨다면

로그인이 필요없는 ↓♡공감↓ 꾸~욱 부탁드려요^^ 

더 나은 포스팅에 큰 힘이 됩니다.