스마트폰 카메라에 접근 가능한 HTML 태그

동기

하이브리드 앱 프로젝트 과정에서 카메라에 접근하여 사진을 촬영해야 하는 기능이 있었다.

네이티브에서 구현하기엔 번거로워, 웹뷰에서 구현하고 싶었다.

HTML태그 하나로 쉽게 구현이 되었고, 매우 간단한 방법이라 기록하려고 한다. 

 

 

스마트폰 카메라에 접근 가능한 HTML 태그는 바로 

" <input type="file" />" 이다.

 

사용법

사용법은 input태그에 속성값을 "file"로 지정하면 된다. 

• 카메라에 바로 접근하는 방법

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

• 카메라와 갤러리 등 선택하는 방법

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

위에서는 input태그의 타입을 file로 하고, accept, capture속성에 값을 정의했다. 

accept 속성 - 허용되는 파일 유형을 지정

• 따라서 ‘accept=”image/*”는 모든 종류의 이미지 파일을 허용

capture 속성 - 카메라 또는 기타 입력 장치를 사용하여 파일을 캡쳐하는 방법을 지정

• 따라서 capture="camera"는 모바일 기기의 카메라를 사용하여 이미지를 캡쳐하도록 함

 

 

UI 이슈

위 이미지처럼 <input type="file"/>을 사용하면 "파일 선택"이라는 버튼이 보이는데 이는 브라우저 자체 적용되는 UI로 변경이 불가하다.

 

출처:&nbsp;https://webdir.tistory.com/435

위는 브라우저 별 기본 파일 필드 모양이며, 나는 크롬 브라우저를 사용하여 위와 같은 모양이 생성되었다. 

 

 

 

Input file 커스텀

따라서 파일 필드 모양을 바꾸기 위해서는 직접 커스텀 해야한다. 

나는 다음과 같은 방법으로 커스텀하였다.

 

상위 태그로 감싸고 display: none으로 숨기기

<button type="button" class="camera" @click="open">
    <i class="far fa-camera"></i>
    <input
      type="file"
      accept="image/*"
      capture="camera"
    />
 </button>

 

input[type="file"] {
  display: none;
}

file타입인 input태그를 display:none으로 처리하고 상위 버튼을 감싼다. 

이렇게 처리하면 사용자 입장에서는 카메라 아이콘을 누르게 되면 input태그를 클릭했을 때와 동일한 효과를 사용할 수 있다.

 

input과 label태그 사용

<label className="btn-input" for="input-file">
  파일 업로드
</label>
<input type="file" id="input-file" style={{display:"none"}}/>

위와 같이 사용하게 되면 "파일 업로드" Label태그를 클릭하게 되면 input file태그와 동일하게 동작한다.

여기서 주의할 점은 for속성은 label태그에서만 유용하므로 button등 다른 태그를 사용하려면 첫 번째와 같은 방법을 추천하는 것이 권장된다.

 

 

 

추가 이슈

성공적으로 구현했다고 좋아할 때 역시나 또 다른 이슈가 발생했다. 빌드 후 앱에서 실행하는 과정에서 갑자기 input file을 클릭하면 앱 꺼짐 현상이 발생했다.

권한 문제라는 에러가 발생하였고, 검색 후 다음과 같은 방법으로 해결하였다.

 

 <provider
           android:name="androidx.core.content.FileProvider"
           android:authorities="or.project.ggcr.flutter_inappwebview.fileprovider"
           android:exported="false"
           android:grantUriPermissions="true">
           <meta-data
               android:name="android.support.FILE_PROVIDER_PATHS"
               android:resource="@xml/file_paths" />
</provider>

AndroidManifest.xml 파일에 다음과 같은 코드를 추가하고, /xml/file_paths에 코드를 추가하여 해결하였다.

이슈를 해결하는 것에 중점을 두어 이 코드에 대한 자세한 내용은 아직 모른다. 이 부분에 대한 정확한 정보는 추후 업로드 할 예정이다. 

 

 

 

출처

https://yg-dad.tistory.com/164

https://helloinyong.tistory.com/275