1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,117 @@
+# 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文件对象	|
+
+
+页面放置组件：
+```vue
+/**
+ * 标签上有两个属性:
+ * 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>
+
+```
+选项式调用：
+```ts
+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;
+			}
+		}
+	}
+}
+
+```
+
+组合式调用：
+
+```ts
+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支持)