ガイド
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 |
カメラプレビューのストリームから1フレームをキャプチャします。 |
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 storeToFileWebではサポートされておらず、エラーがスローされます。 |
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. の使い方」のネイティブ機能については