收藏人数:
购买（
试用
赞赏（0）
更新记录
1.0.4（2024-04-10）
1.0.4版本更新内容 1.处理云打包失败 2.cameraX版本使用到1.1.0，版本过高对并编译版本有限制 3.目标版本 targetSdkVersion=33 4.编译版本 compileSdkVersion=33
1.0.3（2024-04-07）
1.0.3版本更新内容 1.cameraX版本升级到1.3.2 2.拍照，录像完善错误提示 3.提高项目编译版本 targetSdkVersion=33 4.相机预览组件在页面退出时销毁 5.暴露组件手动销毁方法
1.0.2（2024-03-23）
1.0.2版本更新内容 1.录制视频切出去时关闭录制，功能参照系统相机录像功能 2.切出去：退出页面、切回桌面
查看更多平台兼容性
| Android | Android CPU类型 | iOS |
|---|---|---|
| 适用版本区间：5.0 - 14.0 | armeabi-v7a：支持，arm64-v8a：支持，x86：支持 | × |
原生插件通用使用流程：
- 购买插件，选择该插件绑定的项目。
- 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
- 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
UniComponent - 完全界面自定义相机预览，拍照，录像，各种原生操作按钮，集成设置分辨率，视频质量
插件说明
1.0.0
1.完全界面自定义相机预览，拍照，录像，各种原生操作按钮，集成设置分辨率，视频质量
2.自定义视频质量480P/720P/1080P/2160p,图片比例-4:3/16:9
1.0.1
1.增加图片旋转，镜像处理方法
2.适配图片可能出现的旋转和前置摄像头的可能镜像情况
3.完全自定义边缘识别，图片随意拖动剪切，可单独/配合使用
1.0.2版本更新内容
1.录制视频切出去时关闭录制，功能参照系统相机录像功能
2.切出去：退出页面、切回桌面
1.0.3版本更新内容
1.cameraX版本升级到1.3.2
2.拍照，录像完善错误提示
3.提高项目编译版本 targetSdkVersion=33
4.相机预览组件在页面退出时销毁
5.暴露组件手动销毁方法
1.0.4版本更新内容
1.处理云打包失败
2.cameraX版本使用到1.1.0，版本过高对并编译版本有限制
3.目标版本 targetSdkVersion=33
4.编译版本 compileSdkVersion=33
插件支持
目前UniComponent插件只支持.nvue文件插件引入
1.下载或购买云插件
2.项目manifest.json -> App原生插件配置 -> 云端插件[选择云端插件]
3.使用云插件后，项目引入组件即可使用插件使用demo
<!-- 拍照预览，边缘识别，图片剪切 -->
<template>
<view>
<view style="overflow-y: scroll;">
<text style="font-size:30rpx;word-wrap:break-word;">
完全界面自定义相机预览，拍照，录像，各种原生操作按钮，集成设置分辨率，视频质量
</text>
<text style="font-size:30rpx;word-wrap:break-word;">
增加图片旋转，镜像处理方法，适配图片可能出现的旋转和前置摄像头的可能镜像情况
</text>
<text style="font-size:30rpx;word-wrap:break-word;">
自定义视频质量480P/720P/1080P/2160p,图片比例-4:3/16:9
</text>
<text style="font-size:30rpx;word-wrap:break-word;">
完全自定义边缘识别，图片随意剪切，可单独使用，可配合使用
</text>
<!-- 拍摄预览组件 -->
<CustomPreview ref="CustomPreview" style="width:100%;height:200px;background-color: antiquewhite;">
</CustomPreview>
<button @click="unbindCamera()">销毁预览(v1.0.3)</button>
<button @click="switchCamera()">切换摄像头</button>
<button @click="takePhoto()">拍照</button>
<button @click="startVideo()">开始录像</button>
<button @click="pauseVideo()">暂停录像</button>
<button @click="resumeVideo()">继续录像</button>
<button @click="stopVideo()">停止录像</button>
<button @click="switchTorch()">打开或关闭手电筒</button>
<button @click="switchFlashMode()">打开或关闭闪光灯</button>
<button @click="hasBackCamera()">返回是否有后置摄像头</button>
<button @click="hasFrontCamera()">返回是否有前置摄像头</button>
<button @click="imageRotate(filePath,90)">旋转图片</button>
<button @click="imageMirror(filePath,true,false)">镜像图片</button>
<!-- 剪切预览组件 -->
<CustomCrop ref="CustomCrop" style="width:100%;height:200px;background-color: antiquewhite;">
</CustomCrop>
<button @click="confirmCrop()">确定剪切</button>
<button @click="cancelCrop()">取消剪切</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
filePath: ''
}
},
onLoad() {},
mounted() {
/**
* 预览组件初始化
* @param quality 视频质量
* 0:LOWEST（The lowest video quality supported by the video frame producer.）
* 1:HIGHEST（The highest video quality supported by the video frame producer.）
* 4:SD（720 x 480 (480p)）
* 5:HD（f 1280 x 720 (720p) ）
* 6:FHD（1920 x 1080 (1080p) ）
* 8:UHD（3840 x 2160 (2160p) ）
* @param aspectRatio 拍照比例 0=4:3 1=16:9
* @param res - 成功示例：{"code":2xx,"data":string/int/bool,"message":"success"}
* --code=200: 拍照成功,data(string)=图片路径
* --code=201: 视频录制中,data(int)=录制时长/s,每秒更新一次
* --code=202: 视频录制结束,data(string)=视频路径
* --code=203: 是否有前摄像头,data(bool)=是否有前摄像头true/false
* --code=204: 是否有后摄像头,data(bool)=是否有后摄像头true/false
* --code=205: 图片旋转,data(string)=图片路径
* --code=206: 图片镜像处理,data(string)=图片路径
* - 失败示例： {"code":500,data:null,"message":"error"}(message:错误信息)
*/
this.$refs.CustomPreview.init(4, 0, (res) => {
console.log("[CustomPreview:res]=", res);
this.showToast("[CustomPreview:res]=" + JSON.stringify(res))
if (res.code == 200) {
this.showToast("[CustomCrop] 图片路径：" + res.data)
this.filePath = res.data;
// 设置剪切
this.$refs.CustomCrop.initCrop(res.data);
// 保存图片路径，用于其他测试
uni.setStorageSync("filePath", res.data)
}
if (res.code == 201) {
this.showToast("[CustomPreview] 视频录制时间：" + res.data)
}
if (res.code == 202) {
this.showToast("[CustomPreview] 视频路径：" + res.data)
}
if (res.code == 203) {
this.showToast("[CustomPreview] 是否有前摄像头：" + res.data)
}
if (res.code == 204) {
this.showToast("[CustomPreview] 是否有后摄像头：" + res.data)
}
if (res.code == 205) {
this.showToast("[CustomPreview] 对图片旋转指定角度：" + res.data)
}
if (res.code == 206) {
this.showToast("[CustomPreview] 图片水平或垂直镜像：" + res.data)
}
})
/**
* 边缘识别初始化
* @param res - 成功示例：{"code":200,"data":string,"message":"success"}
* --code=200: 图片剪切成功,data(string)=图片路径
* --code=201: 图片剪切取消,data(string)=图片源路径
* - 失败示例： {"code":500,data:null,"message":"error"}(message:错误信息)
*/
this.$refs.CustomCrop.init((res) => {
console.log("[CustomCrop:res]=", res);
if (res.code == 200) {
// 拍照后传入路径用于图片边缘识别和剪切
this.showToast("[CustomCrop] 图片剪切成功路径：" + res.data)
this.$refs.CustomCrop.initCrop(res.data);
}
if (res.code == 201) {
this.showToast("[CustomCrop] 图片剪切取消路径：" + res.data)
}
})
},
methods: {
showToast(c) {
uni.showToast({
title: c,
icon: 'none'
});
},
// 销毁预览组件
unbindCamera() {
this.$refs.CustomPreview.unbindCamera();
},
// 切换摄像头
switchCamera() {
this.$refs.CustomPreview.switchCamera();
},
/**
* 拍照
*
* @param relationPath 文件相对路径，自定义，eg: /com.abc.hello/media/image
* @param filePrefix 文件名称前缀，自定义，eg: ori_图片_
* @param fileSuffix 文件名称后缀，自定义，eg: .jpg
*/
takePhoto() {
var relationPath = "/_A/B";
var filePrefix = "img_";
var fileSuffix = ".jpg";
this.$refs.CustomPreview.takePhoto(relationPath, filePrefix, fileSuffix);
},
/**
* 开始录像
*
* @param relationPath 文件相对路径，自定义，eg: /com.abc.hello/media/video
* @param filePrefix 文件名称前缀，自定义，eg: ori_视频_
* @param fileSuffix 文件名称后缀，自定义，eg: .mp4
*/
startVideo() {
var relationPath = "/_A/B";
var filePrefix = "video_";
var fileSuffix = ".mp4";
this.$refs.CustomPreview.startVideo(relationPath, filePrefix, fileSuffix);
},
// 暂停录像
pauseVideo() {
this.$refs.CustomPreview.pauseVideo();
},
// 继续录像
resumeVideo() {
this.$refs.CustomPreview.resumeVideo();
},
//停止录像
stopVideo() {
this.$refs.CustomPreview.stopVideo();
},
// 打开或关闭手电筒
switchTorch() {
this.$refs.CustomPreview.switchTorch();
},
// 打开或关闭闪光灯
switchFlashMode() {
this.$refs.CustomPreview.switchFlashMode();
},
// 返回是否有后置摄像头
hasBackCamera() {
this.$refs.CustomPreview.hasBackCamera();
},
// 返回是否有前置摄像头
hasFrontCamera() {
this.$refs.CustomPreview.hasFrontCamera();
},
// TODO 注意：剪切预览图片为初始图片，如果发生了旋转/镜像后图片会被替换为新的图片，结果会以最新的图片为剪切底图，以下功能请按照顺序调用
// 对图片旋转指定角度
imageRotate(filePath, degree) {
this.$refs.CustomPreview.imageRotate(filePath, degree);
},
// 图片水平或垂直镜像
imageMirror(filePath, horizontal, vertical) {
this.$refs.CustomPreview.imageMirror(filePath, horizontal, vertical);
},
// 确定剪切
confirmCrop() {
this.$refs.CustomCrop.confirmCrop();
},
// 取消剪切
cancelCrop() {
this.$refs.CustomCrop.cancelCrop();
},
}
}
</script>
<style>
</style>更新内容
1.0.2版本更新内容
1.录制视频切出去时关闭录制，功能参照系统相机录像功能
2.切出去：退出页面、切回桌面
权限
相机权限， android.permission.CAMERA
读写文件权限，
android.permission.WRITE_EXTERNAL_STORAGE；
android.permission.READ_EXTERNAL_STORAGE
录音权限，android.permission.RECORD_AUDIO
下载 58
赞赏 0
下载 8391
赞赏 1
赞赏
京公网安备：11010802035340号