【Cordova】HTML5+JSでカメラアプリ作成

スポンサーリンク

この記事では、Cordova(HTML5+javascript)を用いて、カメラで写真を撮るスマホアプリ(Android, IOS)を作る方法とソースコードについて紹介します。

スポンサーリンク

カメラプラグイン

Cordovaでは、プラグイン(拡張機能)を導入することで、便利な機能を追加できます。
今回はカメラプラグインを導入し、カメラ映像を表示するアプリを作ります。

※Cordovaの導入方法やカメラプラグインのインストール方法については下記事で解説しています。
【関連記事】
【Cordova入門】Android向けハイブリッドアプリ開発
【Cordova】カメラプラグインのインストール方法

ソースコード

サンプルプログラムのソースコードは下記の通りです。
【HTML側(index.html)】

【Javascript側(index.js)】

内容
targetWidth 画像の横幅[px]
targetHeight 画像の縦幅[px]
quality 写真の画質(0〜100)
cameraDirection 背面カメラ, 正面カメラの選択
saveToPhotoAlbum 写真撮影後に画像を保存するか否か
correctOrientation 画像を写真撮影した時と同じ向きにするか否か
sourceType ソースタイプ(Camera.PictureSourceType.PHOTOLIBRARYならピクチャフォルダから画像選択、Camera.PictureSourceType.CAMERA ならカメラで写真撮影、Camera.PictureSourceType.SAVEDPHOTOALBUMならアルバムから画像選択
destinationType 戻り値のフォーマット(Camera.DestinationType.DATA_URL、Camera.DestinationType.FILE_URI)
allowEdit 画像選択前の簡単な編集を許可するか否か(true, false)
encodingType 画像ファイルのエンコード種類
mediaType メディアの種類(Camera.MediaType.PICTURE, Camera.MediaType.VIDEO, Camera.MediaType.ALLMEDIA) sourceTypeでPHOTOLIBRARYかSAVEDPHOTOALBUMを指定した時に有効
popoverOptions iPadでポップオーバー位置を明示するか否か

実行結果

サンプルプログラムの実行結果です。
「撮影ボタン」を押すと、カメラ映像が表示され、写真を撮ることができます。

今回はAndroidアプリ(apkファイル)に変換して実行しています。
生成したapkファイル→android-debug.apk

スポンサーリンク

シェア&フォローお願いします!