138 lines
4.3 KiB
Markdown
138 lines
4.3 KiB
Markdown
## 插件简绍
|
||
### 实现原理
|
||
|
||
> 通过 navigator.mediaDevices.getUserMedia(需要https环境) 这个api调用摄像头，获取到到视频流数据。把视频流数据给到一个 video 标签就可以把视频展示在页面上了。在 video 标签的上一层创建一个 canvas 标签，用于展示水印。在创建一个隐藏的 canvas 标签，当用户点击快门的时候截取当前视频流的一帧交给隐藏的 canvas 画出来，之后再把需要添加的水印画到这个隐藏的 canvas 上，最后保存为图片。
|
||
|
||
|
||
### 使用环境
|
||
需要https环境才能使用，本地测试可以在 manifest.json 中点击源码展示，找到h5 ，添加："devServer" : { "https" : true}
|
||
|
||
**请勿使用 UC浏览器 与 夸克等阿里旗下的浏览器，发现他们使用的内核都较低，无法正常获取视频流，并且都有对接视频流截取的插件，导致无法正常获取摄像头的数据。在微信中可以正常使用，推荐在微信内打开演示案例 **
|
||
|
||
需要https环境才能使用！！！
|
||
|
||
需要https环境才能使用！！！
|
||
|
||
需要https环境才能使用！！！
|
||
|
||
在安卓系统上可以打开闪光灯
|
||
|
||
### 插件使用
|
||
**插件已支持 uni_modules 支持组件easycom，以下代码演示的是普通使用**
|
||
|
||
``` html
|
||
<!-- HTML -->
|
||
<view>
|
||
<view class="imgBox" v-if='img'>
|
||
<image :src="img" class="img" mode="widthFix"></image>
|
||
</view>
|
||
<mumu-camera @success='handlerSuccess' :watermark='watermark' v-else></mumu-camera>
|
||
</view>
|
||
```
|
||
|
||
``` javascript
|
||
// js
|
||
components: { MumuCamera },
|
||
data() {
|
||
return {
|
||
img: '',
|
||
watermark: [
|
||
{
|
||
type: 'text',
|
||
x: 20,
|
||
y: 40,
|
||
font_color: "#fff",
|
||
font_size: 20,
|
||
text: '程序员毕业会'
|
||
},
|
||
{
|
||
type: 'text',
|
||
x: 15,
|
||
y: 100,
|
||
font_color: "#fff",
|
||
font_size: 50,
|
||
text: '你好呀'
|
||
},
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
handlerSuccess(img) {
|
||
this.img = img
|
||
}
|
||
}
|
||
}
|
||
```
|
||
### 相关API
|
||
|
||
##### 可传属性（Props）
|
||
|
||
| 参数 | 说明 | 类型 | 默认值 |
|
||
| --------- | ------------------------------------------------- | ------ | ----------- |
|
||
| exact | 选调用摄像头。environment 后摄像头 user 前摄像头 | String | environment |
|
||
| watermark | 添加水印，支持本地图片与文件。详情见下 | Array | [] |
|
||
|
||
- watermark 添加水印：
|
||
|
||
watermark 需要的是一个数组，数组中是对象。
|
||
|
||
**对象属性**
|
||
|
||
| 参数 | 类型 | 说明 |
|
||
| ---------- | ------------- | ---------------------------------- |
|
||
| type | img 或者 text | img 标识图片水印，text标识文字水印 |
|
||
| x | number | 水印位置 X 轴 |
|
||
| y | number | 水印位置 Y 轴 |
|
||
| w | number | 图片的宽度，只对图片水印有效 |
|
||
| h | number | 图片的高度，只对图片水印有效 |
|
||
| url | string | 本地图片地址，只对图片水印有效 |
|
||
| font_color | 十六进制色码 | 文字颜色，只对文字水印有效 |
|
||
| font_size | number | 文字大小 |
|
||
| text | string | 添加的文字水印 |
|
||
|
||
```javascript
|
||
// 演示
|
||
watermark: [{
|
||
type: 'img',
|
||
x: 20,
|
||
y: 120,
|
||
w: 70,
|
||
h: 70,
|
||
url: '/static/logo.jpg'
|
||
},
|
||
{
|
||
type: 'text',
|
||
x: 20,
|
||
y: 40,
|
||
font_color: "#fff",
|
||
font_size: 20,
|
||
text: '程序员毕业会'
|
||
},
|
||
{
|
||
type: 'text',
|
||
x: 15,
|
||
y: 100,
|
||
font_color: "#fff",
|
||
font_size: 50,
|
||
text: '你好呀'
|
||
},
|
||
]
|
||
```
|
||
|
||
|
||
|
||
##### 事件（Events）
|
||
|
||
| 事件名 | 说明 | 回调参数 |
|
||
| ------- | ---------------------- | ---------------------------- |
|
||
| success | 按下快门生成的图片数据 | 图片数据，返回的是base64数据 |
|
||
|
||
### 案例演示
|
||
|
||
|
||
## 支持作者
|
||
|