x-camrea-u

特性说明

可以预览拍照,并嵌入到你的页面中直接使用.使用ref函数控制相机.

兼容性

IOS	Andriod	WEB	小程序
支持	支持	支持	支持

开发文档

使用注意 打开,关闭,录制中等相关相机状态,请自行通过事件管理. 录制视频或者拍照时,如果出现错误,接受到的数据为空字符串来判断是否有误.(web正确为blob视频文件或者base64图片数据)

图片格式:jpg,png 视频格式:mp4,webm

ref方法

方法	参数	说明
open	-	打开相机,微信是自动打开为了兼容可以执行,但无效果
close	-	关闭相机,微信是关闭页面自动关闭相机,其它平台一定要执行
take	-	抓拍
start	-	打开相机开始录制视频
pause	-	暂停录制视频(ios,web,h5不支持,执行后无效果)
stop	-	停止录制视频(不是关闭相机)

事件

事件名称	参数	说明
@take	`Map<string,string>`	get('path')为图片路径,web为base64数据
@recoder	`Map<string,string>`	get('path')为视频路径,web为Blob文件对象

页面放置组件：

/**
 * 标签上有两个属性:
 * orientation:front,back(默认),选择前置还是后置摄像头,web不支持
 * flash:true,false,拍摄时,是否打开闪光灯,web不支持.注意使用闪光灯时,请不要使用前置摄像头.
 */
<x-camrea-u @take="getPhoto" ref="camrea" style="width:100%;height:320px"></x-camrea-u>
// 前置摄像头
<x-camrea-u orientation='front' @take="getPhoto" ref="camrea" style="width:100%;height:320px"></x-camrea-u>
// 打开闪光灯
<x-camrea-u :flash="true" @take="getPhoto" ref="camrea" style="width:100%;height:320px"></x-camrea-u>

选项式调用：

export default {
	data() {
		return {
			urlSrc: ''
		}
	},
	methods: {
		open() {
			let el = (this.$refs['camrea'] as XCamreaUElement)
			el.open()
		},
		close() {
			let el = (this.$refs['camrea'] as XCamreaUElement)
			el.close()
		},
		take() {
			let el = (this.$refs['camrea'] as XCamreaUElement)
			el.take()
		},
		recoder(result:Map<string,string>) {
			let src = result['path'] as string;
			if (src != '') {
				this.videoUrlSrc = src! as string;
			}
		},
		getPhoto(result:Map<string,string>) {
			let src = src = result['path'] as string;
			if (src != '') {
				this.urlSrc = src! as string;
			}
		}
	}
}

组合式调用：

const camrea = ref<XCamreaUElement|null>(null)
const open = ()=>{
	el.value?.open?.()
}
const close = ()=>{
	el.value?.open?.()
}
const take = ()=>{
	el.value?.open?.()
}

// 拍照的事件内获取图片路径.
const getPhoto = (result:Map<string,string>)=>{
	let src = src = result['path'] as string;
	if (src != '') {
		this.urlSrc = src! as string;
	}
}

参数配置：

ios组件上有属性 savePhoto:boolean 是否保存到相册(仅ios支持)