카메라 API를 사용하여 사진 촬영하기 – WebAPI ★ Mozilla 웹 기술 블로그

WebAPI의 한 부분인 카메라 API통하여 사용자의 기기에 있는 카메라로 사진을 찍고, 이를 현재 웹 페이지로 업로드할 수 있게 됐습니다. 이 기능은 type="file" 속정을 지정하고 accept 속성에 이미지를 받는다고 지정한 input 엘리먼트를 통해 사용할 수 있습니다.

HTML은 다음과 같은 형태입니다

<input type="file" id="take-picture" accept="image/*">

이 HTML 엘리먼트를 사용자가 선택하면 파일을 어디에서 선택할지 원하는 곳을 보여주게 됩니다. 여기에는 기기의 카메라도 하나의 선택사항으로 보여지게 됩니다. 카메라를 선택하면 사진 촬영 모드로 전환됩니다.

사진을 찍고 나면 사용자에게는 사진을 사용할지 취소할지 결정할 수 있습니다. 사용하기로 결정하면, <input type="file"> 엘리먼트에 사진 파일이 보내지고, onchange 이벤트가 발생합니다.

찍은 사진에 대한 참조 얻기

File API의 도움말을 참고하면, 찍거나 선택한 사진을 접근할 수 있습니다

var takePicture = document.querySelector("#take-picture");
takePicture.onchange = function (event) {
    // 찍거나 선택한 파일에 대한 참조를 얻음
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
    }
};

찍은 사진을 웹 페이지에 보여주기

일단 찍은 사진(혹은 파일)에 대해서 참조를 얻고 난 후에는 사진을 참조하고, 이미지의 src에 지정할 수 있는 URL을 만들기 위해 createObjectURL을 사용할 수 있습니다.

// 이미지 참조
var showPicture = document.querySelector("#show-picture");
 
// window.URL 객체를 얻음
var URL = window.URL || window.webkitURL;
 
// ObjectURL 생성
var imgURL = URL.createObjectURL(file);
 
// ObjectURL을 src에 지정
showPicture.src = imgURL;
 
// 성능을 위해 다 사용한 ObjectURL을 해제
URL.revokeObjectURL(imgURL);

If createObjectURL isn’t supported, an alternative is to fallback to FileReader:

createObjectURL이 지원대지 않는다면, 대안으로 FileReader를 사용할 수 있습니다.

// createObjectURL을 지원하지 않는 경우 대안
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

온전한 예제 데모 및 코드

온전히 동작하는 예제 페이지를 원하는 분들을 위해, 카메라 API 데모를 만들었습니다. 다음은 HTML 페이지와 그에 부합되는 JavaScript 파일의 코드입니다.

HTML 페이지

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera API</title>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    </head>
 
    <body>
 
        <div class="container">
            <h1>Camera API</h1>
 
            <section class="main-content">
                <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p>
 
                <p>
                    <input type="file" id="take-picture" accept="image/*">
                </p>
 
                <h2>Preview:</h2>
                <p>
                    <img src="about:blank" alt="" id="show-picture">
                </p>
 
                <p id="error"></p>
 
            </section>
 
            <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
        </div>
 
 
        <script src="js/base.js"></script>
 
 
    </body>
</html>

JavaScript 파일

(function () {
    var takePicture = document.querySelector("#take-picture"),
        showPicture = document.querySelector("#show-picture");
 
    if (takePicture &amp;&amp; showPicture) {
        // 이벤트 설정
        takePicture.onchange = function (event) {
            // 찍은 사진이나 파일에 대한 참조 얻기
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // window.URL 객체 얻기
                    var URL = window.URL || window.webkitURL;
 
                    // ObjectURL 생성
                    var imgURL = URL.createObjectURL(file);
 
                    // src에 ObjectURL 지정
                    showPicture.src = imgURL;
 
                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // createObjectURL을 지원하지 않는 경우 대안
                        var fileReader = new FileReader();
                        fileReader.onload = function (event) {
                            showPicture.src = event.target.result;
                        };
                        fileReader.readAsDataURL(file);
                    }
                    catch (e) {
                        //
                        var error = document.querySelector("#error");
                        if (error) {
                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            }
        };
    }
})();

웹 브라우저 지원 현황

카메라 API는 현재 안드로이드 기기상의 Firefox와 구글 크롬에서 지원됩니다.
createObjectURL은 Firefox, 구글 크롬, 인터넷 익스플로러 10+에서 지원됩니다.
FileReader는 Firefox, 구글 크롬, 인터넷 익스플로러 10+, 오페라 11.6+에서 지원됩니다.

앞으로의 계획

WebRTC(두 브라우저간에 실시간으로 오디오, 비디오, 데이터 통신을 지원)와 navigator.getUserMedia등 우리는 근 시일내에 더 많은 기능들을 수 많은 주요 브라우저에서 볼 수 있을 것입니다. 더 많은 정보를 위해 Firefox의 웹 플랫폼 로드맵을 봐 주시기 바랍니다.

But for now, you can enjoy taking/capturing pictures!

하지만, 현재도 사진을 찍거나 캡처하는 즐거움을 누릴 수 있습니다!

원저자: Robert Nyman – 원문으로 가기

Kim, Myung Shin가 작성한 문서들…

Hacks-웹기술블로그

카메라 API를 사용하여 사진 촬영하기 – WebAPI

작성자: Kim, Myung Shin