Camera API の利用

Camera API によってデバイスのカメラで写真を撮影して、その写真を現在表示している Web ページへアップロードすることができます。これは、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];
    }
};

Web ページへの画像の提供

撮影された写真 (すなわちファイル) への参照を取得すると、window.URL.createObjectURL() を使用してその写真を参照する URL を作成して、画像の src として設定できます:

// 参照の作成
var showPicture = document.querySelector("#show-picture");

// window.URL オブジェクトを取得
var URL = window.URL || window.webkitURL;

// ObjectURL を作成
var imgURL = URL.createObjectURL(file);

// ObjectURL を img の src に設定
showPicture.src = imgURL;

// パフォーマンス上の理由により、使用済みの ObjectURL を破棄
URL.revokeObjectURL(imgURL);

createObjectURL() がサポートされていない場合は、代替策として FileReader にフォールバックします:

// createObjectURL がサポートされていない場合にフォールバック
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

サンプル一式

動作を確認したい場合は、Camera API の実動サンプルをご覧ください。

以下は上記のデモで使用したコードです:

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 && 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);

                    // ObjectURL を img の src に設定
                    showPicture.src = imgURL;

                    // 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";
                        }
                    }
                }
            }
        };
    }
})();

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Camera API	未サポート	未サポート	未サポート	未サポート	未サポート
`createObjectURL()`	16	8.0 (8.0)	10+	未サポート	未サポート
`FileReader`	16	3.6 (1.9.2)	10+	11.6+	未サポート

機能	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Camera API	3.0	(有)	10.0 (10.0)	未サポート	未サポート	未サポート
`createObjectURL()`	4	(有)	10.0 (10.0)	未サポート	未サポート	未サポート
`FileReader`	3	(有)	10.0 (10.0)	未サポート	11.1	未サポート