Camera API で写真撮影 – WebAPI の一部

原文: Taking pictures with the Camera API – part of WebAPI (on April 2, 2012 by Robert Nyman)

WebAPI の一部である Camera API を通じて、端末のカメラで写真を撮り、表示中の Web ページにアップロードすることが可能になります。これは、input 要素に type="file" と accept 属性を指定することで撮影した写真画像の入力を実現しています。

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 ページに撮影した写真を表示する

撮影した写真 (画像ファイル) への参照を取得したら、createObjectURL を使用して写真を参照する URL を作成し、その URL を画像の src に設定してください:

// 画像要素を参照
var showPicture = document.querySelector("#show-picture");
 
// window.URL オブジェクトを取得
var URL = window.URL || window.webkitURL;
 
// ObjectURL を作成
var imgURL = URL.createObjectURL(file);
 
// img src に ObjectURL を設定
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 ページと 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) {
        // Set events
        takePicture.onchange = function (event) {
            // Get a reference to the taken picture or chosen file
            var files = event.target.files,
                file;
            if (files && files.length > 0) {
                file = files[0];
                try {
                    // Get window.URL object
                    var URL = window.URL || window.webkitURL;
 
                    // Create ObjectURL
                    var imgURL = URL.createObjectURL(file);
 
                    // Set img src to ObjectURL
                    showPicture.src = imgURL;
 
                    // Revoke ObjectURL
                    URL.revokeObjectURL(imgURL);
                }
                catch (e) {
                    try {
                        // Fallback if createObjectURL is not supported
                        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";
                        }
                    }
                }
            }
        };
    }
})();

Web ブラウザのサポート

Camera API は現在、Android 端末上の Firefox と Google Chrome でサポートされています。
createObjectURL は、Firefox と Google Chrome、Internet Explorer 10 以降でサポートされています。
FileReader は、Firefox と Google Chrome、Internet Explorer 10 以降、Opera 11.6 以降でサポートされています。

未来

WebRTC (ブラウザ間で音声と動画、データのリアルタイム通信をサポートしています) と navigator.getUserMedia のアプローチにより、いくつもの主要な Web ブラウザでこれらの機能を目にすることができるでしょう。詳しい情報は、Firefox の Web Platform Roadmap をご覧ください。

しかし今は、写真の撮影とキャプチャを楽しんでください！