更新记录

1.1.6(2024-06-25)

优化插件内部逻辑。

1.1.5(2024-06-25)

新增设置相机预览分辨率接口。

1.1.4(2024-06-23)

新增相机的最小和最大fps设置。

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0,Android:5.0,iOS:不支持,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

概述

XF-greenCamera实现了绿幕抠图透明相机效果。。

模块调用

<green-camera ref="cameraCutout" :minFps="minFps" :maxFps="maxFps" :hidden="hidden" :style="{width:widthNum+'rpx',height:heightNum+'rpx',background:yanse}">
</green-camera>

模块接口

switchCamera

切换相机

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].switchCamera();

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).switchCamera();
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

startCamera

停止相机预览后打开相机

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].startCamera();

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).startCamera();
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

stopCamera

停止相机预览

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].stopCamera();

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).stopCamera();
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setStartColor

设置绿幕扣取开始的HSV颜色

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setStartColor(35.0, 43.0, 46.0);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setStartColor(35.0, 43.0, 46.0);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setEndColor

设置绿幕扣取结束的HSV颜色

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setEndColor(77.0, 255.0, 255.0);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setEndColor(77.0, 255.0, 255.0);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setIsOpenCut

设置绿幕裁剪开关

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsOpenCut(true);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsOpenCut(true);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setIsMorphOpen

设置是否开启形态学: MORPH_OPEN

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsMorphOpen(true);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsMorphOpen(true);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setIsMorphClose

设置是否开启形态学: MORPH_CLOSE

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsMorphClose(true);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsMorphClose(true);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setIsDilate

设置是否膨胀

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsDilate(true);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsDilate(true);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setIsErode

设置是否腐蚀

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsErode(true);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsErode(true);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

isGaussianBlur

设置是否应用高斯模糊

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setIsGaussianBlur(true,5,5,0,0);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setIsGaussianBlur(true,5,5,0,0);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setScalingRatio

设置输出渲染缩放比例,优化性能

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setScalingRatio(0.5);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setScalingRatio(0.5);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

setPreviewSize

设置相机预览分辨率

uni-app项目中(nvue)调用示例:

this.$refs["cameraCutout"].setPreviewSize(1080,1920);

uni-app x项目(uvue)中调用示例:

// #ifdef APP-ANDROID
import { GreenCameraElement } from 'uts.sdk.modules.XFGreenCamera';
// #endif
// #ifdef APP-ANDROID
(this.$refs["cameraCutout"] as GreenCameraElement).setPreviewSize(1080,1920);
// #endif

可用性

Android系统

可提供的1.0.0及更高版本

隐私、权限声明

1. 本插件需要申请的系统权限列表:

android.permission.CAMERA

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问