更新记录

1.0.0（2026-06-24） 下载此版本

首版发布

TuiCamera 相机组件首个正式版本。

新增

• 前后摄像头切换（back / front）
• 闪光灯控制（auto / on / off / torch）
• 拍照功能，支持多级画质
• 视频录制，支持超时回调
• 变焦控制（getZoom / setZoom）
• 扫码识别模式
• 自拍镜像
• Android / iOS / Harmony / Web / 微信小程序全平台适配

平台兼容性

uni-app x(5.13)

其他

TuiCamera 相机组件

多平台相机拍照组件 <t-camera>。

功能

• 前后摄像头切换 — 支持 back / front
• 闪光灯控制 — auto / on / off / torch
• 拍照 — 支持多级画质（high / normal / low / original）
• 录像 — 支持录制、停止、超时回调
• 变焦 — 支持 getZoom / setZoom / 获取最大缩放
• 扫码识别 — 内置扫码能力
• 镜像模式 — 自拍镜像

支持平台

使用

<template>
    <t-camera ref="cameraRef"
              :device-position="devicePosition"
              :flash="flash"
              :mode="mode"
              :resolution="resolution"
              :photo-resolution="photoResolution"
              @ready="onCameraReady"
              @initdone="onCameraInitDone"
              @error="onCameraError"
              @stop="onCameraStop"
              @capture="onCameraCapture"
              @scancode="onCameraScanCode">
    </t-camera>
    <button @click="handleTakePhoto">拍照</button>
    <button @click="handleToggleRecord">{{ isRecording ? '停止录像' : '开始录像' }}</button>
    <button @click="handleSwitchCamera">切换镜头</button>
    <button @click="toggleFlash">切换闪光灯</button>
</template>

<script setup lang="uts">
import {
    TuiCameraCaptureDetail, TuiCameraComponentErrorDetail,
    TuiCameraDevicePosition, TuiCameraFlashMode,
    TuiCameraInitDoneDetail, TuiCameraMode,
    TuiCameraPhotoResolution, TuiCameraRecordResult,
    TuiCameraReadyDetail, TuiCameraScanCodeDetail,
    TuiCameraStopDetail, TuiCameraTakePhotoOptions,
    TuiCameraStartRecordOptions, TuiCameraStopRecordOptions
} from '@/uni_modules/tui-camera'

const cameraRef = ref<ComponentPublicInstance | null>(null)
const devicePosition = ref<TuiCameraDevicePosition>('back')
const flash = ref<TuiCameraFlashMode>('off')
const mode = ref<TuiCameraMode>('normal')
const resolution = ref<TuiCameraResolution>('medium')
const photoResolution = ref<TuiCameraPhotoResolution>('high')
const isRecording = ref(false)
const isCameraOpen = ref(false)
const currentZoom = ref(1.0)
const maxZoom = ref(1.0)

function onCameraReady(detail: TuiCameraReadyDetail | null) {
    isCameraOpen.value = true
}

function onCameraInitDone(detail: TuiCameraInitDoneDetail | null) {
    if (detail != null) maxZoom.value = detail.maxZoom
}

function onCameraError(detail: TuiCameraComponentErrorDetail | null) {
    isCameraOpen.value = false
}

function onCameraStop(detail: TuiCameraStopDetail | null) {
    isCameraOpen.value = false
    isRecording.value = false
}

function onCameraCapture(detail: TuiCameraCaptureDetail | null) {
    if (detail != null) console.log('拍照完成:', detail.path)
}

function onCameraScanCode(detail: TuiCameraScanCodeDetail | null) {
    if (detail != null) {
        console.log('扫码:', detail.type, detail.result)
    }
}

function handleTakePhoto() {
    const options: TuiCameraTakePhotoOptions = {
        quality: 'high',
        selfieMirror: false,
        success: (result) => {
            if (result.tempImagePath != null) {
                console.log('拍照成功:', result.tempImagePath)
            }
        },
        fail: (error) => { console.log('拍照失败:', error.errMsg) }
    }
    cameraRef.value?.$callMethod('takePhoto', options)
}

function handleToggleRecord() {
    if (!isRecording.value) {
        const options: TuiCameraStartRecordOptions = {
            selfieMirror: true,
            timeoutCallback: (result) => { isRecording.value = false },
            success: () => { isRecording.value = true },
            fail: (error) => { isRecording.value = false }
        }
        cameraRef.value?.$callMethod('startRecord', options)
    } else {
        const options: TuiCameraStopRecordOptions = {
            compressed: true,
            success: (result) => {
                isRecording.value = false
                console.log('录像完成:', result.tempVideoPath)
            }
        }
        cameraRef.value?.$callMethod('stopRecord', options)
    }
}

function handleSwitchCamera() {
    devicePosition.value = devicePosition.value == 'back' ? 'front' : 'back'
}

function toggleFlash() {
    const map: Record<string, string> = { off: 'torch', torch: 'auto', auto: 'on', on: 'off' }
    flash.value = map[flash.value] as TuiCameraFlashMode
}

function setZoom(value: number) {
    cameraRef.value?.$callMethod('setZoom', value)
    currentZoom.value = cameraRef.value?.$callMethod('getCurrentZoomValue') as number
}
</script>

Props

文档

完整文档：https://yundie.xyz/tuiplusvapor/index.html

许可证

MIT