更新记录

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

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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>

隐私、权限声明

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

ios:摄像头(NSCameraUsageDescription)、麦克风(NSMicrophoneUsageDescription) andorid:<uses-permission android:name="android.hardware.camera" />、<uses-permission android:name="android.hardware.camera.autofocus" />、<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />、<uses-permission android:name="android.permission.RECORD_AUDIO" />、<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />

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

插件不采集任何数据

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

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