cordova-plugin-camera-preview を使ってページ内にカメラプレビューを表示する

cordova-plugin-camera-preview は、Cordova アプリのページ内にカメラプレビューを重ねて表示できるプラグイン。これを利用すれば、カメラを操作する独自の UI をフロントエンドで実装しておき、それをカメラプレビューに重ねて見せたりだとか、画像を撮影してその場でフォーム送信して欲しい時に小さなプレビュー窓で写真撮影をしてもらえたり、少し変わったカメラの UX を提供できる。

今回のプラグインを使用したサンプルコードは以下に置いてある (WIP で申し訳ないが…)。

プラグインのインストール

プラグインのインストールは以下のとおり。

$ cordova plugin add cordova-plugin-camera-preview

npm に上がっていない、開発中の最新版を導入したい場合は、以下のように GitHub リポジトリを指定する。

$ cordova plugin add https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git

カメラの起動

プラグインを起動したら、HTML 上の button 要素を押してカメラプレビューを起動する処理を作ってみようと思う。

window.CameraPreview.startCamera({
  // プレビューボックスの左上を配置する縦座標
  x: 0,
  // プレビューボックスの左上を配置する横座標
  y: 0,
  // プレビューボックスの幅
  width: window.screen.width,
  // プレビューボックスの高さ
  height: 200,
  // カメラの向き : バックカメラで起動する
  camera: window.CameraPreview.CAMERA_DIRECTION.BACK,
  // html 要素より裏側のレイヤーでバックグラウンド起動する場合は true
  toBack: false,
  // プレビューボックスをタップして写真を撮る
  tapPhoto: true,
  // プレビューボックスのタップした箇所にフォーカスを当てない (オートフォーカスに任せる)
  tapFocus: false,
  // プレビューボックスをドラッグ可能にする
  previewDrag: true
}, function() {
  console.log('カメラ起動');
}, function(error) {
  console.log('カメラ起動に失敗', error);
});

x・y でプレビューボックスの表示座標、width・height でサイズを指定する。画面中央に表示したい場合は (window.screen.width / 2) - (width / 2) といった計算が必要になる。

toBack を true にすると、html 要素よりも裏側のレイヤーにプレビューボックスが表示される。body 要素や html 要素に background が指定されるとプレビューボックスが見えなくなるので注意。

tapPhoto と tapFocus で、プレビューボックスをタップした時の動作を指定できる。また、previewDrag を true にするとプレビューボックスをドラッグして移動できるようになる。

写真の撮影

写真の撮影には window.CameraPreview.takePicture() という API を使う。tapPhoto を有効にしている場合でも、takePicture() に設定した内容およびコールバック関数が実行される。

// width・height は未指定か 0 でデフォルト指定になる
window.CameraPreview.takePicture({
  quality: 100,
  width: 0,
  height: 0
}, function(imgData) {
  console.log('撮影成功');
  // 結果は JPG 形式の Base64 データとして受け取れる
  document.getElementById('img').src = 'data:image/jpeg;base64,' + imgData;
}, function(error) {
  console.log('撮影失敗', error);
});

画像は DataURL 形式で受け取り、カメラロールには保存されないので注意。

カメラプレビューの終了

カメラプレビューを閉じる。

window.CameraPreview.stopCamera(function() {
  console.log('カメラプレビュー終了');
}, function(error) {
  console.log('カメラプレビュー終了失敗');
});

ココまでで、基本的な起動・撮影・停止ができるようになった。

カメラプレビューの表示切り替え

switchCamera() でフロントカメラとバックカメラを切り替えたり、show()・hide() でプレビューボックスの表示・非表示を切り替えたりできる。

window.CameraPreview.switchCamera(function() {
  console.log('カメラ切替成功');
}, function(error) {
  console.log('カメラ切替失敗');
});

window.CameraPreview.hide(function() {
  console.log('カメラプレビュー非表示');
}, function(error) {
  console.log('カメラプレビュー非表示失敗');
});

window.CameraPreview.show(function() {
  console.log('カメラプレビュー表示');
}, function(error) {
  console.log('カメラプレビュー表示失敗');
});

これらを呼び出すイベントを HTML 上の任意のボタンにでも設定してやれば良い。

カメラプレビューの表示サイズが小さかったり、html 要素の背景に埋もれていたり、hide() で非表示にされたりしている場合でも、HTML 上のボタンなどから takePicture() を実行してやれば、写真撮影は可能。ちょっとスパイカメラ風なことも可能…？

その他、フォーカスや露出、ズーム設定といった撮影時の設定や、カラーエフェクトやホワイトバランスなどといった簡単な加工にも対応している。ぜひ公式の API を見てみてほしい。