Tui-Plus3.0.0

Appearance

Camera (相机) ​

本相机组件设计简洁，易于集成，满足多样化的拍摄需求,uts原生轻量级

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page main-class="p-30">
		<t-card title="Camrea 相机" sub-title="本相机组件设计简洁，易于集成，满足多样化的拍摄需求,uts原生轻量级，无需安装自定义基座就可运行">
		</t-card>
		<t-col main-class="tdr-tdb-mt-30">
			<t-camera @take="getPhoto" orientation="back" main-class="w-100% h-550 tdr tdb mtb-30" ref="camrea"
				@recoder="recoder"></t-camera>
		</t-col>
		<t-row main-class="fww mt-30">
			<t-button main-class="mrb-15" type="p" @click="front">前置摄像头</t-button>
			<t-button main-class="mrb-15" type="p" @click="back">后置摄像头</t-button>
			<t-button main-class="mrb-15" type="p" @click="open">打开相机</t-button>
			<t-button main-class="mrb-15" type="w" @click="close">关闭相机</t-button>
			<t-button main-class="mrb-15" type="s" @click="take">拍照</t-button>
			<!-- #ifndef WEB -->
			<t-button main-class="mrb-15" type="e" @click="flashOn">打开闪光灯</t-button>
			<t-button main-class="mrb-15" type="p" @click="flashOff">关灯闪光灯</t-button>
			<!-- #endif -->
		</t-row>
		<t-row main-class="fww mt-30">
			<t-button main-class="mrb-15" type="w" @click="start" :loading="loading">开始录像</t-button>
			<t-button main-class="mrb-15" type="e" @click="stops">停止录像</t-button>
		</t-row>
		<t-section main-class="mtb-30" title='拍照图版预览'></t-section>
		<t-col main-class="tdr" v-if="urlSrc!=''">
			<t-image main-class="w-100% h-550" :src="urlSrc"></t-image>
		</t-col>
		<t-section main-class="mtb-30" title='录制结束 视频预览'></t-section>
		<t-col main-class="tdr" v-if="recoderUrl!=''">
			<video :src="recoderUrl" style="width: 100%;height: 550rpx;"></video>
		</t-col>
		<view style="height: 50px;"></view>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				urlSrc: '',
				recoderUrl: '',
				loading: false
			}
		},
		methods: {
			recoder(request : string) {
				console.log(request)
				this.recoderUrl = request
			},
			front() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('front')
			},
			back() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('back')
			},
			start() {
				this.loading = true
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('start')
			},
			pause() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('pause')
			},
			continues() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('continues')
			},
			stops() {
				this.loading = false
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('stops')
			},
			open() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('open')
			},
			close() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('close')
			},
			flashOn() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('flashOn')
			},
			flashOff() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('flashOff')
			},
			take() {
				let el = this.$refs['camrea'] as ComponentPublicInstance
				el.$callMethod('take')
			},
			getPhoto(result : string) {
				this.urlSrc = result
			}
		}
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
flashStringauto是否开启闪光灯auto: 自动
on: 开启闪光灯
off: 关闭闪光灯
``

事件 ​

名称返回参数说明
take图片blob url截图时触发
recoder(e:string)录制结束时触发 返回录制视频 blob url

方法 ​

名称参数返回值说明
front--打开前置设置头
flashOn--打开闪光灯
open--打开相机
start--开始录制
flashOff--关闭闪光灯
close--开闭相机
stops--结束视频
take--拍照
getPhoto--截图
back--打开后置摄像头