中津川篤司Twitter2Facebook7はてブ2Pocket2LINECordova標準のCameraプラグインは端末にインストールされているカメラアプリを呼び出す挙動をしますが、アプリのHTML内にカメラの撮影画面を埋め込みたい場合もあると思います。iOS11のモバイルSafariではHTML内でカメラアクセスするgetUserMediaが使えますが、これはSafariに限った話で、Monacaアプリ内で使われるブラウザであるWKWebViewやUIWebViewにはまだ提供されていません。Androidを問わずHTML内での撮影を可能とするCordovaプラグイン、cordova-plugin-camera-previewを紹介します。IDEの[Cordovaプラグインの管理]画面からインポートします。カメラのプレビューを開始します。プレビュー領域の幅と高さです。フロントまたはバックが指定できます。オプションがあります。プレビューを画像化します。オプションとして幅と高さ、そして画質を指定できます。結果はBase64エンコードされた画像データになりますので、imgタグのsrc属性に適用したり、サーバーに画像データを送信したりすることができます。imageSrcData;});以下は画像を撮影したところです。撮影ボタンの横にimgタグで小さく表示しています。その他の機能cordova-plugin-camera-previewではこの他にフラッシュの設定、カメラの切り替え、フォーカスモード、カラーエフェクト、ホワイトバランス、露出などの設定ができます。このプラグインはアプリ内にプレビュー画面を埋め込んで使えるので、端末のカメラアプリに切り替えたくない場合やアプリのデザインの一部としてカメラを組み込みたい場合などに有効でしょう。取得する画像の大きさを指定できるので、Canvasへの描画なども低負荷で行えそうです。今回のサンプルコードはこちらにアップロードしてあります。実装時の参考にしてください。今回ご紹介したCordovaプラグインは、サードパーティ製であるためストア版のMonacaデバッガーでは動作しません。動作検証の際にはカスタムビルドデバッガーをご利用ください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。