一朵浪花
一朵浪花
  • 发布:2017-10-25 19:41
  • 更新:2021-02-05 17:20
  • 阅读:4716

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

分类:HTML5+

在做刷脸登陆,需要在制定的圆形div中显示实时拍到的画面,但问题是H5+plus直接调用了手机摄像画面,没有办法在上面绘画。也没找到获取摄像内容的方法。这块不知道怎么办,请小伙伴们帮忙想下思路。(功能类似支付宝的刷脸支付)

2017-10-25 19:41 负责人:无 分享
已邀请:
z***@gmail.com

z***@gmail.com - Hbuilder是个好东西

提供一个思路:通过livepush的预览和截图功能来实现。
想要定制更多样式的话,可以试试看 nvue的 live-pusher 组件。

<template>  
  <view>  
    <button @click="startPreview">Start</button>  
    <button @click="snapshot">Snapshot</button>  
    <image :src="photo" style="width:300rpx;" mode="widthFix"></image>  
  </view>  
</template>  

<script>  
  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));  
        });  
      }  
    }  
  }  
</script>  

<style lang="scss">  

</style>  
3***@qq.com

3***@qq.com - 80后IT男

你好,问题解决了么?

一朵浪花

一朵浪花 (作者)

没有,但是cordova倒是有相关的插件,我测试打包了没有问题。但是就脱了h5+这套了

一朵浪花

一朵浪花 (作者)

没有,但是cordova倒是有相关的插件,我测试打包了没有问题。但是就脱了h5 这套了

该问题目前已经被锁定, 无法添加新回复