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数据 |
|
|||
|
|
|
|||
|
|
### 案例演示
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 支持作者
|
|||
|
|
|