摄像头组件相机组件内嵌的区域相机组件自动聚焦聚焦缩放变焦闪光灯

更新记录

1.6.3（2023-09-04）

解决mac压缩格式导致的ios打包失败

1.6.2（2023-09-01）

ios 更新后无法打包

1.6.1（2023-08-30）

修改android生成图片的路径

平台兼容性

Android	Android CPU类型	iOS
适用版本区间：4.4 - 12.0	armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试	适用版本区间：9 - 15

原生插件通用使用流程：

购买插件，选择该插件绑定的项目。
在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原生插件配置”->”云端插件“列表中删除该插件重新选择

Epii-camera 使用方式

qq 543169072

着急看效果的可以

1、android测试apk，直接安装快速查看功能链接: https://pan.baidu.com/s/1XnTBVTmqI673VHYLquTxkg 提取码: 2rmu

2、也可以直接在插件市场右侧，选择使用hbuilderx 直接运行测试代码。

原生组件需要在nvue文件中使用。

<epii-camera ref="camera"   style="width:200;height:300"></epii-camera>

支持如下方法

支持的函数如下	含义
getCameras	获取设备所有摄像头列表 (仅android)
getSupportedPreviewSizesByCameraId	获取某一个摄像头的分辨率（需在打开摄像头前调用）(仅android)
getSupportedPictureSizesByCameraId	获取某一个摄像头的拍照图支持的大小（需在打开摄像头前调用）(仅android)
openCamera	初始化摄像头，默认支持点击聚焦，手势变焦缩放
takePicture	拍照
startRecord	开始录制
stopRecord	结束录制
flashOpen	开灯
flashClose	关灯
release	释放摄像头资源
switchCamera	切换摄像头
getSupportedPreviewSizes	获取当前打开的摄像头的分辨率
getSupportedPictureSizes	获取当前打开的摄像头拍照图支持的大小
getMaxZoomFactor	获取最大的缩放值
setZoomFactor	设置当前缩放

该插件支持更多配置型参数，因为大部分开发者不需要设置，所以文档没有体现（如视频格式，视频质量，编码方式等）。如果需要请联系我qq 543169072

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	1。(仅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为前摄像头

11、getSupportedPreviewSizes 无需传递参数，有回调

返回值

参数	说明
sizes	分辨率列表

12、getMaxZoomFactor 无需传递参数，有回调

返回值

参数	说明
value	最大值

13、setZoomFactor 有参数无回调

参数	说明
value	1	缩放大小

案例（可以直接在插件市场，右侧导入到hbuiderx）

<template>
    <div>

        <!-- 宽和高的设置如果和分辨率比率不一致，在android下会导致拉伸-->
        <epii-camera ref="camera" :style="{width:width,height:height}"></epii-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>
            <button @click="getSupportedPreviewSizes()">获取已经打开摄像头支持的分辨率</button>
            <button @click="getSupportedPictureSizes()">获取已经打开摄像头支持的分辨率</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>
    //插件市场有详细文档， 支持的参数都文档中。
    //插件市场地址 https://ext.dcloud.net.cn/plugin?id=3583
    export default {
        data() {
            return {
                height: "500rpx",
                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) {
                    // uni.showModal({
                    //  content: JSON.stringify(data)
                    // })
                    // //直接打开预览
                    uni.previewImage({
                        urls: ["file://" + data.img],
                        current: 0
                    });

                });
            },
            openCamera(id) {

                if (uni.getSystemInfoSync().platform === "ios") {
                    this.$refs.camera.openCamera({
                        cameraId: id,
                        scene :1,//仅ios，Android不需要。场景（打开摄像头的目的是什么）1 拍照  ； 2 拍照和录制 ； 3 拍照和静默获取图片（静默获取是不通过拍照随时可以获取当前的摄像头画面，可用来做ocr识别，或人脸检测等）
                    }, function(data) {
                        uni.showModal({
                            content: JSON.stringify(data)
                        })
                    });
                } else {
                    //android 系统需要考虑 组件的宽高 和摄像头的宽高比例，如果不一致会导致拉伸
                    this.openCamera_1(id);
                    //如果不考虑拉伸问题也可以直接打开摄像头
                    // this.$refs.camera.openCamera({
                    //  cameraId: id,
                    // }, function(data) {
                    //  uni.showModal({
                    //      content: JSON.stringify(data)
                    //  })
                    // });
                }
            },
            openCamera_1(id) {

            //安卓解决拉伸问题，一般有两种思路。
            //1. 组件宽高不变，找出最适合的分辨比率
            //2. 根据摄像头的分辨率，来重新修改组件的宽和高。
                this.cid = id;

                let type = 2;//1  组件宽高不变，找出最适合的分辨比率  2根据摄像头的分辨率，来重新修改组件的宽和高。

                uni.showModal({
                    content:"拉伸问题有三种解决方法，目前是第2中，你可以在代码中修改type的值"
                })

                this.$refs.camera.getSupportedPreviewSizesByCameraId({
                    cameraId: id
                }, (data) => {
                    console.log(data);
                    console.log(uni.getSystemInfoSync())
                    let bestHeight_index = 0;
                    //方法1 组件宽高不变，找出最适合的分辨比率，这样只能减少拉伸，不能解决
                    if(type==1){
                         let  r0 = (this.height*1.0)/this.width;
                         let diff=1000;
                         for (var i = 0; i < data.sizes.length; i++) {
                            console.log( data.sizes[i]);
                            //找出最合适的分辨率，宽高比例尽量接近组件的（摄像头宽高是反着呢）
                            let tmp =Math.abs( r0- (data.sizes[i].width*1.0) /data.sizes[bestHeight_index].width);
                            if ( tmp <diff) {
                                diff = tmp;
                                bestHeight_index = i;
                            }
                         }
                    //方法2 先获取摄像头 支持的分辨率，然后修改组件的大小（一般保持宽不变），这样肯定不拉伸   
                    }else if(type==2){

                        for (var i = 0; i < data.sizes.length; i++) {
                            console.log( data.sizes[i]);
                            //找出最大高度对应的分辨比率（宽高是反着呢）
                            if (data.sizes[i].width > data.sizes[bestHeight_index].width) {
                                bestHeight_index = i;
                            }
                        }

                        //this.width = data.sizes[max_index].height;
                        //计算出当前宽度下最适合的高度，然后修改组件的高
                        this.height = ((data.sizes[bestHeight_index].width / (data.sizes[bestHeight_index].height * 1.0)) * 750)  +"rpx";
                    // 3 用最大分辨比率，不考虑拉伸  
                    }else if(type==3){
                        bestHeight_index =0;//最大的一般是第一个，你也可以遍历后找出最大分辨比率

                    }

                    //延迟打开摄像头，组件大小修改需要时间    
                    setTimeout(() => {
                        this.$refs.camera.openCamera({
                            cameraId: id,
                            previewWidth: data.sizes[bestHeight_index].width,
                            previewHeight: data.sizes[bestHeight_index].height
                        }, function(data) {
                            uni.showModal({
                                content: JSON.stringify(data)
                            })
                        });
                    }, 500);

                });
                return;

            },
            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();
            },
            changeSize() {
                this.height = "1100rpx";

                // setTimeout(()=>{
                //   this.$refs.camera.changeFrame();
                // },1000);

            },
            getSupportedPreviewSizes() {
                this.$refs.camera.getSupportedPreviewSizes((ret) => {
                    uni.showModal({
                        content: JSON.stringify(ret)
                    })
                });
            },
            getSupportedPictureSizes() {
                this.$refs.camera.getSupportedPreviewSizes((ret) => {
                    uni.showModal({
                        content: JSON.stringify(ret)
                    })
                });
            },
            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
                            });

                    });

            },

            setZoomFactor() {
                this.$refs.camera.setZoomFactor({
                    value: 2
                });

            }

        }
    }
</script>