YES/NOチャート カメラで撮影する

今回のゼミではスマホのカメラで静止画像や動画を撮影できるようmonacaのYES/NOチャートを書き換えた。

<カメラ撮影(静止画像)>

 まずボタンを表示させたいページのHTML内の ons-pageタグにid属性を追加、
カメラを起動するためのボタン

<ons-button class="no-btn" onclick="takePicture()">
            カメラ
</ons-button>

リスト1．［カメラ］ボタン

 と撮影した画像を表示するタグ

<div id="viewport-C" class="viewport" style="display: none;">
            <img style="width:200px;" id="image-C"/>
</div>

リスト2．画像を表示するためのimgタグ

を追加する。

次にjavascriptにカメラボタンをクリックした際に呼び出されるプログラムを書く。
カメラアプリを起動し撮影に成功するとimgタグに画像を表示する。

function takePicture(){
  navigator.camera.getPicture(function(url){
    var viewport = document.getElementById('viewport-C');
    viewport.style.display = "";
    document.getElementById("image-C").src = url;
  },function(){
    alert('写真を撮影できませんでした');
  },{
    quality : 50,
    destinationType: Camera.DestinationType.FILE_URI,
    targetWidth: 500,
    targetHeight: 500
  });
}

リスト3．カメラアプリを起動し撮影するJavaScriptコード 

<カメラ撮影(動画像)>

動画の場合も写真の時とあまり変わらず、動画を呼び出すボタン

<ons-button class="no-btn" onclick="takeMovie()">
            動画撮影
</ons-button>

リスト4．［動画撮影］ボタンの作成

と撮影した動画を表示するタグ

<video id="movie-play" src="" width="320" height="240" controls></video>

リスト5．撮影した動画を再生するためのvideoタグ

を追加する。

次にjs/main.jsに［動画撮影］ボタンをクリックした際に呼び出されるコードを書けばよい。

function takeMovie(){
  navigator.device.capture.captureVideo(function(mediaFiles){
    mediaFiles.forEach(function( mediaFile ){
      var video = document.getElementById("movie-play");
      video.src = mediaFile.fullPath;
      video.play();
    });
  },function(error){
    alert('動画を撮影できませんでした');
  },{
    limit: 2
  });
}

リスト6．カメラアプリを起動して動画を撮影し再生するJavaScriptコード

カメラ機能はスマホならではの機能でとても良いものだと思う。
次回も今回学んだことを生かし新しいものを作っていきたい。

---

【Tips】

リスト6の動画撮影では次のCordovaプラグイン関数を使用している。

navigator.device.capture.captureVideo(
  撮影成功時に呼び出されるコールバック関数,
  撮影失敗時に呼び出されるコールバック関数,
  オプション
)

リスト7．動画撮影のCordovaプラグイン関数の書式

まず、オプションに設定している "{limit: 2}" は、2回動画を撮影することをカメラアプリに伝えている（正確には、何度でも撮影できるけれど、残すのは最後の2テイクのみという意味）。

次に、撮影成功時に呼び出されるコールバック関数は次のようになっている。

function(mediaFiles){
  mediaFiles.forEach(function( mediaFile ){
    var video = document.getElementById("movie-play");
    video.src = mediaFile.fullPath;
    video.play();
  });
}

リスト8．撮影成功時に呼び出されるコールバック関数

まず1行目の無名関数の引数 mediaFiles には撮影した2テイクの動画ファイルが入っている。2行目は、動画ファイルの各々に対して3～5行目の処理を行うという繰り返し制御である。
このように、JavaScriptでは配列要素の各々に対して処理を行う構文として forEach 構文がある。

配列名.forEach(function(配列要素){配列要素に対して行う処理});

リスト9．forEach構文

すなわち、リスト8では、撮影した動画の各々を "movie-play" という id がついた video タグのソースに設定して再生するという処理を行っている。

本来であれば2つの動画は異なるvideoタグに設定すべきであるが、このプログラムは同じタグに設定しているので、1つ目の動画が2つ目の動画に上書きされ、結果的に最後に撮影した動画のみが再生されるという結果になる。