插件简绍
实现原理
通过 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 -->
<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>
// 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 添加的文字水印 // 演示 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数据 |
案例演示
支持作者
