t-camera

Camera 相机

组件介绍

t-camera 是一个跨平台相机封装组件，统一承接 Web 和原生端的相机实现，支持拍照、录像、切换前后摄像头和闪光灯控制。适合图片采集、扫码辅助、视频录制和本地媒体预览等场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础接入时，只需要监听拍照和录像完成事件即可：

<t-camera
  ref="camreaRef"
  class="w-100% h-550 r-20 bg-#fff mtb-30"
  @take="getPhoto"
  @recoder="recoder"
></t-camera>

<script setup lang="ts">
import { ref, ComponentPublicInstance } from 'vue'

const urlSrc = ref('')
const recoderUrl = ref('')
const camreaRef = ref<ComponentPublicInstance | null>(null)

const recoder = (request: string) => {
  recoderUrl.value = request
}

const getPhoto = (result: string) => {
  urlSrc.value = result
}
</script>

如果需要通过实例控制相机，可以继续调用组件暴露的方法：

<t-button type="primary" @click="front">前置摄像头</t-button>
<t-button type="primary" @click="back">后置摄像头</t-button>
<t-button type="primary" @click="open">打开相机</t-button>
<t-button type="warning" @click="close">关闭相机</t-button>
<t-button type="success" @click="take">拍照</t-button>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
flash	闪光灯模式，可选 auto、on、off	string	'auto'

Events

事件名	说明	回调参数
take	拍照完成时触发	string，图片地址
recoder	录像结束时触发	string，视频地址或 blob url

Slots

当前组件未声明插槽。

Methods

方法名	说明
recoder	手动转发录像完成事件给外部
flashOn	打开闪光灯
flashOff	关闭闪光灯
getPhoto	手动转发拍照结果给外部
front	切换到前置摄像头
back	切换到后置摄像头
open	打开相机
close	关闭相机
start	开始录像
stops	停止录像
take	执行拍照

<script setup lang="ts">
import { ref, ComponentPublicInstance } from 'vue'

const camreaRef = ref<ComponentPublicInstance | null>(null)

const callCameraMethod = (method: string) => {
  camreaRef.value?.$callMethod(method)
}

const front = () => callCameraMethod('front')
const back = () => callCameraMethod('back')
const open = () => callCameraMethod('open')
const close = () => callCameraMethod('close')
const take = () => callCameraMethod('take')
const flashOn = () => callCameraMethod('flashOn')
const flashOff = () => callCameraMethod('flashOff')
const start = () => callCameraMethod('start')
const stops = () => callCameraMethod('stops')
</script>