はじめに
このプラグインのインストール手順とフルマークダウンガイドを含むセットアッププロンプトをコピーします。
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/camera-preview`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/camera-preview/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
インストール
「インストール」というタイトルのセクションbun add @capgo/camera-previewbunx cap syncインポート
セクション「インポート」import { CameraPreview } from '@capgo/camera-preview';APIの概要
セクション「APIの概要」start
セクション「開始」カメラのプレビューを開始します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.start({} as CameraPreviewOptions);stop
セクション「停止」カメラのプレビューを停止します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();capture
セクション「撮影」カメラから写真を撮ります。
もし storeToFile が true プレビューを開始したときに
value は、絶対ファイルパスがデバイス上にあります。getBase64FromFilePathを使用して、ファイルパスからbase64文字列を取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
「captureSample」タイトルのセクションカメラプレビュー ストリームから1枚のフレームを撮ります。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
「getSupportedFlashModes」タイトルのセクション現在のカメラでサポートされているフラッシュモードを取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
「アスペクト比を設定」カメラプレビューのアスペクト比を設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
「アスペクト比を取得」カメラプレビューの現在のアスペクト比を取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
「グリッドモードを設定」カメラプレビュー上のオーバーレイのグリッドモードを設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
「グリッドモードを取得」カメラプレビュー上のオーバーレイの現在のグリッドモードを取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
「checkPermissions」セクション現在のカメラ(オプションでマイク)許可状態を確認しますが、システムダイアログを表示しません。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
「requestPermissions」セクションカメラ(オプションでマイク)許可を要求します。許可が既に付与されたり拒否された場合は、現在の状態が返されますがダイアログを表示しません。"is true"の場合、許可が拒否されている場合、プラットフォーム固有のアラートが表示されます。ユーザーにアプリ設定への誘導を行います。 showSettingsAlert コピー
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
現在のカメラの水平視野角度を取得します。
注:この値は、あるデバイスでは推定値になります。コピー
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
すべてのカメラのサポートされるピクチャサイズを取得します。Copy to clipboard
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
setFlashModeセクションアクティブなカメラのフラッシュモードを設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });flip
flipセクション前面と後面カメラを切り替えます。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
setOpacityセクションカメラプレビューの不透明度を設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
stopRecordVideoセクション進行中のビデオレコーディングを停止します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();startRecordVideo
「startRecordVideo」セクション動画の録画を開始します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startRecordVideo({} as CameraPreviewOptions);isRunning
「isRunning」セクションカメラのプレビューが現在実行中かどうかを確認します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.isRunning();getAvailableDevices
「getAvailableDevices」セクション利用可能なカメラデバイスをすべて取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAvailableDevices();getZoom
「getZoom」セクション現在のズームの状態、最小値/最大値、およびレンズ情報を取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoom();getZoomButtonValues
「getZoomButtonValues」セクションスイッチングのためのズームボタンの値を返します。
- iOS/Android: 超広角が利用可能の場合、0.5を含み、広角が利用可能の場合、1と2を含み、望遠レンズが利用可能の場合、3を含みます。
- ウェブ: サポートされていません。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getZoomButtonValues();setZoom
セクションのタイトルは「setZoom」です。カメラのズームレベルを設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setZoom({} as { level: number; ramp?: boolean; autoFocus?: boolean });getFlashMode
「getFlashMode」セクション現在のフラッシュモードを取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getFlashMode();setDeviceId
Section titled “setDeviceId”Switches the active camera to the one with the specified deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Section titled “getDeviceId”現在バインドされているカメラデバイスのIDを取得します。 Androidの場合、物理レンズの要求が論理カメラにフォールバックした場合、このIDは論理カメラのIDを返します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getDeviceId();getPreviewSize
Section titled “getPreviewSize”現在のプレビューのサイズと位置を取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getPreviewSize();setPreviewSize
Section titled “setPreviewSize”プレビューのサイズと位置を設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setPreviewSize({} as { x?: number; y?: number; width: number; height: number });setFocus
「フォーカスを設定」カメラの焦点をプレビューの特定のポイントに設定します。
注記: プラグインは、ネイティブのタップフォーカスジェスチャーハンドラーを追加しません。タップをHTML/JS (例:オーバーレイUI) で処理し、ここに正規化された座標を渡してください。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
ファイルを削除ファイルを指定された絶対パスに存在するデバイス上で削除します。\n これは、Capacitorで作成した一時的な画像を簡単にクリーンアップするために使用します。 storeToFile.\nウェブ上ではサポートされていません。エラーが発生します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
セクション「getSafeAreaInsets」デバイスの安全なエリアのインセットを取得します。 オrientationに応じたノッチ/カメラカットアウトのインセットと現在のオrientationを返します。 ポートレートモードの場合、上部のインセット(上部のノッチ)を返します。 ランドスケープモードの場合、左側のインセット(ノッチが側面に移動)を返します。 このAPIは、すべてのモダン電話が持つカットアウトエリア(ノッチ、パンチホールなど)を特定的にターゲットしています。
Android: \u738b\u306b\u8a66\u4e2d\u3060\u306f\u5f53\u524d\u5b50\u5f62\u3060\u3044\u306e\u5c0f\u5e38\u3067\u53f0\u8a66\u3092\u53d1\u3002 iOS: \u30a8\u30a7\u30b5\u30f3\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u3092\u53d1\u3001\u30d1\u30c8\u30b9\u30bf\u30fc\u30b5\u30a4\u30f3\u30c8\u306b\u53f0\u8a66\u309
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
Section titled “getOrientation”デバイスの現在の向きをクロスプラットフォーム形式で取得します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Section titled “getExposureModes”アクティブなカメラがサポートする露光モードを返します。 モードには、‘locked’、‘auto’、‘continuous’、‘custom’が含まれます。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureModes();getExposureMode
Section titled “getExposureMode”現在の露光モードを返します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureMode();setExposureMode
Section titled “setExposureMode”露光モードを設定します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureMode({} as { mode: ExposureMode });getExposureCompensationRange
「getExposureCompensationRange」セクション露出補償範囲を返します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
「getExposureCompensation」セクション現在の露出補償を返します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
「setExposureCompensation」セクション露出補償を設定します。値は範囲に丸められます。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });CameraPreviewOptions
型の参照カメラプレビューの設定オプションを定義します。
export interface CameraPreviewOptions { /** * The parent element to attach the video preview to. * @platform web */ parent?: string; /** * A CSS class name to add to the preview element. * @platform web */ className?: string; /** * The width of the preview in pixels. Defaults to the screen width. * @platform android, ios, web */ width?: number; /** * The height of the preview in pixels. Defaults to the screen height. * @platform android, ios, web */ height?: number; /** * The horizontal origin of the preview, in pixels. * @platform android, ios */ x?: number; /** * The vertical origin of the preview, in pixels. * @platform android, ios */ y?: number; /** * The aspect ratio of the camera preview, '4:3' or '16:9' or 'fill'. * Cannot be set if width or height is provided, otherwise the call will be rejected. * Use setPreviewSize to adjust size after starting. * * @since 2.0.0 */ aspectRatio?: '4:3' | '16:9'; /** * Controls how the camera preview fills the available space. * - 'contain': Fits the entire preview within the space, may show letterboxing (default). * - 'cover': Fills the entire space, may crop edges of the preview. * @default "contain" * @platform android, ios, web */ aspectMode?: 'cover' | 'contain'; /** * The grid overlay to display on the camera preview. * @default "none" * @since 2.1.0 */ gridMode?: GridMode; /** * Adjusts the y-position to account for safe areas (e.g., notches). * @platform ios * @default false */ includeSafeAreaInsets?: boolean; /** * If true, places the preview behind the webview. * @platform android * @default true */ toBack?: boolean; /** * Bottom padding for the preview, in pixels. * @platform android, ios */ paddingBottom?: number; /** * Whether to rotate the preview when the device orientation changes. * @platform ios * @default true */ rotateWhenOrientationChanged?: boolean; /** * The camera to use. * @default "rear" */ position?: CameraPosition | string; /** * If true, saves the captured image to a file and returns the file path. * If false, returns a base64 encoded string. * @default false */ storeToFile?: boolean; /** * If true, prevents the plugin from rotating the image based on EXIF data. * @platform android * @default false */ disableExifHeaderStripping?: boolean; /** * If true, disables the audio stream, preventing audio permission requests. * @default true */ disableAudio?: boolean; /** * If true, locks the device orientation while the camera is active. * @platform android * @default false */ lockAndroidOrientation?: boolean; /** * If true, allows the camera preview's opacity to be changed. * @platform android, web * @default false */ enableOpacity?: boolean;
/** * If true, disables the visual focus indicator when tapping to focus. * @platform android, ios * @default false */ disableFocusIndicator?: boolean; /** * The `deviceId` of the camera to use. If provided, `position` is ignored. * @platform ios */ deviceId?: string; /** * On Android, attempts to bind a physical camera directly when `deviceId` refers to a physical lens. * Disabled by default because OEM support is inconsistent; when false, Android keeps the current logical-camera fallback behavior. * @default false * @platform android */ enablePhysicalDeviceSelection?: boolean; /** * The initial zoom level when starting the camera preview. * If the requested zoom level is not available, the native plugin will reject. * @default 1.0 * @platform android, ios * @since 2.2.0 */ initialZoomLevel?: number; /** * The vertical positioning of the camera preview. * @default "center" * @platform android, ios, web * @since 2.3.0 */ positioning?: CameraPositioning; /** * If true, enables video capture capabilities when the camera starts. * @default false * @platform android * @since 7.11.0 */ enableVideoMode?: boolean; /** * If true, forces the camera to start/restart even if it's already running or busy. * This will kill the current camera session and start a new one, ignoring all state checks. * @default false * @platform android, ios, web */ force?: boolean; /** * Sets the quality of video for recording. * Options: 'low', 'medium', 'high' * @note On Android requires 'enableVideoMode' to be true * @note Will affect the entire preview stream for iOS * @platform ios, android * @default "high" */ videoQuality?: 'low' | 'medium' | 'high';}CameraPreviewPictureOptions
「カメラプレビューの画像オプション」のセクション写真を撮るためのオプションを定義します。
export interface CameraPreviewPictureOptions { /** * The maximum height of the picture in pixels. The image will be resized to fit within this height while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ height?: number; /** * The maximum width of the picture in pixels. The image will be resized to fit within this width while maintaining aspect ratio. * If not specified the captured image will match the preview's visible area. */ width?: number; /** * The quality of the captured image, from 0 to 100. * Does not apply to `.png` format. * @default 85 */ quality?: number; /** * The format of the captured image. * @default "jpeg" */ format?: PictureFormat; /** * If true, the captured image will be saved to the user's gallery. * @default false * @since 7.5.0 */ saveToGallery?: boolean; /** * If true, the plugin will attempt to add GPS location data to the image's EXIF metadata. * This may prompt the user for location permissions. * @default false * @since 7.6.0 */ withExifLocation?: boolean; /** * If true, the plugin will embed a timestamp in the top-right corner of the image. * @default false * @since 7.17.0 */ embedTimestamp?: boolean; /** * If true, the plugin will embed the current location in the top-right corner of the image. * Requires `withExifLocation` to be enabled. * @default false * @since 7.18.0 */ embedLocation?: boolean; /** * Sets the priority for photo quality vs. capture speed. * - "speed": Prioritizes faster capture times, may reduce image quality. * - "balanced": Aims for a balance between quality and speed. * - "quality": Prioritizes image quality, may reduce capture speed. * See https://developer.apple.com/documentation/avfoundation/avcapturephotosettings/photoqualityprioritization for details. * * @since 7.21.0 * @platform ios * @default "speed" */ photoQualityPrioritization?: 'speed' | 'balanced' | 'quality';}ExifData
「EXIFデータ」のセクション画像から抽出されたEXIFデータを表します。
export interface ExifData { [key: string]: any;}CameraSampleOptions
「カメラサンプルオプション」のセクションカメラプレビューからサンプルフレームを撮るためのオプションを定義します。
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
「カメラプレビューのフラッシュモード」のセクションカメラで利用可能なフラッシュモード。
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';GridMode
グリッドモードexport type GridMode = 'none' | '3x3' | '4x4';PermissionRequestOptions
許可要求オプションexport interface PermissionRequestOptions { disableAudio?: boolean; showSettingsAlert?: boolean; title?: string; message?: string; openSettingsButtonTitle?: string; cancelButtonTitle?: string;}CameraPermissionStatus
カメラ許可状態export interface CameraPermissionStatus { camera: PermissionState; microphone?: PermissionState;}SupportedPictureSizes
カメラのサポートサイズ特定の方向に向いたカメラでサポートされる写真サイズを表します。
export interface SupportedPictureSizes { /** The camera direction ("front" or "rear"). */ facing: string; /** A list of supported picture sizes for this camera. */ supportedPictureSizes: PictureSize[];}CameraOpacityOptions
カメラの不透明度オプションカメラプレビューの不透明度の設定のオプションを定義します。
export interface CameraOpacityOptions { /** * The opacity percentage, from 0.0 (fully transparent) to 1.0 (fully opaque). * @default 1.0 */ opacity?: number;}CameraDevice
「カメラデバイス」というセクションデバイス上の物理的なカメラを表します (例: フロントカメラ)。
export interface CameraDevice { /** A unique identifier for the camera device. */ deviceId: string; /** A human-readable name for the camera device. */ label: string; /** The physical position of the camera on the device. */ position: CameraPosition; /** A list of all available lenses for this camera device. */ lenses: CameraLens[]; /** The overall minimum zoom factor available across all lenses on this device. */ minZoom: number; /** The overall maximum zoom factor available across all lenses on this device. */ maxZoom: number; /** Identifies whether the device is a logical camera (composed of multiple physical lenses). */ isLogical: boolean;}LensInfo
「レンズ情報」というセクション現在アクティブなレンズの詳細情報を表します。
export interface LensInfo { /** The focal length of the active lens in millimeters. */ focalLength: number; /** The device type of the active lens. */ deviceType: DeviceType; /** The base zoom ratio of the active lens (e.g., 0.5x, 1.0x). */ baseZoomRatio: number; /** The current digital zoom factor applied on top of the base zoom. */ digitalZoom: number;}真実の源
セクション「真実の源」このページはプラグインの src/definitions.ts API のパブリック変更を再度同步するときに実行してください。