开始
复制一个包含安装步骤和完整 Markdown 指南的配置提示。
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.
安装
《安装》您可以使用我们的AI辅助设置来安装插件。使用以下命令将Capgo技能添加到您的AI工具中:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins然后使用以下提示:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/camera-preview` plugin in my project.如果您更喜欢手动设置,请运行以下命令并按照以下平台特定的说明进行安装:
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 将会是一个设备上的绝对文件路径,而不是一个base64字符串。使用getBase64FromFilePath获取base64字符串。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.capture({} as CameraPreviewPictureOptions);captureSample
标题:“captureSample”从摄像头预览流中捕获一个单独的帧。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.captureSample({} as CameraSampleOptions);getSupportedFlashModes
标题:“getSupportedFlashModes”获取当前摄像头支持的闪光模式。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedFlashModes();setAspectRatio
标题:“setAspectRatio”设置摄像头预览的比例。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setAspectRatio({} as { aspectRatio: '4:3' | '16:9'; x?: number; y?: number });getAspectRatio
[Section titled “getAspectRatio”][getAspectRatio]获取当前相机预览的宽高比
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getAspectRatio();setGridMode
[Section titled “setGridMode”][setGridMode]设置相机预览覆盖层的网格模式
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setGridMode({} as { gridMode: GridMode });getGridMode
[Section titled “getGridMode”][getGridMode]获取当前相机预览覆盖层的网格模式
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getGridMode();checkPermissions
[Section titled “checkPermissions”][checkPermissions]检查当前相机(可选微型机)权限状态,无需弹出系统对话框
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.checkPermissions();requestPermissions
Section titled “requestPermissions”请求相机(和可选麦克风)权限。如果权限已经授权或拒绝,当前状态将返回而不提示。当 showSettingsAlert is true 且权限被拒绝时,会弹出一个平台特定的提示,指导用户到应用设置。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.requestPermissions();getHorizontalFov
Section titled “getHorizontalFov”获取当前激活相机的水平视野。注意:在某些设备上,这可能是一个估计值。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getHorizontalFov();getSupportedPictureSizes
Section titled “getSupportedPictureSizes”获取所有相机支持的图片尺寸。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSupportedPictureSizes();setFlashMode
Section titled “setFlashMode”设置当前激活相机的闪光模式。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFlashMode({} as { flashMode: CameraPreviewFlashMode | string });flip
标题为“翻转”切换前后摄像头.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.flip();setOpacity
标题为“设置不透明度”设置摄像头预览的不透明度.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setOpacity({} as CameraOpacityOptions);stopRecordVideo
标题为“停止录制视频”停止正在进行的视频录制.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.stopRecordVideo();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 如果长焦镜头可用
- Web: 不支持
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
标题:“setDeviceId”切换到指定的相机。 deviceId.
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setDeviceId({} as { deviceId: string });getDeviceId
Section titled “getDeviceId”获取当前绑定的摄像头设备的 ID。 在 Android 上,如果物理镜头请求降级为逻辑摄像头,这将返回绑定的逻辑摄像头 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
Section titled “setFocus”设置预览中的特定点的摄像头焦距。 注意:插件不附加任何本机的点击焦距处理程序。请在 HTML/JS 中处理点击(例如,覆盖的 UI),然后将标准化坐标传递到这里。
复制到剪贴板
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setFocus({} as { x: number; y: number });deleteFile
标题:删除文件删除设备上的给定绝对路径下的文件。
使用此功能快速清理临时创建的图片。
在web上,这项功能不受支持并将抛出异常。
复制到剪贴板 storeToFile标题:获取安全区域内边距
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.deleteFile({} as { path: string });getSafeAreaInsets
复制到剪贴板标题:获取设备方向
获取设备的当前方向,跨平台格式。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getSafeAreaInsets();getOrientation
标题:deleteFile删除设备上的给定绝对路径下的文件。 使用此功能快速清理临时创建的图片。 在web上,这项功能不受支持并将抛出异常。 复制到剪贴板
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getOrientation();getExposureModes
Section titled “getExposureModes”返回当前激活相机支持的曝光模式。 模式可以包括: ‘锁定’, ‘自动’, ‘连续’, ‘自定义’。
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
Section titled “getExposureCompensationRange”返回曝光补偿(EV偏差)支持范围。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensationRange();getExposureCompensation
Section titled “getExposureCompensation”获取当前曝光补偿(EV偏差)值。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.getExposureCompensation();setExposureCompensation
Section titled “setExposureCompensation”设置曝光补偿(EV偏差)值。值将被限制在范围内。
import { CameraPreview } from '@capgo/camera-preview';
await CameraPreview.setExposureCompensation({} as { value: number });Type Reference
Section titled “Type Reference”CameraPreviewOptions
Section titled “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
Section titled “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
标题:“ExifData”表示从图像中提取的EXIF数据。
export interface ExifData { [key: string]: any;}CameraSampleOptions
标题:“CameraSampleOptions”定义了从摄像头预览中捕捉样本帧的选项。
export interface CameraSampleOptions { /** * The quality of the captured sample, from 0 to 100. * @default 85 */ quality?: number;}CameraPreviewFlashMode
标题:“CameraPreviewFlashMode”摄像头可用的闪光模式。 ‘torch’ 是一个连续光模式。
export type CameraPreviewFlashMode = 'off' | 'on' | 'auto' | 'torch';GridMode
标题:“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在上游发生变化时。
从开始就一直走
标题:『从开始就一直走』如果您正在使用 开始使用 连接它以规划原生媒体和界面行为 使用@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的原生能力 @capgo/capacitor-video-player 查看@capgo/capacitor-video-player的实现细节