android html5 스마트폰 카메라와 연결하기, 사진(갤러리) 및 동영상 찍기 예제 ( URL.createObjectURL )

 

 

 

본 포스팅은 모바일 웹으로 구현했을 경우 사용 가능한 소스입니다.

혹시 하이브리드앱이나 webview 로 호출한 페이지에서 카메라나 사진첩을 연동해야 하시는 분은 아래 링크를 참고하시면 되겠습니다.

android webview 에서 카메라 호출 및 사진첩(갤러리) 호출하여 이미지 파일 업로드 하기

 

 

 

 

 

html5 의 속성을 이용하여 스마트폰의 카메라와 연결하는 방법이다.

 

스마트폰(모바일 디바이스)의 카메라와 연결하여 사진이나 동영상을 찍고 찍은 데이터를 javascript 를 이용하여 접근 및 제어가 가능하다.

 

 

http://mobilehtml5.org/

여기서 확인해보면 미디어 수준에서 접근하는 방법과 스트림 수준에서 접근하는 방법이 있다.

아래는 위 주소의 내용을 일부 발췌한 이미지이다.

 

 

 

미디어 수준에서 접근하는 방법을 많은 브라우저에서 지원하는 것을 볼 수 있다.

그래서 미디어 수준에서 접근하는 방법을 사용했다.

 

 

 

카메라 연결하는 소스

        <script>
            $(function(){
                $('#camera').change(function(e){
                    $('#pic').attr('src', URL.createObjectURL(e.target.files[0]));
                });
            });
        </script>
        <input type="file" id="camera" name="camera" capture="camera" accept="image/*" />
        <br/>
        <img id="pic" style="width:100%;" />

 

 

동영상 촬영 연결하는 소스

        <script>
            $(function(){
                $('#camcorder').change(function(e){
                    $('#mov').attr('src', URL.createObjectURL(e.target.files[0]));
                });
            });
        </script>
        <input type="file" id="camcorder" name="camcorder" capture="camcorder" accept="video/*" />
        <br/>
        <video id="mov" width="100%" autoplay="yes" controls="true" ></video>

 

두 소스의 설명

4# : e.target.files[0] 는 파일 객체이다. URL.createObjectURL 은 파일 객체 또는 Blob 객체의 URL 를 생성한다. 생성된 URL은 바로 img 태그나 video 태그에 넣어주면 확인이 가능하다.

 

<input type="file" id="camera" name="camera">

이렇게만 작성한다면 갤러리(사진첩)도 볼 수 있다...........

 

 

일반적으로 사용 후에 URL.revokeObjectURL() 을 호출하지 않아도 브라우저가 unloaded 될 때 자동으로 해제된다. 필요시에 따라 설정하면 될 것 같다.

URL.createObjectURL()의 데스크탑과 모바일의 브라우저별 호환성은 다음과 같다.

 

 

 

 

 

 

 

ps. file 업로드는 기존 방식과 다른 점이 없었다. 필자는 spring CommonsMultipartResolver 를 이용하여 모바일에서도 파일을 업로드했다.

 

 

참고 :

http://mobilehtml5.org/

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL