更新记录
3.7.0(2023-04-28)
本次主要更新: 1.ios 增加 设置fps(慢动作) 和 设置ISO(曝光) 方法
3.6.0(2023-04-04)
本次主要更新: 1.ios 修改 横竖屏时预览画面旋转逻辑
3.5.0(2023-02-21)
本次主要更新: 1.ios 修复录像10s之后,没有声音的情况
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:4.4 - 14.0 | armeabi-v7a:支持,arm64-v8a:支持,x86:支持 | 适用版本区间:11 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在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原生插件配置”->”云端插件“列表中删除该插件重新选择
KJ-Camera
自定义相机拍照录像,可设置分辨率、支持横竖屏、切换前后摄像头、闪光灯、手电筒(ios、android)
引入插件
<KJ-Camera ref='Camera' class="KJ-Camera" :style="{width:'100%',height:cameraHeight}"></KJ-Camera>
常见问题
1.原生插件小白试用教程
答:https://blog.csdn.net/dashenid/article/details/129725810?spm=1001.2014.3001.5501
2.预览画面整体拉长了?
答:动态修改组件宽高,预览分辨率宽:预览分辨率高 = 组件宽 : 组件高
相关代码
<template>
<view class="page" v-if="isShow">
<KJ-Camera ref='Camera' class="KJ-Camera" :style="{width:'100%',height:cameraHeight}">
</KJ-Camera>
<view class="btn-view">
<button @click="captureImage" class="btn" type="primary">
拍照
</button>
<button @click="startVideoCapture" class="btn" type="primary">
开始录像
</button>
<button @click="stopVideoCapture" class="btn" type="primary">
停止录像
</button>
<button @click="switchCamera" class="btn" type="primary">
前后摄像头切换
</button>
<button @click="setZoomFactor" class="btn" type="primary">
设置焦距
</button>
<button @click="setFlash" class="btn" type="primary">
设置闪光灯模式
</button>
<button @click="setTorch" class="btn" type="primary">
设置手电筒
</button>
<button @click="ios_getSessionPresets" class="btn" type="primary">
ios获取支持的分辨率
</button>
<button @click="ios_setSessionPreset" class="btn" type="primary">
ios设置分辨率
</button>
<button @click="android_getCameras" class="btn" type="primary">
andorid 获取摄像头
</button>
<button @click="android_getSupportedPictureSizes" class="btn" type="primary">
android获取照片支持分辨率列表
</button>
<button @click="android_getSupportedPreviewSizes" class="btn" type="primary">
android获取预览支持分辨率列表
</button>
<button @click="android_getSupportedVideoSizes" class="btn" type="primary">
android获取视频支持分辨率列表
</button>
<button @click="android_setCameraParams" class="btn" type="primary">
android设置相机参数
</button>
<button @click="setRotation" class="btn" type="primary">
android设置旋转角度
</button>
<button @click="initCamera" class="btn" type="primary">
初始化相机
</button>
<button @click="setFPS" class="btn" type="primary">
ios设置fps,慢动作视频
</button>
<button @click="setAutoFPS" class="btn" type="primary">
ios设置自动FPS
</button>
<image :src="src" style="width: 50px;height: 50px;"></image>
</view>
</view>
</template>
<script>
//const KJKey = uni.requireNativePlugin('KJ-Key'); 插件地址:https://ext.dcloud.net.cn/plugin?id=11862
var videoFilePath;
export default {
data() {
return {
cameraWidth: "100%",
cameraHeight: uni.getSystemInfoSync().screenHeight,
src: "",
isShow: false, //解决刚打开页面卡顿的情况
windowHeight: 0,
windowWidth: 0,
isVolume: false
}
},
onLoad() {
setTimeout(() => { //这里延迟,解决刚打开页面卡顿的情况
this.isShow = true;
//setTimeout(() => { //设置默认前置摄像头
//this.switchCamera();
//}, 100)
}, 300)
//this.onVolume();//ios音量键自动拍照或者录像
},
onReady() {
console.log("onReady")
//this.$refs.Camera.initCamera();
},
() {
console.log("")
//this.android_setCameraParams();
var _this = this;
uni.getSystemInfo({
success: (res) => {
_this.cameraHeight = res.windowHeight
setTimeout(function() { //横竖屏的时候,更改布局
try {
_this.$refs.Camera.initCamera();
} catch (e) {
//TODO handle the exception
}
}, 10);
}
});
},
methods: {
/**
* 初始化相机 默认加载插件的时候已初始化
* 在横竖屏切换的时候,需要重新初始化,要不然画面是颠倒的
* */
initCamera() {
this.$refs.Camera.initCamera();
},
/**
* 拍照
* */
captureImage() {
var _this = this;
var dic = {
"savePath": plus.io.convertLocalFileSystemURL("_doc/KJ-Camera"), //保存图片位置,一定要是_doc绝对路径
"format": "jpeg", //保存的图片格式 有效值:png、jpeg
"quality": 80, //andorid才可用 保存的图片质量,取值1-100
"timeInterval": 0 //如果遇到黑照片,可以延时拍照,经过测试,已经没有黑照片,可以不用延时
}
this.$refs.Camera.captureImage(dic, (res) => {
console.log("filePath: " + res)
//_this.src = "file://" + res.filePath;
uni.saveImageToPhotosAlbum({
filePath: plus.io.convertAbsoluteFileSystem(res.filePath),
success: function() {
console.log('save success');
},
fail: function(e) {
console.log(JSON.stringify(e));
}
});
}, (res) => {
_this.src = "data:image/png;base64," + res.base64;
console.log("base64: " + res)
});
},
/**
* 开始录像
* */
startVideoCapture() {
/**
* 注意:videoEncoder和audioEncoder最好设置为0,要不有些手机不支持,就录制不知了
* */
var _this = this;
var dic = {
"savePath": plus.io.convertLocalFileSystemURL("_doc/KJ-Camera"), //保存视频位置,一定要是_doc绝对路径
"isAddAudio": true, //是否添加音频,默认是true
"videoEncoder": 2, //andorid有效,视频编码,DEFAULT = 0;H263 = 1;H264 = 2;MPEG_4_SP = 3;VP8 = 4;HEVC = 5;
"audioEncoder": 3, //andorid有效,音频编码,DEFAULT = 0;AMR_NB = 1;AMR_WB = 2;AAC = 3;HE_AAC = 4;AAC_ELD = 5;VORBIS = 6;
"timeInterval": 0 //如果遇到首帧有暗视频,可以延时拍照,经过测试,已经没有首帧有暗视频,可以不用延时
}
this.$refs.Camera.startVideoCapture(dic, (res) => {
console.log("startVideoCapture: " + JSON.stringify(res))
if (res.status == "start") {
console.log("开始录像")
} else if (res.status == "end") {
console.log("结束录像")
videoFilePath = res.filePath;
uni.saveVideoToPhotosAlbum({
filePath: plus.io.convertAbsoluteFileSystem(videoFilePath),
success: function() {
console.log('save success');
}
});
}
});
},
/**
* 停止录像
* */
stopVideoCapture() {
this.$refs.Camera.stopVideoCapture();
},
android_getCameras() {
this.$refs.Camera.android_getCameras((res) => {
console.log("android_getCameras:" + JSON.stringify(res));
});
},
/**
* 前后摄像头切换
* */
switchCamera() {
this.$refs.Camera.switchCamera({
//cameraId: 1 //andoird有效,通过android_getCameras获取,不填写,默认前后摄像头切换
});
this.android_setCameraParams(); //因为andorid前后摄像头,设置相机参数不一样,需要重置
},
/**
* 设置焦距
* */
setZoomFactor() {
this.$refs.Camera.getZoomFactor((res_zoom) => {
console.log("获取当前焦距:" + res_zoom.value);
this.$refs.Camera.getMaxZoomFactor((res_max) => {
console.log("可设置的最大焦距:" + res_max.value);
this.$refs.Camera.getMinZoomFactor((res_min) => {
console.log("可设置的最小焦距:" + res_min.value);
this.$refs.Camera.setZoomFactor(res_max.value);
});
});
});
},
/**
* 设置闪光灯模式 默认是auto
* auto-自动
* on-开
* off-关
* */
setFlash() {
this.$refs.Camera.setFlash("off");
},
/**
* 设置手电筒 默认是auto
* auto-自动
* on-开
* off-关
* */
setTorch() {
this.$refs.Camera.setTorch("on");
},
/**
* ios获取支持的分辨率
* */
ios_getSessionPresets() {
this.$refs.Camera.ios_getSessionPresets((res) => {
console.log("ios_getSessionPresets:" + JSON.stringify(res));
});
},
/**
* ios设置分辨率 默认是high
* photo-适用于高分辨率照片质量输出
* high-适用于高质量视频和音频输出
* medium-适用于中等质量输出
* low-适用于低质量输出
* 其它。。。
* */
ios_setSessionPreset() {
this.$refs.Camera.ios_setSessionPreset("low"); //从ios_getSessionPresets方法获取
},
/**
* android获取照片支持分辨率列表
* 只用于设置照片分辨率 或 视频分辨率
* */
android_getSupportedPictureSizes() {
this.$refs.Camera.android_getSupportedPictureSizes((res) => {
console.log("android_getSupportedPictureSizes:" + JSON.stringify(res));
});
},
/**
* android获取预览支持分辨率列表
* 只用于设置预览分辨率
* */
android_getSupportedPreviewSizes() {
this.$refs.Camera.android_getSupportedPreviewSizes((res) => {
console.log("android_getSupportedPreviewSizes:" + JSON.stringify(res));
});
},
/**
* android获取视频支持分辨率列表
* 只用于视频分辨率
* */
android_getSupportedVideoSizes() {
this.$refs.Camera.android_getSupportedVideoSizes((res) => {
console.log("android_getSupportedVideoSizes:" + JSON.stringify(res));
});
},
/**
* android设置旋转角度
* 值参考:0,90,180,270 为null,则为自动设置
* */
setRotation() {
this.$refs.Camera.setRotation(null);
},
/**
* android设置相机参数
* 照片和预览分辨率等于0,默认使用从支持分辨率列表中选取合适的分辨率
* 其它等于0的话,不设置这个参数
* */
android_setCameraParams() {
const res = uni.getSystemInfoSync();
var screenBiLi = res.screenWidth / res.screenHeight
screenBiLi = Math.floor(screenBiLi * 10) / 10;
console.log("screenBiLi:" + screenBiLi)
//设置最大分辨率
this.$refs.Camera.android_getSupportedPictureSizes((PictureSizes) => {
this.$refs.Camera.android_getSupportedPreviewSizes((PreviewSizes) => {
this.$refs.Camera.android_getSupportedVideoSizes((VideoSizes) => {
var maxPictureSizesIndex = 0;
var maxPictureSizeWidthHeight = 0;
for (var i = 0; i < PictureSizes.length; i++) {
var item = PictureSizes[i];
var PictureSizeBiLi = item.height / item.width;
PictureSizeBiLi = Math.floor(PictureSizeBiLi * 10) / 10;
console.log("PictureSizeBiLi:" + PictureSizeBiLi)
if (PictureSizeBiLi == screenBiLi) {
if (maxPictureSizeWidthHeight < item.width * item.height) {
maxPictureSizeWidthHeight = item.width * item.height;
maxPictureSizesIndex = i;
}
}
}
var maxPreviewSizesIndex = 0;
var maxPreviewSizeWidthHeight = 0;
for (var i = 0; i < PreviewSizes.length; i++) {
var item = PreviewSizes[i];
var PreviewBiLi = item.height / item.width;
PreviewBiLi = Math.floor(PreviewBiLi * 10) / 10;
console.log("PreviewBiLi:" + PreviewBiLi)
if (PreviewBiLi == screenBiLi) {
if (maxPreviewSizeWidthHeight < item.width * item.height) {
maxPreviewSizeWidthHeight = item.width * item.height;
maxPreviewSizesIndex = i;
}
}
}
var maxVideoSizesIndex = 0;
var maxVideoSizesWidthHeight = 0;
for (var i = 0; i < VideoSizes.length; i++) {
var item = VideoSizes[i];
var PreviewBiLi = item.height / item.width;
PreviewBiLi = Math.floor(PreviewBiLi * 10) / 10;
console.log("PreviewBiLi:" + PreviewBiLi)
if (PreviewBiLi == screenBiLi) {
if (maxVideoSizesWidthHeight < item.width * item.height) {
maxVideoSizesWidthHeight = item.width * item.height;
maxVideoSizesIndex = i;
}
}
}
var dic = {
picSizeWidth: PictureSizes[maxPictureSizesIndex]
.width, //照片分辨率宽 从android_getSupportedPictureSizes方法获取
picSizeHeight: PictureSizes[maxPictureSizesIndex]
.height, //照片分辨率高 从android_getSupportedPictureSizes方法获取
jpegQuality: 100, //照片质量 取值1-100
preSizeWidth: PreviewSizes[maxPreviewSizesIndex]
.width, //预览分辨率宽 从android_getSupportedPreviewSizes方法获取
preSizeHeight: PreviewSizes[maxPreviewSizesIndex]
.height, //预览分辨率高 从android_getSupportedPreviewSizes方法获取
videoSizeWidth: VideoSizes[maxVideoSizesIndex]
.width, //视频分辨率宽 从android_getSupportedVideoSizes方法获取
videoSizeHeight: VideoSizes[maxVideoSizesIndex]
.height, //视频分辨率高 从android_getSupportedVideoSizes方法获取
videoEncodingBitRate: 5 * VideoSizes[maxVideoSizesIndex]
.width * VideoSizes[maxVideoSizesIndex]
.height, //视频编码比特率,如果设置了视频分辨率,这个一定要设置,否则视频不清晰
}
this.$refs.Camera.android_setCameraParams(dic);
console.log(JSON.stringify(dic));
});
});
});
},
setFPS() { //注意:慢动作视频,只能在相册里才能看出来效果,其它播放器看不出效果
this.$refs.Camera.setFPS({
"fps": 240 //正常是30
});
},
setAutoFPS() {
this.$refs.Camera.setAutoFPS();
},
}
}
</script>
<style lang="scss">
.KJ-Camera {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
}
.btn {
height: 35px;
width: 260px;
}
.btn-view {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>