相机预览

@capacitor-community/camera-preview

第8条

允许来自 Javascript 和 HTML 相机交互的相机插件
(基于cordova-plugin-camera-preview).

如果您使用Capacitor 7, 请使用 7.0.5版 翻译:

如果您正在使用电容 6, 请使用 6.0.1版本

如果您使用电容 5, 请使用 版本5

如果您使用电容 4, 请使用 版本 4

如果您使用电容 3, 请使用 版本3

如果您使用电容2, 请使用 版本 1

公关很受欢迎.

- 说吧 @arielhernandezmusa (英语) 财务报告和审定财务报表 @pbowyer (英语),当前维护者

安装

yarn add @capacitor-community/camera-preview

or

npm install @capacitor-community/camera-preview

然后运行

npx cap sync

额外的Android安装步骤

重要 camera-preview 3+需要"Gradle 7."(3+),"Gradle 7. 如果你使用Gradle 4, 请使用 版本 2 此插件.

打开 android/app/src/main/AndroidManifest.xml 及以上 </manifest> 标记添加此行以请求 CAMERA 权限 :

<uses-permission android:name="android.permission.CAMERA" />

需要更多帮助咨询 电容文件。 。 。 .

变量

此插件将使用以下工程变量( 在您的应用程序中定义) variables.gradle 文件名 :

• androidxExifInterfaceVersion页:1 androidx.exifinterface:exifinterface (默认 : 1.4.2(中文(简体) )

额外 iOS 安装步骤

您需要添加两个权限到 Info.plist。跟踪 电容文件 并用原始密钥添加权限 NSCameraUsageDescription 财务报告和审定财务报表 NSMicrophoneUsageDescription。 。 。 . NSMicrophoneUsageDescription 只有使用音频时才需要。 否则设置 disableAudio 选项到 true,也可以禁用麦克风许可请求.

额外的 Web 安装步骤

添加 import { CameraPreview } from '@capacitor-community/camera-preview'; 在要使用插件的文件中.

然后在html中添加 <div id="cameraPreview"></div>

财务报告和审定财务报表 CameraPreview.start({ parent: "cameraPreview"}); 将工作.

方法

开始( 选项)

启动相机预览实例.

机器人: 返回的许诺只有在本地预览首次交付后才解决 准备捕捉 它拒绝无法启动相机或预览, 或者没有 第一帧在10秒内到达 通话 start() 当相机已经运行时或 开始拒绝.

import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'rear',
  height: 1920,
  width: 1080
};
CameraPreview.start(cameraPreviewOptions);

记得在您的应用的 HTML 或 body 元素上添加以下样式 :

ion-content {
  --background: transparent;
}

考虑到这将让应用程序上的所有离子内容透明化, 如果你想只显示一页的相机预览, 请在离子内容中添加一个自定义的类, 并使其透明 :

.my-custom-camera-preview-content {
  --background: transparent;
}

如果在应用了上述样式后相机预览未显示,则对母组件的根 div 元素应用透明背景颜色 例:VueJS >>. App.vue 组件

<template>
  <ion-app id="app">
    <ion-router-outlet />
  </ion-app>
</template>

<style>
#app {
  background-color: transparent !important;
}
</style>

停止( )

停止相机预览实例 .

CameraPreview.stop();

翻转( c)

仅为 Android 和 ios 在后相机和前相机之间切换, 不支持网络 javascript CameraPreview.flip()

机器人: 返回的承诺只有在切换相机交付后才解决 第一个预览框架。 如果当前预览尚未准备好, 它拒绝 中,或者切换相机无法启动或退出。 在只有一个设备上 相机,它不切换即可解析,保留现有的行为.

抓取( 选项)

机器人: capture() 需要一个已交付第一个帧的相机预览 。 它拒绝 如果没有活动相机,则预览尚未准备好,或者另一个捕获工作已经在进行中. 原生抓取和图像处理失败作为承诺拒绝返回,而不是 终止Android进程.

如果预览暂停或停止,接受的捕获也会被拒绝,而不是等待, 或如果其输出表面被破坏。 A 类 flip() 在抓获期间提出的请求被驳回,无需 打断捕捉。 如果在图片失败后重新启动预览,则抓取拒绝并 isCameraStarted() 变成 false。 。 。 .

import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';

const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
  quality: 50
};

const result = await CameraPreview.capture(cameraPreviewPictureOptions);
const base64PictureData = result.value;

// do sometime with base64PictureData

抓取样本( 选项)

import { CameraSampleOptions } from '@capacitor-community/camera-preview';

const cameraSampleOptions: CameraSampleOptions = {
  quality: 50
};

const result = await CameraPreview.captureSample(cameraSampleOptions);
const base64PictureData = result.value;

// do something with base64PictureData

获得支持的 FlashModes ()

import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';

const flashModes = await CameraPreview.getSupportedFlashModes();
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;

设定FlashMode( 选项)

const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';

CameraPreview.setFlashMode(cameraPreviewFlashMode);

只启动记录视频( 选项) -- -- ANDROID 和 iOS

开始捕捉视频

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

仅停止记录视频( ) -- -- ANDROID 和 iOS

拍完录影带 被捕获的视频将作为文件路径返回,视频格式为.mp4

const resultRecordVideo = await CameraPreview.stopRecordVideo();

setOpacity(选项:相机Opacity Options):承诺-; -- -- -- 仅安地鲁德

设定相机预览的不透明性

const myCamera = CameraPreview.start({ enableOpacity: true });
myCamera.setOpacity({ opacity: 0.4 });

是CameraStartted() -- -- 仅限ANDROID和iOS

检查或检测相机是否已启动

机器人: 此报告相机预览准备, 即本地预览是否有 生产了第一个框架,可以使用。 没错 false 当预览还在开始时,以及 false 在预览被暂停、停止或已丢失其输出表面之后.

const { value } = await CameraPreview.isCameraStarted();

设置

FLASH MODE 软件

闪光模式设置 :

演示/实例应用程序

可在 示例应用