使用@capgo/camera-preview
相机预览插件的主界面
安装
bun add @capgo/camera-preview
bunx cap sync
bunx cap sync code将本地插件的本机code复制到您的本机项目中。每次升级插件后，请重新运行它。
导入
import { CameraPreview } from '@capgo/camera-preview';
API
| 方法 | 描述 |
|---|---|
start |
启动相机预览 |
stop |
停止相机预览 |
capture |
从相机中捕获照片 |
captureSample |
从相机预览流中捕获单个帧 |
startBarcodeScanner |
在活动相机预览上启动条形码扫描 |
stopBarcodeScanner |
在继续运行相机预览的情况下停止条形码扫描 |
getSupportedFlashModes |
获取当前激活相机支持的闪光模式。 |
setAspectRatio |
设置相机预览的比例。 |
getAspectRatio |
获取当前相机预览的比例。 |
setGridMode |
设置相机预览覆盖层的网格模式。 |
getGridMode |
获取当前相机预览覆盖层的网格模式。 |
checkPermissions |
检查当前相机（可选微型摄像头）权限状态，无提示系统对话框。 |
requestPermissions |
请求相机（可选微型摄像头）权限。如果权限已被授予或拒绝，则返回当前状态，无提示。 showSettingsAlert 当为真且权限被拒绝时，会显示一个平台特定的提示，指导用户到应用设置。 |
getHorizontalFov |
获取当前激活相机的水平视野（FoV）。注意：在某些设备上，这可能是一个估计值。 |
getSupportedPictureSizes |
获取所有相机支持的图片尺寸。 |
setFlashMode |
设置当前激活相机的闪光模式。 |
flip |
切换前置和后置相机。 |
setOpacity |
设置摄像头预览的透明度。 |
stopRecordVideo |
停止正在进行的视频录制。 |
startRecordVideo |
开始录制视频。 |
setVideoQuality |
设置当前摄像头会话的视频录制质量。 |
getVideoQuality |
获取当前视频录制质量。 |
getSupportedVideoQualities |
获取当前摄像头支持的视频质量。 |
setVideoCodec |
设置用于录制的视频编码器。 |
getVideoCodec |
获取当前用于录制的视频编码器。 |
getSupportedVideoCodecs |
获取当前摄像头支持的视频编码器。 |
isVideoStabilizationSupported |
检查当前摄像头是否支持视频稳定。 |
getSupportedVideoStabilizationModes |
获取当前摄像头支持的视频稳定模式。 |
getVideoStabilizationMode |
获取当前的视频稳定模式。 |
setVideoStabilizationMode |
设置视频稳定模式用于录制。无法在录制过程中更改。您还可以传递 videoStabilizationMode in startRecordVideo() options。 |
isRunning |
检查摄像头预览是否正在运行。 |
getAvailableDevices |
获取所有可用的摄像头设备。 |
getZoom |
获取当前缩放状态，包括最小值/最大值和当前镜头信息。 |
getZoomButtonValues |
返回缩放按钮值以快速切换。- iOS/Android：包括 0.5 如果超宽可用；1 和 2 如果宽可用；3 如果望远镜可用 - Web：不支持。 |
setZoom |
设置摄像头的缩放级别。 |
getFlashMode |
获取当前闪光模式。 |
setDeviceId |
切换到具有指定 deviceId. |
getDeviceId |
获取当前绑定摄像头设备的 ID。Android 上，如果物理镜头请求退回到逻辑摄像头，这将返回绑定逻辑摄像头 ID。 |
getPreviewSize |
获取当前预览大小和位置。 |
setPreviewSize |
设置预览大小和位置。 |
setFocus |
设置预览中的特定点为相机焦点。 |
deleteFile |
删除设备上的绝对路径下的文件。使用此功能快速清除使用 storeToFile在web上， |
getSafeAreaInsets |
获取设备的安全区域边距。返回方向感知的凹口/摄像头切口边距和当前方向。在竖屏模式下：返回顶部边距（凹口位于顶部）。在横屏模式下：返回左边边距（凹口移动到侧面）。这特别针对现代手机的凹口区域（凹口，孔洞等）。 |
getOrientation |
获取当前设备方向的跨平台格式。 |
getExposureModes |
返回支持的活跃相机的曝光模式。模式可以包括：‘锁定’，‘自动’，‘连续’，‘自定义’。 |
getExposureMode |
返回当前的曝光模式。 |
setExposureMode |
设置曝光模式。 |
getExposureCompensationRange |
返回曝光模式支持的范围。 |
getExposureCompensation |
返回当前的曝光补偿（EV偏差）。 |
setExposureCompensation |
设置曝光补偿（EV偏差）。值将被限制在范围内。 |
getWhiteBalanceModes |
返回当前摄像头支持的白平衡模式。模式可以包括：'AUTO'，'LOCK'，'CONTINUOUS'。 CUSTOM 直到实现手动增益支持，才会列出。 |
getWhiteBalanceMode |
返回当前的白平衡模式。 |
setWhiteBalanceMode |
设置白平衡模式。 CONTINUOUS 保持自动白平衡运行（推荐；避免黄色/暖色调）， LOCK 固定当前增益值 AUTO 进行一次性调整。 CUSTOM 保留和拒绝，直到实现手动增益支持。 |
getSupportedVideoFrameRates |
列出当前格式下摄像头支持的视频帧率。支持的值取决于所选的摄像头、镜头和视频质量。 |
getVideoFrameRate |
返回当前摄像头配置的视频帧率。安卓设备下实际录制帧率可能在低光下或在热压下会有所波动。 |
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()
从摄像头预览流中捕获单个帧
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/摄像头预览 在 @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中的原生能力