118 lines
2.9 KiB
Markdown
118 lines
2.9 KiB
Markdown
# 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支持)
|