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タグで小さく表示しています。