更新记录
1.0.0(2023-08-28)
新品上线
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 12.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:9 - 16 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
xx-camera 使用方式
注:本插件默认解决了摄像头预览拉伸,变形等问题
qq 543169072
原生组件需要在nvue文件中使用。
<xx-camera ref="camera" style="width:200;height:300"></xx-camera>
支持如下方法
支持的函数如下 | 含义 |
---|---|
getCameras | 获取设备所有摄像头列表 |
getSupportedPreviewSizesByCameraId | 获取某一个摄像头的分辨率(需在打开摄像头前调用)(仅android) |
getSupportedPictureSizesByCameraId | 获取某一个摄像头的拍照图支持的大小(需在打开摄像头前调用) |
openCamera | 初始化摄像头,默认支持点击聚焦,手势变焦缩放 |
takePicture | 拍照 |
startRecord | 开始录制 |
stopRecord | 结束录制 |
flashOpen | 开灯 |
flashClose | 关灯 |
release | 释放摄像头资源 |
switchCamera | 切换摄像头 |
getMaxZoomFactor | 获取最大的缩放值 |
setZoomFactor | 设置当前缩放 |
该插件支持更多配置型参数,因为大部分开发者不需要设置,所以文档没有体现(如视频格式,视频质量,编码方式等)。如果需要请联系我qq 406776266
1、getCameras 获取所有摄像头
this.$refs.camera.getCameras((ret)=>{
uni.showModal({
content: JSON.stringify(ret)
})
});
返回值:
参数 | 说明 |
---|---|
success | 是否成功 true or false |
cameras | 摄像头列表 |
cameras--- id | 摄像头id |
cameras--facing | 摄像头位置 font or back |
cameras-- orientation | 默认的摄像头方向 |
2、getSupportedPreviewSizesByCameraId 获取某一个摄像头的分辨率(需在打开摄像头前调用)
输入
参数 | 说明 |
---|---|
cameraId | 摄像头ID,可使用getCameras返回的id,一般0为后摄像头,1为前摄像头 |
返回值
参数 | 说明 |
---|---|
sizes | 分辨率列表 |
3、openCamera 默认支持点击聚焦,手势缩放 ,其它支持的参数,和返回值如下
参数 | 默认值 | 说明 |
---|---|---|
cameraId | 1 | 一般0为后摄像头,1为前摄像头 |
scene | 2。(仅ios 有效,Android 不分场景,拍照,录制视频,静默获取图片都可以使用) | 场景(打开摄像头的目的是什么)1 拍照 ; 2 拍照和录制 ; 3 拍照和静默获取图片(静默获取是不通过拍照随时可以获取当前的摄像头画面,可用来做ocr识别,或人脸检测等) |
videoGravity | AVLayerVideoGravityResizeAspectFill | 仅ios生效,填充方式。AVLayerVideoGravityResizeAspectFill 保持纵横比;填充层边界 AVLayerVideoGravityResize 拉伸填充图层 AVLayerVideoGravityResizeAspect保持纵横比;适合层范围内 |
orientation | 不传递这个参数 会根据方向自动变化 | 摄像头方向(固定的) ,建议非固定不传递这个参数 |
previewWidth | 默认会适配最适应的分辨率 | 预览的分辨率 宽 (仅android) |
previewHeight | 默认会适配最适应的分辨率 | 预览的分辨率 高 (仅android) |
pictureWidth | 默认会适配最适应的拍照大小 | 拍照大小 宽 ,也可以在拍照时候临时设置 (仅android) |
pictureHeight | 默认会适配最适应的拍照大小 | 拍照大小 高 也可以在拍照时候临时设置 (仅android) |
返回值
参数 | 说明 |
---|---|
success | 是否成功 true or false |
4、takePicture支持参数如下,和返回值如下
参数 | 默认值 | 说明 |
---|---|---|
quailty | 100 | 质量 |
base64 | false | 是否返回base64格式 |
flashMode | off | 闪光灯模式,auto on off |
pictureWidth | 默认会适配最适应的拍照大小 | 拍照大小 宽 (仅android) |
pictureHeight | 默认会适配最适应的拍照大小 | 拍照大小 高 (仅android) |
返回值
参数 | 说明 |
---|---|
success | 是否成功 true or false |
img | 返回地址,或者base64字符串,如果是路径,通过uni.uploadFile 上传时候需要加上 file:// 前缀 |
5、startRecord支持参数如下,和返回值如下
该插件支持更多配置型参数,因为大部分开发者不需要设置,所以文档没有体现(如视频格式,视频质量,编码方式,视频的帧率 等)。如果需要请联系我qq 543169072
参数 | 默认值 | 说明 |
---|---|---|
videoEncodingBitRate | 1X1920X1080 | 可控制质量 |
videoWidth | 1280 | 视频宽,一般 1280 或 640,也可以自己设置 |
videoHeight | 720 | 视频高,一般 720 或 480,也可以自己设置 |
orientation | 会自动适应 | 旋转角度 |
以下为专业参数,可以不传递(仅支持android) | 仅支持android | |
videoFrameRate | 视频的帧率 | 可不以传递 |
audioSource | 声音源 | 默认为mic(1) |
outputFormat | 输出格式 | 默认为2。1:THREE_GPP,2:MPEG_4,3:RAW_AMR:4:AMR_WB 6:AAC_ADTS。8:MPEG_2_TS。9:WEBM |
audioEncoder | 默认为3;1:AMR_NB,2:AMR_WB,3:AAC:4,HE_AAC,5:AAC_ELD,6:VORBIS | |
videoEncoder | 默认为2,1:H263, 2:H264,3:MPEG_4_SP,4:VP8,5:HEVC |
返回值
参数 | 说明 |
---|---|
success | 是否成功 true or false |
6、stopRecord返回值如下
返回值
参数 | 说明 |
---|---|
success | 是否成功 true or false |
path | 地址 ,通过uni.uploadFile 上传时候需要加上 file:// 前缀 |
使用uni.uploadFile上传时候请在path前加上 file://
7、release 无需传递参数,也没有返回 8、flashOpen 无需传递参数,也没有返回 9、flashClose 无需传递参数,也没有返回 10、switchCamera 切换摄像头
参数 | 说明 | |
---|---|---|
cameraId | 1 | 一般0为后摄像头,1为前摄像头 |
12、getMaxZoomFactor 无需传递参数,有回调
返回值
参数 | 说明 |
---|---|
value | 最大值 |
13、setZoomFactor 有参数 无回调
参数 | 说明 | |
---|---|---|
value | 1 | 缩放大小 |
案例 一定要放在 nvue 页面 (vue无效)
<template>
<div>
<text>本插件默认解决了,摄像头预览拉伸,变形等问题</text>
<xx-camera ref="camera" :style="{width:width,height:height}"></xx-camera>
<div>
<view><text style="color: #DD524D;">提示,本页面为基础功能展示,详细的参数和函数请到插件市场查看。</text></view>
<view><text style="color: #007AFF;">{{tip}}</text></view>
<view style="margin-top: 20rpx;" ><text style="color: #09BB07;">---打开摄像头前可以使用的方法-----</text></view>
<button @click="getCameras()">获取摄像头列表</button>
<button @click="getSupportedPreviewSizesByCameraId(0)">获取支持的预览尺寸(后摄像头)</button>
<button @click="getSupportedPreviewSizesByCameraId(1)">获取支持的预览尺寸(前摄像头)</button>
<button @click="getSupportedPictureSizesByCameraId(0)">获取支持的拍照图片尺寸(后摄像头)(仅安卓)</button>
<button @click="getSupportedPictureSizesByCameraId(1)">获取支持的拍照图片尺寸(前摄像头)(仅安卓)</button>
<view style="margin-top: 30rpx;"><text style="color: #09BB07;">----拍照和录制视频常用方法-----</text></view>
<view style="margin-top: 20rpx;"><text style="color: #09BB07;"> ios需要在打开摄像头时候,传入场景(场景(打开摄像头的目的是什么)1 拍照 ; 2 拍照和录制 ; 3 拍照和静默获取图片(静默获取是不通过拍照随时可以获取当前的摄像头画面,可用来做ocr识别,或人脸检测等))</text></view>
<button @click="openCamera(0)">打开摄像头(后摄像头)</button>
<button @click="openCamera(1)">打开摄像头(前摄像头)</button>
<button @click="switchCamera()">切换摄像头</button>
<button @click="takePicture()">拍照</button>
<button @click="start()">录制开始</button>
<button @click="stop()">录制结束</button>
<button @click="release()">释放摄像头资源</button>
<view style="margin-top: 30rpx;"><text style="color: #09BB07;">----灯光方法-----</text></view>
<button @click="flashOpen()">开灯</button>
<button @click="flashClose()">关灯</button>
<view style="margin-top: 30rpx;"><text style="color: #09BB07;">----缩放常用方法-----</text></view>
<button @click="getMaxZoomFactor()">获取最大缩放值</button>
<button @click="setZoomFactor()">设置缩放</button>
<view style="margin-top: 30rpx;"><text style="color: #09BB07;">----高级方法,实现随时获取数据,可做人脸识别,物品识别,身份证识别等-----</text></view>
<button @click="getCurrentImage()">静默获取当前图片(无需拍照)</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
height: "300rpx",
width: "750rpx",
cid: 0,
tip:`如果组件没有找到,请按照以下步骤
1 。在插件市场,找出此插件,然后点击购买(或试用)
2 。记得要在manifest.json 中云端插件中 选择摄像头插件
3 。编译自定义基座
4 。在运行时候,切换刚才编译的自定义基座
5 。在手机上运行
`
}
},
onLoad() {
this.$nextTick( ()=>{
//这里可以做打开摄像头等功能
})
},
onShow() {
},
methods: {
getCameras() {
this.$refs.camera.getCameras(function(data) {
uni.showModal({
content: JSON.stringify(data)
})
});
},
getSupportedPreviewSizesByCameraId(id) {
this.$refs.camera.getSupportedPreviewSizesByCameraId({
cameraId: id
}, function(data) {
uni.showModal({
content: JSON.stringify(data)
})
});
},
getSupportedPictureSizesByCameraId(id) {
this.$refs.camera.getSupportedPictureSizesByCameraId({
cameraId: id
}, function(data) {
uni.showModal({
content: JSON.stringify(data)
})
});
},
takePicture(e) {
this.$refs.camera.takePicture({
base64: false,
quailty: 100,
flashMode: "on"
}, function(data) {
console.log(data)
uni.previewImage({
urls: ["file://" + data.img],
current: 0
});
});
},
openCamera(id) {
this.$refs.camera.openCamera({
cameraId: id,
//previewWidth 摄像头预览的分辨率,可通过getSupportedPreviewSizesByCameraId获取到
//previewHeight
//scene :"2",//仅ios,Android不需要。场景(打开摄像头的目的是什么)1 拍照 ; 2 拍照和录制(默认值) ; 3 拍照和静默获取图片(静默获取是不通过拍照随时可以获取当前的摄像头画面,可用来做ocr识别,或人脸检测等)
}, function(data) {
uni.showModal({
content: JSON.stringify(data)
})
});
},
switchCamera() {
this.$refs.camera.switchCamera({
cameraId: 1 - this.cid
}, function(data) {
uni.showModal({
content: JSON.stringify(data)
})
});
},
start() {
this.$refs.camera.startRecord({
videoEncodingBitRate: 3 * 1920 * 1080,
videoWidth: 1280,
videoHeight: 720
}, (ret) => {
uni.showModal({
content: JSON.stringify(ret)
})
});
},
stop() {
this.$refs.camera.stopRecord(function(data) {
//可以通过 uni.compressVideo 压缩视频 记得前缀 file://
uni.showModal({
content: JSON.stringify(data)
})
uni.saveVideoToPhotosAlbum({
filePath: "file://" + data.path,
success: function() {
console.log('save success');
}
});
});
},
release() {
this.$refs.camera.release();
},
flashOpen() {
this.$refs.camera.flashOpen();
},
flashClose() {
this.$refs.camera.flashClose();
},
getMaxZoomFactor() {
this.$refs.camera.getMaxZoomFactor((ret) => {
uni.showModal({
content: JSON.stringify(ret)
})
});
},
setZoomFactor() {
this.$refs.camera.setZoomFactor({
value: 2
});
},
getCurrentImage() {
this.$refs.camera.getCurrentImage({
base64: false,
quailty: 100,
}, function(data) {
if (data.success)
uni.previewImage({
urls: ["file://" + data.img],
current: 0
});
else{
uni.showModal({
content:JSON.stringify(data)
})
}
});
},
setZoomFactor() {
this.$refs.camera.setZoomFactor({
value: 2
});
}
}
}
</script>