HTML内にカメラの撮影画面を埋め込むCordovaプラグイン

Cordova標準のCameraプラグインは端末にインストールされているカメラアプリを呼び出す挙動をしますが、アプリのHTML内にカメラの撮影画面を埋め込みたい場合もあると思います。
iOS11のモバイルSafariではHTML内でカメラアクセスするgetUserMediaが使えますが、これはSafariに限った話で、Monacaアプリ内で使われるブラウザであるWKWebViewやUIWebViewにはまだ提供されていません。
（参考：http://www.openradar.me/33571214）

そこで今回はiOS, Androidを問わずHTML内での撮影を可能とするCordovaプラグイン、cordova-plugin-camera-previewを紹介します。

cordova-plugin-camera-previewのインストール

cordova-plugin-camera-previewをダウンロードし、Monaca IDEの［Cordovaプラグインの管理］画面からインポートします。

cordova-plugin-camera-previewの使い方

CameraPreview.startCamera() でカメラのプレビューを開始します。 x/y が表示位置（左上）、width/height がプレビュー領域の幅と高さです。camera にはフロントまたはバックが指定できます。その他、タップした時に撮影を行う tapPhoto 、フォーカスを調整する tapFocus などのオプションがあります。

CameraPreview.startCamera({
  x: 10,
  y: 10,
  width: 300,
  height:300,
  camera: CameraPreview.CAMERA_DIRECTION.BACK,
  toBack: false,
  tapPhoto: false,
  tapFocus: false,
  previewDrag: false
});

撮影を行う

CameraPreview.takePicture() でプレビューを画像化します。オプションとして幅と高さ、そして画質を指定できます。
結果はBase64エンコードされた画像データになりますので、imgタグのsrc属性に適用したり、サーバーに画像データを送信したりすることができます。

CameraPreview.takePicture({
  width:640,
  height:640,
  quality: 85
}, function(base64PictureData){
  imageSrcData = 'data:image/jpeg;base64,' +base64PictureData;
  let img = document.getElementById('preview');
  img.src = imageSrcData;
});

以下は画像を撮影したところです。撮影ボタンの横にimgタグで小さく表示しています。

その他の機能

cordova-plugin-camera-previewではこの他にフラッシュの設定、カメラの切り替え、フォーカスモード、カラーエフェクト、ホワイトバランス、露出などの設定ができます。

このプラグインはアプリ内にプレビュー画面を埋め込んで使えるので、端末のカメラアプリに切り替えたくない場合やアプリのデザインの一部としてカメラを組み込みたい場合などに有効でしょう。取得する画像の大きさを指定できるので、Canvasへの描画なども低負荷で行えそうです。

今回のサンプルコードはこちらにアップロードしてあります。実装時の参考にしてください。