본 포스팅은 모바일 웹으로 구현했을 경우 사용 가능한 소스입니다. 혹시 하이브리드앱이나 webview 로 호출한 페이지에서 카메라나 사진첩을 연동해야 하시는 분은 아래 링크를 참고하시면 되겠습니다. android webview 에서 카메라 호출 및 사진첩(갤러리) 호출하여 이미지 파일 업로드 하기 html5 의 속성을 이용하여 스마트폰의 카메라와 연결하는 방법이다. 스마트폰(모바일 디바이스)의 카메라와 연결하여 사진이나 동영상을 찍고 찍은 데이터를 javascript 를 이용하여 접근 및 제어가 가능하다. http://mobilehtml5.org/ 여기서 확인해보면 미디어 수준에서 접근하는 방법과 스트림 수준에서 접근하는 방법이 있다. 아래는 위 주소의 내용을 일부 발췌한 이미지이다. 미디어 수준에서 접근하는 방법을 많은 브라우저에서 지원하는 것을 볼 수 있다. 그래서 미디어 수준에서 접근하는 방법을 사용했다. 카메라 연결하는 소스
동영상 촬영 연결하는 소스
두 소스의 설명 4# : e.target.files[0] 는 파일 객체이다. URL.createObjectURL 은 파일 객체 또는 Blob 객체의 URL 를 생성한다. 생성된 URL은 바로 img 태그나 video 태그에 넣어주면 확인이 가능하다.
이렇게만 작성한다면 갤러리(사진첩)도 볼 수 있다........... 일반적으로 사용 후에 URL.revokeObjectURL() 을 호출하지 않아도 브라우저가 unloaded 될 때 자동으로 해제된다. 필요시에 따라 설정하면 될 것 같다. URL.createObjectURL()의 데스크탑과 모바일의 브라우저별 호환성은 다음과 같다. ps. file 업로드는 기존 방식과 다른 점이 없었다. 필자는 spring CommonsMultipartResolver 를 이용하여 모바일에서도 파일을 업로드했다. 참고 : http://mobilehtml5.org/ https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL 코딩하는 일용직 노동자안드로이드 안드로이드 WebView에서 카메라/사진 갤러리 이미지 업로드 하기bacass 2020. 6. 22. 10:49 # 들어가며 우선 WebChromeClient() 를 상속받은 커스텀 클래스를 만들고 아래의 함수를 오버라이드 해줍니다.
자! 여기서 중요한 것이 바로 filePathCallback 입니다. input type 태그에서 capture="camera" 가 있는 경우와 없는 경우가 있습니다. <input type="file" capture="camera"> // isCaptureEnabled 이 true로 리턴됩니다. 이번 포스팅에서는 카메라 촬영도 함께 포함한 예제를 중심으로 진행하겠습니다. 카메라로 사진을 찍는 처리나 이미지를 선택하는 처리는 이미 다양한 자료나 라이브러리들이 있습니다.
CustomWebChromeClient의 onShowFileChooser 함수가 호출되었으니 이제 takePicture()를 호출해서 웹뷰가 있는 액티비티로 이벤트를 넘기겠습니다.
웹뷰액티비티에서 takePicture()가 호출되면 카메라/갤러리 선택 팝업을 보여주겠습니다.
팝업에서 카메라를 선택하면 cameraIntent() 함수를 호출합니다. 팝업에서 갤러리를 선택하면 galleryIntent() 함수를 호출합니다. # 마치며 |