更新记录

1.0.0（2026-09-27）

内嵌相机

平台兼容性

uni-app x(5.26)

yao-embed-camerax

uni-app x 原生内嵌相机 UTS 标准模式组件，在页面中内嵌一个相机预览区域，支持拍照、手电筒、前后摄像头切换。

使用示例

<template>
    <view class="page">
        <!-- 相机预览区 -->
        <view class="camera-box">
            <yao-embed-camerax ref="cameraRef" class="camera"
                @photo-taken="onPhotoTaken" @picture-size="onPictureSize"
                @camera-error="onCameraError" @camera-switched="onCameraSwitched"></yao-embed-camerax>
        </view>

        <!-- 操作按钮 -->
        <view class="btn-row">
            <button size="mini" @click="Flash">手电筒</button>
            <button size="mini" type="primary" @click="onShoot">拍照</button>
            <button size="mini" @click="onSwitchCamera">翻转</button>
        </view>

        <image v-if="photoPath != ''" class="preview" :src="photoPath" mode="aspectFit"></image>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'

    const cameraRef = ref<ComponentPublicInstance | null>(null)
    const photoPath = ref('')

    const onPhotoTaken = (e : UniNativeViewEvent) => {
        const path = e.detail['path'];
        if (path != null) {
            photoPath.value = path as string;
        }
    }

    const onPictureSize = (e : UniNativeViewEvent) => {
        // 照片尺寸（竖屏宽高），可据此适配预览框比例
        console.log("picture-size:", e.detail['width'], e.detail['height']);
    }

    const onCameraError = (e : UniNativeViewEvent) => {
        uni.showToast({ title: (e.detail['message'] ?? "相机错误") as string, icon: 'none' });
    }

    const onCameraSwitched = (e : UniNativeViewEvent) => {
        const facing = e.detail['facing'];
        if (facing != null) {
            uni.showToast({ title: (facing as string) == "front" ? "已切到前置" : "已切到后置", icon: 'none' });
        }
    }

    const onShoot = () => {
        cameraRef.value?.$callMethod('takePhoto')
    }

    const Flash = () => {
        cameraRef.value?.$callMethod('toggleFlashlight')
    }

    const onSwitchCamera = () => {
        cameraRef.value?.$callMethod('switchCamera')
    }
</script>

<style>
    .page { flex: 1; background-color: #000000; }
    .camera-box { flex: 1; }
    .camera { width: 100%; height: 100%; }
    .preview { width: 100%; height: 100%; }
</style>

API

方法（通过 ref + $callMethod 调用）

事件

平台配置

Android

• 需在项目 manifest.json 的 app-android > permissions 中声明 android.permission.CAMERA，运行时权限由组件内部自动申请

iOS

• 相机权限描述已通过插件内置的 utssdk/app-ios/Info.plist（NSCameraUsageDescription）配置，重新打自定义基座后生效，首次使用时系统自动弹出授权框