html相机加遮罩,调用摄像头并在上面加一层遮罩怎么实现啊

提供一个思路：通过livepush的预览和截图功能来实现。

想要定制更多样式的话，可以试试看 nvue的 live-pusher 组件。

Start

Snapshot

export default {

data() {

return {

pusher : null,

photo: '/static/logo.png'

};

},

methods: {

startPreview() {

const currentWebview = this.$mp.page.$getAppWebview();

var pusher = plus.video.createLivePusher("", {

//url: 'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb', //并不需要真的进行推送，所以不设置

top: '300px',

left: '25%',

width: '50%',

height: '300px',

position: 'static'

});

//默认为前置摄像头，切换到后置。注：官方API未给出直接设置前置还是后置摄像头的方法，所以也存在可能把后置切换到前置的可能，这个比较悲剧。。因此需要给用户一个切换摄像头的按钮。

pusher.switchCamera();

currentWebview.append(pusher);

this.pusher = pusher

},

snapshot() {

this.pusher.snapshot((e)=>{

//plus.nativeUI.alert("snapshot path: "+e.tempImagePath);

//需要把绝对路径转换成本地路径

this.photo = plus.io.convertAbsoluteFileSystem(e.tempImagePath)

}, (e)=> {

plus.nativeUI.alert("snapshot error: "+JSON.stringify(e));

});

}

}

}