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

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 未サポート

 

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: yyss
最終更新者: yyss,