更新记录

1.0（2025-09-08） 下载此版本

自定义安卓端相机插件，再Nvue中使用，可配合subNvue实现再vue中自定义区域显示相机区域。

平台兼容性

uni-app(4.07)

其他

LDEpiiCamera

2025.09.08 更新内容

Android DCamera 是个人自定义 安卓端 nVue、subNvue 页面 开发的原生相机插件。支持相机自动初始化、摄像头默认为前置摄像头(可联系自定义配置)、拍照、录像、缩放控制及横竖屏切换，适配 Android 6.0+ 系统，提供稳定的相机操作体验。

特色和优势

1、支持vue2、vue3

2、支持nvue中使用，也可通过app-vue配合subNvue使用，如需代码示例可联系坐着QQ

注意

manifest.json 中 App常用其他设置 minSdkVersion设置为23

只需要将插件加入到页面，然后云打包或打包自定义基座

（注意：原生插件必须要在nvue的页面，nvue和vue基本功能一直，只是存在一些差异，比如css的用法等）

调用开放的API接口（拍照、开始/停止录像、设置摄像区域缩放值），再插件可自定义宽高相机初始化默认显示适配的分辨率比例，可提供参数进行默认横竖屏预览相机区域。

、核心功能清单

✅ 相机自动初始化，无需手动调用 open/close 方法(如需要手动控制可联系作者调整)

✅ 拍照功能，自动保存至本地相册并返回路径

✅ 视频录制（支持开始 / 停止回调，返回视频路径）

✅ 0-1 范围缩放控制 this.$refs.cameraRef.setZoomValue(0-1);

✅ 横竖屏动态切换（竖屏 portrait / 横屏 landscape）

✅ 完善的状态监听（相机就绪、错误、拍照 / 录像完成）

✅ 优化资源管理，可解决多次进入vue页面(subNvue加载相机组件预览问题)

、基础使用示例

四、基础使用示例（nvue 页面、如需subNvue请自行查看相关文档或者联系作者QQ） 模板结构（Camera.nvue）

<template>
    <view class="main">
        <!-- 原生相机组件：固定宽高，横竖屏切换时交换宽高 -->
        <DCamera
            :style="{width:width + 'px',height:height + 'px'}" ref="cameraRef" class="camera-view" :zoom="currentZoom" screenOrientation="landscape"
            @cameraReady="handleCameraReady" @cameraError="handleCameraError" @pictureTaken="handlePictureTaken"
            @recordStart="handleRecordStart" @recordEnd="handleRecordEnd" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                height: 365,
                width: 490,
                currentZoom: 0, // 缩放值（0-1）
                isRecording: false, // 录像状态
                cameraReady: false ,// 相机就绪状态
            }
        },
        onLoad() {
            // 建立通信
            uni.$on('updateContainerRect', (data) => {
                const { type } = data;

                if(type === 'init') {
                    this.width = data.width;
                    this.height = data.height;
                    this.cameraReady = true;
                }else if(type === 'startRecord') {
                    this.handleToggleRecord()
                }else if(type === 'stopRecord') {
                    this.handleToggleRecord()
                }
            })
        },
        beforeDestroy() {
            uni.$off('updateContainerRect');

            // 组件销毁时停止录像
            if (this.isRecording && this.$refs.cameraRef) {
                this.$refs.cameraRef.stopRecording();
            }
            // this.$refs.cameraRef.closeCamera()

            this.cameraReady = false;
        },
        methods: {
            // 相机就绪回调
            handleCameraReady(e) {
                console.warn('相机已就绪', e)
                this.cameraReady = true;
            },
            // 相机错误回调
            handleCameraError(e) {
                uni.showToast({
                    title: `相机初始化异常：${e.detail.error}`,
                    icon: 'none',
                    duration: 3000
                });
            },
            // 拍照功能
            handleTakePhoto() {
                this.$refs.cameraRef.takePicture((res) => {
                    console.log(res)
                });
            },
            // 录像切换（开始/停止）
            handleToggleRecord() {
                if (this.isRecording) {
                    // 停止录像
                    this.$refs.cameraRef.stopRecording();
                } else {
                    // 开始录像
                    this.$refs.cameraRef.startRecording();
                }
            },
            // 缩放调节
            handleZoomChange(e) {
                this.$nextTick(() => {
                    this.zoom = e.detail.value;
                    this.currentZoom = Number(e.detail.value) / 10;
                    console.log(this.currentZoom)
                    this.$refs.cameraRef.setZoomValue(this.currentZoom);
                })
            },
            // 拍照完成事件（原生触发）
            handlePictureTaken(e) {
                console.log('拍照完成：', e.detail.path);
            },
            // 录像状态同步
            handleRecordStart(e) {
                this.isRecording = true;
            },
            handleRecordEnd(e) {
                this.isRecording = false;
                uni.$emit('getVideoFile', {
                    path: e.detail.path
                });
            }
        }
    }
</script>

<style>
    .main {
        position: absolute;
    }

    .flex_area {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        height: 30px;
        padding-bottom: 5px;
    }

    .camera-view {}
</style>

API 请求方法简要说明

API 参数简要说明

属性名 类型 说明 可选值 默认值 screenOrientation String 相机横竖屏配置 portrait（竖屏）、landscape（横屏） landscape zoom Number 缩放比例（0-1，0 = 无缩放） 0 ~ 1（步长建议 0.1） 0

1. takePicture(callback) 功能：拍摄照片并保存至设备存储。 参数： callback(res)：回调函数，返回拍照结果 字段 类型 说明 res.success Boolean 是否拍照成功 res.path String 照片绝对路径（成功时返回） res.error String 错误信息（失败时返回） 示例：

   this.$refs.cameraRef.takePicture((res) => {
   console.log(res)
   });

2. startRecording(callback) 功能：启动视频录制。 参数： callback(res)：回调函数，返回录像启动结果 字段 类型 说明 res.success Boolean 是否启动成功 res.path String 视频保存路径（成功时返回） res.error String 错误信息（失败时返回） 示例：

   this.$refs.cameraRef.startRecording((res) => {
   console.log(res)
   });

3. stopRecording(callback) 功能：停止视频录制并保存文件。 参数： callback(res)：回调函数，返回录像停止结果 字段 类型 说明 res.success Boolean 是否停止成功 res.path String 视频绝对路径（成功时返回） res.error String 错误信息（失败时返回） 示例：

   this.$refs.cameraRef.startRecording((res) => {
   console.log(res)
   });

4. setZoomValue(zoom, callback) 功能：手动调整相机缩放比例（优先级高于 zoom 属性）。 参数： zoom：Number，缩放比例（0-1，0 = 无缩放，1 = 最大缩放） callback(res)：回调函数，返回缩放结果 字段 类型 说明 res.success Boolean 是否缩放成功 res.currentZoom Number 当前实际缩放比例 res.error String 错误信息（失败时返回） 示例：

   // 设置缩放为50% currentZoom: 0-1
   this.currentZoom = 0.5;
   this.$refs.cameraRef.setZoomValue(this.currentZoom);

API 回调方法监听简要说明

反馈与维护

若遇到插件使用问题或功能需求，可通过以下方式反馈：

QQ: 569625174