更新记录

1.0.0（2025-05-27）

新增功能

• 新增方法：close、 open、 takePhoto、 takePhotoSnapshot、 takeVideo、takeVideoSnapshot、 stopVideo、 changeZoom、 changeFacing、changeFlash、changeAudio
• 新增事件：onPictureTaken、 onVideoTakenStart、 onVideoTakenEnd、 onFocusStart、 onFocusEnd
• android端的所有功能已完成开发、测试
• harmony端计划开发中
• 初始版

问题修复

• 无

功能优化

• 无

平台兼容性

uni-app

uni-app x

原生自定义相机拍照、视频录制 （ima-camera-view）

原生自定义相机拍照、视频录制 （ima-camera-view）是基于原生相机开发的UTS插件，支持相机拍照、视频录制 、可实现点击聚焦、手势缩放、 自定义布局、自定义蒙版（用于人脸拍照，身份证拍照等）。

⚠️注意️

• android 端已全部完成代码的开发与测试（已完成）
• harmony 端已完成部分代码的开发与实现，待测试无问题后，再进行发布，敬请关注（计划开发中...）
• ios 端由于苹果Developer年费续费到期、开发｜发布证书等一系列导致无法进行调试等，所以暂无开发计划（已写有部分代码，需要的话可单独联系「不保证运行，本插件中不存在该代码」） （暂无计划）
• 小程序、H5、快应用暂无开发计划（暂无计划）

需要权限

• 摄像头、音频、文件读取、文件写入

"android.permission.CAMERA",
"android.permission.RECORD_AUDIO",
"android.permission.READ_EXTERNAL_STORAGE"
"android.permission.WRITE_EXTERNAL_STORAGE"

• 即：在manifest.json中的distribute.android.permissions加入

// 拍摄照片和视频时需要
<uses-permission android:name="android.permission.CAMERA" /> 
// 拍摄视频时需要Audio.ON（默认）
<uses-permission android:name="android.permission.RECORD_AUDIO" /> 
// 读取拍照、录像文件文件时需要
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
// 报错拍照、录像文件文件时需要（默认保存到沙盒缓存）
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 

使用示例【此示例的代码只实现了相机拍照的逻辑，更多示例请导入项目】

• 新建一个camera.nvue的文件
• ⚠️注意️：只能在.nvue、.uvue的文件后缀下才生效，不支持.vue

<template>
    <view class="ima-camera" :style="{ width: windowWidth, height: windowHeight }">
        <ima-camera-view
            ref="cameraRef"
            class="camera-view"
            :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"
            flash="on"
            @onPictureTaken="onPictureTaken"
            onFocusStart="onFocusStart"
        />
        <view class="camera-menu">
            <!--返回键-->
            <cover-image @tap="back" class="camera-menu-button back" src="/static/camera/back.png" />
            <!--快门键-->
            <cover-image
                @tap="takePhoto"
                class="camera-menu-button shutter"
                src="/static/camera/shutter.png"
            />
            <!--反转键-->
            <cover-image @tap="flip" class="camera-menu-button flip" src="/static/camera/flip.png" />
        </view>
    </view>
</template>

<script>
let _this = null
export default {
    data() {
        return {
            windowWidth: '', //屏幕可用宽度
            windowHeight: '', //屏幕可用高度
            facing: 'back'
        }
    },
    onLoad() {
        _this = this
        this.initCamera()
    },
    methods: {
        //初始化相机
        initCamera() {
            console.log('初始化相机')
            uni.getSystemInfo({
                success: (res) => {
                    _this.windowWidth = res.windowWidth
                    _this.windowHeight = res.windowHeight
                }
            })
        },
        onFocusStart(e) {
            console.log('聚焦', e)
        },
        takePhoto() {
            console.log('拍照', this.facing)
            this.$refs.cameraRef.takePhoto()
        },
        //返回
        back() {
            console.log('返回上一页', this.facing)
            uni.navigateBack()
        },
        //反转
        flip() {
            console.log('镜头反转', this.facing)
            this.facing = this.facing === 'back' ? 'front' : 'back'
            this.$refs.cameraRef.changeFacing(this.facing)
        },
        onPictureTaken(e) {
            console.log('拍照结果', e.detail)
            _this.snapshotsrc = e.detail?.path || ''
            _this.getTakenRes()
            uni.navigateBack()
        },
        //设置
        getTakenRes() {
            console.log('返回结果给上一页')
            let pages = getCurrentPages()
            let prevPage = pages[pages.length - 2] //上一个页面
            //直接调用上一个页面的setImage()方法，把数据存到上一个页面中去
            prevPage.$vm.setImage({ path: _this.snapshotsrc })
        }
    }
}
</script>

<style lang="scss">
.ima-camera {
    justify-content: center;
    align-items: center;

    .camera-view {
        width: 100%;
        background: #111;
    }

    .camera-menu {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 750rpx;
        height: 180rpx;
        z-index: 98;
        align-items: center;
        justify-content: center;

        &-button {
            width: 80rpx;
            height: 80rpx;
            position: absolute;
            bottom: 50rpx;
            z-index: 99;
            align-items: center;
            justify-content: center;
        }

        .back {
            left: 30rpx;
        }

        .shutter {
            width: 130rpx;
            height: 130rpx;
            left: 310rpx;
            bottom: 25rpx;
        }

        .flip {
            right: 30rpx;
        }
    }
}
</style>

Api

方法

共同 方法

事件