ガイド
Capacitor で Camera Preview を使う方法
@capgo/camera-preview を使用
CameraPreview プラグインのメインインターフェースです。
インストール
bun add @capgo/camera-preview
bunx cap sync
bunx cap sync プラグインのネイティブcodeをネイティブプロジェクトにコピーします。プラグインをアップグレードするたびに再度実行してください。
インポート
import { CameraPreview } from '@capgo/camera-preview';
API の概要
| メソッド | 説明 |
|---|---|
start |
カメラプレビューを開始します。 |
stop |
カメラプレビューを停止します。 |
capture |
カメラで写真を撮影します。 |
captureSample |
カメラプレビューのストリームから単一フレームをキャプチャします。 |
startBarcodeScanner |
アクティブなカメラプレビューでバーコードスキャンを開始します。 |
stopBarcodeScanner |
カメラプレビューを継続したまま、バーコードスキャンを停止します。 |
getSupportedFlashModes |
アクティブなカメラがサポートしているフラッシュモードを取得します。 |
setAspectRatio |
カメラプレビューのアスペクト比を設定します。 |
getAspectRatio |
カメラプレビューの現在のアスペクト比を取得します。 |
setGridMode |
カメラプレビューオーバーレイのグリッドモードを設定します。 |
getGridMode |
カメラプレビューオーバーレイの現在のグリッドモードを取得します。 |
checkPermissions |
システムダイアログを表示せずに、現在のカメラ（およびオプションでマイク）の権限ステータスを確認します。 |
requestPermissions |
カメラ（およびオプションでマイク）の権限をリクエストします。既に許可または拒否されている場合は、ダイアログを表示せずに現在のステータスを返します。また、 showSettingsAlert が true で権限が拒否されている場合、ユーザーをアプリの設定画面へ誘導するプラットフォーム固有のアラートが表示されます。 |
getHorizontalFov |
アクティブなカメラの水平視野角（FoV）を取得します。注意：デバイスによっては推定値となる場合があります。 |
getSupportedPictureSizes |
すべてのカメラでサポートされている写真サイズを取得します。 |
setFlashMode |
アクティブなカメラのフラッシュモードを設定します。 |
flip |
インカメラとアウトカメラを切り替えます。 |
setOpacity |
カメラプレビューの不透明度を設定します。 |
stopRecordVideo |
進行中のビデオ録画を停止します。 |
startRecordVideo |
ビデオ録画を開始します。 |
setVideoQuality |
アクティブなカメラセッションのビデオ録画品質を設定します。 |
getVideoQuality |
現在のビデオ録画品質を取得します。 |
getSupportedVideoQualities |
アクティブなカメラがサポートしているビデオ品質を返します。 |
setVideoCodec |
録画時に使用するビデオコーデックを設定します。 |
getVideoCodec |
現在録画に使用されているビデオコーデックを取得します。 |
getSupportedVideoCodecs |
アクティブなカメラがサポートしているビデオコーデックを返します。 |
isVideoStabilizationSupported |
アクティブなカメラがビデオ手ブレ補正に対応しているか確認します。 |
getSupportedVideoStabilizationModes |
アクティブなカメラがサポートしているビデオ手ブレ補正モードを返します。 |
getVideoStabilizationMode |
現在のビデオ手ブレ補正モードを取得します。 |
setVideoStabilizationMode |
録画用のビデオ手ブレ補正モードを設定します。録画中は変更できません。また、以下の videoStabilizationMode における startRecordVideo() オプションも指定可能です。 |
isRunning |
カメラプレビューが現在実行中かどうかを確認します。 |
getAvailableDevices |
利用可能なすべてのカメラデバイスを取得します。 |
getZoom |
最小/最大ズーム値や現在のレンズ情報を含む、現在のズーム状態を取得します。 |
getZoomButtonValues |
素早い切り替え用のズームボタンの値を返します。 - iOS/Android: 超広角が利用可能な場合は0.5、広角が利用可能な場合は1と2、望遠が利用可能な場合は3を含みます - Web: 非対応。 |
setZoom |
カメラのズームレベルを設定します。 |
getFlashMode |
現在のフラッシュモードを取得します。 |
setDeviceId |
アクティブなカメラを指定されたものに切り替えます。 deviceId. |
getDeviceId |
現在バインドされているカメラデバイスのIDを取得します。Androidで物理レンズのリクエストが論理カメラにフォールバックした場合、このメソッドはバインドされた論理カメラのIDを返します。 |
getPreviewSize |
現在のプレビューサイズと位置を取得します。 |
setPreviewSize |
プレビューのサイズと位置を設定します。 |
setFocus |
プレビュー内の特定のポイントにカメラのフォーカスを設定します。 |
deleteFile |
Deletes a file at the given absolute path on the device. Use this to quickly clean up temporary images created with storeToFile。Webではサポートされておらず、エラーがスローされます。 |
getSafeAreaInsets |
デバイスのセーフエリアインセットを取得します。向きに応じたノッチ/カメラの切り欠きインセットと現在の向きを返します。ポートレートモードでは、上部のインセット（上部のノッチ）を返します。ランドスケープモードでは、左側のインセット（サイドに移動したノッチ）を返します。これは、最新のスマートフォンに共通する切り欠きエリア（ノッチ、パンチホールなど）を対象としています。 |
getOrientation |
現在のデバイスの向きをクロスプラットフォーム形式で取得します。 |
getExposureModes |
アクティブなカメラがサポートしている露出モードを返します。モードには 'locked', 'auto', 'continuous', 'custom' が含まれます。 |
getExposureMode |
現在の露出モードを返します。 |
setExposureMode |
露出モードを設定します。 |
getExposureCompensationRange |
サポートされている露出補正（EVバイアス）の範囲を返します。 |
getExposureCompensation |
現在の露出補正（EVバイアス）を返します。 |
setExposureCompensation |
露出補正（EVバイアス）を設定します。値は範囲内に制限されます。 |
getWhiteBalanceModes |
アクティブなカメラがサポートしているホワイトバランスモードを返します。モードには 'AUTO', 'LOCK', 'CONTINUOUS' が含まれます。 CUSTOM マニュアルゲインのサポートが実装されるまで、リストには表示されません。 |
getWhiteBalanceMode |
現在のホワイトバランスモードを返します。 |
setWhiteBalanceMode |
ホワイトバランスモードを設定します。 CONTINUOUS オートホワイトバランスを維持します（推奨：暖色系や黄色っぽくなるのを防ぎます）。 LOCK 現在のゲインを固定します。 AUTO 一度限りの調整を行います。 CUSTOM 手動ゲインサポートの実装まで、予約および拒否されます。 |
getSupportedVideoFrameRates |
現在のフォーマットにおいて、アクティブなカメラがサポートしているビデオフレームレートをリストします。サポートされる値は、選択されたカメラ、レンズ、およびビデオ品質によって異なります。 |
getVideoFrameRate |
アクティブなカメラに設定されているビデオフレームレートを返します。Androidでは、低照度下や熱による負荷によって、実際の録画フレームレートが変動する場合があります。 |
setVideoFrameRate |
アクティブなカメラセッションのターゲットビデオフレームレートを設定します。録画を開始する際は、 frameRate まで startRecordVideo() こちらを渡すことを推奨します。サポートされていない値は、明確なエラーとともに拒否されます。 |
例
start()
カメラプレビューを開始します。
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.start({ parent: 'parent' });
console.log(result);
stop()
カメラプレビューを停止します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stop();
capture()
カメラから写真をキャプチャします。
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.capture({ height: 1920 });
console.log(result);
captureSample()
カメラプレビューのストリームから1フレームをキャプチャします。
import { CameraPreview } from '@capgo/camera-preview';
const result = await CameraPreview.captureSample({
quality: 85,
mirrorFrontCamera: false,
});
console.log(result);
startBarcodeScanner()
アクティブなカメラプレビューでバーコードスキャンを開始します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.startBarcodeScanner();
stopBarcodeScanner()
カメラプレビューを継続したまま、バーコードスキャンを停止します。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopBarcodeScanner();
上記の表は56のコアメソッドを一覧にしています。リスナーとバージョンのヘルパー、および各メソッドの完全な仕様は、次に記載されています: GitHub リポジトリ.
イベントをリッスンする
addListener ハンドルを返します。画面がアンマウントされるときに handle.remove() 画面がアンマウントされるとき、または CameraPreview.removeAllListeners() すべてのリスナーを解除します。
完全なリファレンス
@capgo/camera-preview の使い方から続ける
使用している場合 @capgo/camera-preview の使い方 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/camera-preview @capgo/camera-preview の実装の詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については