古籏一浩のJavaScriptラボ ― 第74回

Capture APIでiPhone用ビデオレコーダーを作ろう

2011年10月24日 11時00分更新

古籏一浩

ツイートする

カメラで撮影

　最後に、カメラを使って静止画を撮影する機能も試してみましょう。カメラの場合は以下のメソッドを使いますが、引数はこれまでの録音、ビデオ録画とまったく同じです。


navigator.device.capture.captureImage()

　以下はビデオアルバムのプログラムを変更して、video要素の代わりにimg要素に変更し撮影した画像をページに表示するようにしたものです。


カメラで撮影した静止画をページ内に最大4枚まで表示するプログラム


<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <style type="text/css">
    h1 { font-size:14pt; }
  </style>
  <script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    // Capture APIで写真撮影
    var count = 0;
    function captureImage() {
      var total = document.getElementsByTagName("img").length;
      if (count >= total){
        alert("これ以上は登録できません");
        return;  // 4枚以上は撮影できない
      }
      navigator.device.capture.captureImage(captureSuccess, captureError);
    }
    function captureSuccess(mediaFiles) {
      document.getElementById("myImage"+count).src = mediaFiles[0].fullPath;
      count = count + 1;
    }
    function captureError(error) {
      alert("Error !!："+error.code);
    }
  </script>
 </head>
 <body>
  <h1>Capture APIで撮影</h1>
  <div>
    <button onclick="captureImage()">撮影開始</button>
  </div>
  <img src="" id="myImage0" width="150" height="150">
  <img src="" id="myImage1" width="150" height="150">
  <img src="" id="myImage2" width="150" height="150">
  <img src="" id="myImage3" width="150" height="150">
 </body>
</html>

　これまでと同じようにMacとiPhoneを接続しアプリを転送します。しばらくするとアプリが起動し、ボタンをクリックするとカメラで撮影できます。カメラ撮影のUIはiOSに用意されたもので、以前紹介したカメラ撮影と同じ画面です。


「撮影開始」ボタンをタップ


カメラボタンをタップすると撮影できる


撮影したデータを使う場合は「Use」をタップする


撮影したデータがページ内に表示される

　Capture APIを使ったカメラ撮影はPhoneGapで用意されているAPIより機能が多くありません。特にiOSではCapture APIのオプションが使用できないので、PhoneGapに用意されているCamera APIを使うのもよいでしょう。

ブラウザーへの実装が進むCapture API

　Android OS 4.0の標準ブラウザーでは、Capture APIが利用できるようになっているようです（実機がないので未確認です）。また、Android用のOpera Mobileでもカメラからの取り込みに対応しています（メソッド等は異なっています）。Opera Mobileでのカメラの利用について以下のページを参照してください。

http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

　今後、多くのブラウザーでCapture APIがサポートされるようになれば、ネイティブアプリでなくても動画や静止画が手軽に取り込めるようになります。Webアプリの可能性がますます広がりそうです。

前へ 1 2 3 4 5 次へ

カテゴリートップへ