更新记录
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:不支持 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
概述
XF-greenCameraXF-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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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项目中(vue/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及更高版本