更新记录

2.0.0（2026-06-06）

1、新增组件显示形状属性 2、新增关闭相机回调方法

1.0.0（2025-11-20）

发布初始版本1.0.0

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

该插件使用简单，编写，易于集成。

一、使用举例：

<template>
    <view class="content">
        <view>
            <text class="title">{{title}}</text>
        </view>
        <!-- 使用你的相机组件，标签名与uts文件中定义的name一致 -->
        <st-camera ref="camera" style="width: 300rpx; height: 300rpx;" displayShape="circle" @ready="onCameraReady"
            @captureResult="handleCaptureResult" @startResult="handleStartResult" @changeResult="handleChangeResult"
            @stopResult="handleStopResult" />

        <!-- 操作按钮 -->
        <view class="controls">
            <button @click="startCamera()">开启相机</button>
            <button @click="switchCamera()">切换内置前后摄像头</button>
            <button @click="takePicture()">拍照</button>
            <button @click="stopCamera()">关闭相机</button>
        </view>

        <!-- 简单的照片预览 -->
        <image v-if="photoPath" :src="photoPath" style="width: 300rpx; height: 300rpx;"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                photoPath: '',
                displayShape: 'circle'
            }
        },
        // --- 生命周期钩子应该与 methods 平级 ---
        onReady() {},
        methods: {
            onCameraReady() {
                uni.showToast({
                    title: '相机就绪，请点击开启',
                    icon: 'none'
                });
            },
            stopCamera() {
                const camera = this.$refs.camera;
                if (camera) {
                    uni.showLoading({
                        title: '关闭中...'
                    });
                    // @ts-ignore
                    camera.stopCamera();
                    uni.hideLoading();
                }
            },
            handleCaptureResult(result) {
                this.title = 'onHide'
                let detail = result.detail
                if (detail.errMsg === 'takePicture:ok') {
                    this.photoPath = detail.tempUriString;
                    uni.showModal({
                        title: '拍照成功',
                        showCancel: false
                    });
                } else {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                }
            },
            handleStartResult(result) {
                let detail = result.detail
                if (detail.errMsg !== 'startCamera:ok') {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: '相机已开启',
                        icon: 'none'
                    });
                }
            },
            handleStopResult() {
                let detail = result.detail
                if (detail.errMsg !== 'stopCamera:ok') {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                } else {
                    uni.showToast({
                        title: '相机已关闭',
                        icon: 'none'
                    });
                }
            },
            handleChangeResult(result) {
                let detail = result.detail
                if (detail.errMsg !== 'switchCamera:ok') {
                    uni.showToast({
                        title: detail.errMsg,
                        icon: 'none'
                    });
                }
            },
            async startCamera() {
                // #ifdef APP-PLUS
                const status = await new Promise((resolve) => {
                    plus.android.requestPermissions(['android.permission.CAMERA'], (result) => {
                        resolve(result.granted.length > 0);
                    });
                });
                // console.log("========status=======",status)
                if (!status) {
                    uni.showToast({
                        title: '相机权限被拒绝',
                        icon: 'none'
                    });
                    return;
                }
                // #endif

                const camera = this.$refs.camera;
                if (camera) {
                    uni.showLoading({
                        title: '开启中...'
                    });
                    // @ts-ignore
                    camera.startCamera();
                    uni.hideLoading();
                }
            },
            switchCamera() {
                const camera = this.$refs.camera;
                if (camera) {
                    // @ts-ignore
                    camera.switchCamera();
                }
            },
            takePicture() {
                const camera = this.$refs.camera;
                if (camera) {
                    console.log("JS: 发送拍照指令...");
                    // @ts-ignore
                    camera.capturePhoto();
                }
            },
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        /* #ifndef APP-PLUS-NVUE */
        margin-left: auto;
        margin-right: auto;
        /* #endif */
        margin-bottom: 50rpx;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

注意： 1、需要自定义基座运行。

​ 2、根据官方文档，需要在nvue/uvue页面进行使用。

二、方法和属性介绍：

@ready：相机准备好的回调

@captureResult：拍照结果回调

@startResult：相机启动结果回调

@changeResult：前后置切换相机回调

@stopResult：关闭相机回调

displayShape：显示形状圆形（circle）和方形（square），默认圆形