@capacitor/camera
Camera API は、カメラで写真を撮ったり、フォトアルバムから既存の写真を選択したりする機能を提供します。
インストール
npm install @capacitor/camera
npx cap sync
iOS
iOS では、アプリの Info.plist
に次の利用目的の説明を追加して入力する必要があります。
NSCameraUsageDescription
(プライバシー - カメラの使用目的の説明
)NSPhotoLibraryAddUsageDescription
(プライバシー - 写真ライブラリへの追加の使用目的の説明
)NSPhotoLibraryUsageDescription
(プライバシー - 写真ライブラリの使用目的の説明
)
Info.plist
の設定については、iOS ガイドの Xcode での iOS の権限設定に関する詳細を参照してください。
Android
デバイスのギャラリーから既存の画像を選択する場合、Android フォトピッカーコンポーネントが使用されるようになりました。フォトピッカーは、次の基準を満たすデバイスで使用できます。
- Android 11 (API レベル 30) 以上を実行している
- Google システムアップデートを通じて、モジュラーシステムコンポーネントの変更を受け取れる
Google Play サービスをサポートする Android 11 または 12 を実行している古いデバイスと Android Go デバイスでは、フォトピッカーのバックポートバージョンをインストールできます。Google Play サービスを介したバックポートされたフォトピッカーモジュールの自動インストールを有効にするには、AndroidManifest.xml
ファイルの <application>
タグに次のエントリを追加します。
<service android:name="com.google.android.gms.metadata.ModuleDependencies"
android:enabled="false"
android:exported="false"
tools:ignore="MissingClass">
<intent-filter>
<action android:name="com.google.android.gms.metadata.MODULE_DEPENDENCIES" />
</intent-filter>
<meta-data android:name="photopicker_activity:0:required" android:value="" />
</service>
このエントリが追加されていない場合、フォトピッカーをサポートしないデバイスでは、フォトピッカーコンポーネントが Intent.ACTION_OPEN_DOCUMENT
にフォールバックします。
Camera プラグインでは、saveToGallery: true
を使用しない限り、権限は必要ありません。その場合は、次の権限を AndroidManifest.xml
に追加する必要があります。
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
また、これらの権限を、要求される Android バージョンでのみ指定することもできます。
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29"/>
ストレージ権限は、写真ファイルの読み取り/保存用です。
権限の設定については、Android ガイドの Android の権限設定に関する詳細を参照してください。
さらに、Camera API は写真撮影を処理するために別の Activity を起動するため、アプリが Activity の実行中にオペレーティングシステムによって終了された場合に送信されたカメラデータを処理するために、App
プラグインで appRestoredResult
をリッスンする必要があります。
変数
このプラグインは、次のプロジェクト変数 (アプリの variables.gradle
ファイルで定義) を使用します。
androidxExifInterfaceVersion
:androidx.exifinterface:exifinterface
のバージョン (デフォルト:1.3.6
)androidxMaterialVersion
:com.google.android.material:material
のバージョン (デフォルト:1.10.0
)
PWA の注意
Camera プラグインが機能するには、PWA 要素が必要です。
例
import { Camera, CameraResultType } from '@capacitor/camera';
const takePicture = async () => {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
// image.webPath will contain a path that can be set as an image src.
// You can access the original file using image.path, which can be
// passed to the Filesystem API to read the raw data of the image,
// if desired (or pass resultType: CameraResultType.Base64 to getPhoto)
var imageUrl = image.webPath;
// Can be set to the src of an image now
imageElement.src = imageUrl;
};
API
getPhoto(...)
getPhoto(options: ImageOptions) => Promise<Photo>
アルバムから写真を選択するか、カメラで新しい写真を撮るようにユーザーに促します。
パラメーター | 型 |
---|---|
options | ImageOptions |
戻り値: Promise<Photo>
開始 1.0.0
pickImages(...)
pickImages(options: GalleryImageOptions) => Promise<GalleryPhotos>
ユーザーがフォトギャラリーから複数の写真を選択できるようにします。iOS 13 以前では、1 つの写真しか選択できません。
パラメーター | 型 |
---|---|
options | GalleryImageOptions |
戻り値: Promise<GalleryPhotos>
開始 1.2.0
pickLimitedLibraryPhotos()
pickLimitedLibraryPhotos() => Promise<GalleryPhotos>
iOS 14 以降のみ: ユーザーが制限付きフォトライブラリの選択を更新できるようにします。iOS 15 以降では、ピッカーが閉じられた後、すべての制限付き写真が返されます。iOS 14 またはユーザーが写真へのフルアクセスを許可した場合、空の配列が返されます。
戻り値: Promise<GalleryPhotos>
開始 4.1.0
getLimitedLibraryPhotos()
getLimitedLibraryPhotos() => Promise<GalleryPhotos>
iOS 14 以降のみ: 制限付きフォトライブラリから選択された写真の配列を返します。
戻り値: Promise<GalleryPhotos>
開始 4.1.0
checkPermissions()
checkPermissions() => Promise<PermissionStatus>
カメラとフォトアルバムの権限を確認します
戻り値: Promise<PermissionStatus>
開始 1.0.0
requestPermissions(...)
requestPermissions(permissions?: CameraPluginPermissions | undefined) => Promise<PermissionStatus>
カメラとフォトアルバムの権限をリクエストします
パラメーター | 型 |
---|---|
permissions | CameraPluginPermissions |
戻り値: Promise<PermissionStatus>
開始 1.0.0
インターフェース
Photo
プロパティ | 型 | 説明 | 開始 |
---|---|---|---|
base64String | string | CameraResultType.Base64を使用する場合の、画像の base64 エンコードされた文字列表現。 | 1.0.0 |
dataUrl | string | 'data:image/jpeg;base64,' で始まり、CameraResultType.DataUrl を使用する場合の、画像の base64 エンコードされた文字列表現である URL。注: Web では、ファイル形式はブラウザーによって変更される場合があります。 | 1.0.0 |
path | string | CameraResultType.Uri を使用する場合、パスには、後で Filesystem API を使用して読み取ることができる、プラットフォーム固有の完全なファイル URL が含まれます。 | 1.0.0 |
webPath | string | webPath は、効率的な読み込みとレンダリングのために、画像の src 属性を設定するために使用できるパスを返します。 | 1.0.0 |
exif | any | 画像から取得された Exif データ (ある場合) | 1.0.0 |
format | string | 画像の形式。例: jpeg、png、gif。iOS および Android は jpeg のみをサポートしています。Web は jpeg、png、gif をサポートしていますが、正確な利用可能性はブラウザーによって異なる場合があります。gif は、webUseInput が true に設定されているか、source が Photos に設定されている場合にのみサポートされます。 | 1.0.0 |
saved | boolean | 画像がギャラリーに保存されたかどうか。Android と iOS では、ユーザーが必要な権限を付与しなかった場合、ギャラリーへの保存が失敗する可能性があります。Web にはギャラリーがないため、常に false を返します。 | 1.1.0 |
ImageOptions
プロパティ | 型 | 説明 | デフォルト | 開始 |
---|---|---|---|---|
quality | number | JPEG として返す画像の品質 (0 ~ 100)。注: このオプションは、Android および iOS でのみサポートされています。 | 1.0.0 | |
allowEditing | boolean | ユーザーがトリミングや小規模な編集 (プラットフォーム固有) を許可するかどうか。iOS 14 以降では、CameraSource.Camera でのみサポートされており、CameraSource.Photos ではサポートされていません。 | 1.0.0 | |
resultType | CameraResultType | データを返す方法。現在、「Base64」、「DataUrl」、「Uri」のみがサポートされています。 | 1.0.0 | |
saveToGallery | boolean | 写真をギャラリーに保存するかどうか。写真がギャラリーから選択された場合、編集された場合にのみ保存されます。 | : false | 1.0.0 |
width | number | 保存された画像の最大幅の希望値。縦横比は維持されます。 | 1.0.0 | |
height | number | 保存された画像の最大高さの希望値。縦横比は維持されます。 | 1.0.0 | |
correctOrientation | boolean | 縦向きモードでの向きを修正するために、画像を自動的に「上」に回転させるかどうか | : true | 1.0.0 |
source | CameraSource | 写真の取得元。デフォルトでは、フォトアルバムを選択するか写真を撮るかをユーザーに尋ねます。 | : CameraSource.Prompt | 1.0.0 |
direction | CameraDirection | iOS および Web のみ: カメラの方向。 | : CameraDirection.Rear | 1.0.0 |
presentationStyle | 'fullscreen' | 'popover' | iOS のみ: カメラの表示スタイル。 | : 'fullscreen' | 1.0.0 |
webUseInput | boolean | Web のみ: PWA 要素のエクスペリエンスを使用するか、ファイル入力を使用するか。デフォルトでは、PWA 要素がインストールされている場合は PWA 要素を使用し、ファイル入力にフォールバックします。常にファイル入力を使用するには、これを true に設定します。PWA 要素の詳細: https://capacitorjs.com/docs/web/pwa-elements | 1.0.0 | |
promptLabelHeader | string | プロンプトを表示するときに使用するテキスト値。 | : '写真' | 1.0.0 |
promptLabelCancel | string | プロンプトを表示するときに使用するテキスト値。iOS のみ: 「キャンセル」ボタンのラベル。 | : 'キャンセル' | 1.0.0 |
promptLabelPhoto | string | プロンプトを表示する際に使用するテキスト値。保存された画像を選択するボタンのラベル。 | :'写真から' | 1.0.0 |
promptLabelPicture | string | プロンプトを表示する際に使用するテキスト値。カメラを開くボタンのラベル。 | :'写真を撮る' | 1.0.0 |
GalleryPhotos
プロパティ | 型 | 説明 | 開始 |
---|---|---|---|
photos | GalleryPhoto[] | 選択されたすべての写真の配列。 | 1.2.0 |
GalleryPhoto
プロパティ | 型 | 説明 | 開始 |
---|---|---|---|
path | string | 後でFilesystem APIを使用して読み取ることができる、プラットフォーム固有の完全なファイルURL。 | 1.2.0 |
webPath | string | webPath は、効率的な読み込みとレンダリングのために、画像の src 属性を設定するために使用できるパスを返します。 | 1.2.0 |
exif | any | 画像から取得された Exif データ (ある場合) | 1.2.0 |
format | string | 画像形式(例:jpeg、png、gif)。iOSとAndroidはjpegのみをサポートします。Webはjpeg、png、gifをサポートします。 | 1.2.0 |
GalleryImageOptions
プロパティ | 型 | 説明 | デフォルト | 開始 |
---|---|---|---|---|
quality | number | JPEGとして返す画像の品質(0〜100)。注:このオプションはAndroidおよびiOSでのみサポートされます。 | 1.2.0 | |
width | number | 保存された画像の最大幅の希望値。縦横比は維持されます。 | 1.2.0 | |
height | number | 保存された画像の最大高さの希望値。縦横比は維持されます。 | 1.2.0 | |
correctOrientation | boolean | 縦向きモードでの向きを修正するために、画像を自動的に「上」に回転させるかどうか | : true | 1.2.0 |
presentationStyle | 'fullscreen' | 'popover' | iOS のみ: カメラの表示スタイル。 | : 'fullscreen' | 1.2.0 |
limit | number | ユーザーが選択できる写真の最大数。注:このオプションはAndroid 13以降およびiOSでのみサポートされます。 | 0(無制限) | 1.2.0 |
PermissionStatus
プロパティ | 型 |
---|---|
camera | CameraPermissionState |
photos | CameraPermissionState |
CameraPluginPermissions
プロパティ | 型 |
---|---|
permissions | CameraPermissionType[] |
型エイリアス
CameraPermissionState
PermissionState | 'limited'
PermissionState
'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'
CameraPermissionType
'camera' | 'photos'
列挙型
CameraResultType
メンバー | 値 |
---|---|
Uri | 'uri' |
Base64 | 'base64' |
DataUrl | 'dataUrl' |
CameraSource
メンバー | 値 | 説明 |
---|---|---|
Prompt | 'PROMPT' | 写真アルバムを選択するか、写真を撮るかをユーザーに促します。 |
カメラ | 'CAMERA' | カメラを使用して新しい写真を撮ります。 |
Photos | 'PHOTOS' | ギャラリーまたは写真アルバムから既存の写真を選択します。 |
CameraDirection
メンバー | 値 |
---|---|
Rear | 'REAR' |
Front | 'FRONT' |