mozilla
Your Search Results

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

     

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

    Contributors to this page: yyss
    最終更新者: yyss,