微信小程序调用摄像头隐藏式拍照功能

微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下:

问题

今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看。这系统相当于考驾照时的上机答题部分。开始经理的要求是调用小程序外部的手机拍摄功能,这要可把我吓的够呛。

 解决方法

遇到这种问题肯定要先找下官网的帮助文档,于是找到了调用摄像头的这么一个模块

相机组件控制 (wx.createCameraContext)

说明:

创建并返回 camera 上下文 cameraContext 对象,cameraContext 与页面的 camera 组件绑定,一个页面只能有一个camera,通过它可以操作对应的 <camera/> 组件。 在自定义组件下,第一个参数传入组件实例this,以操作组件内 <camera/> 组件

cameraContext 对象的方法列表:

takePhoto   OBJECT   拍照,可指定质量,成功则返回图片  
startRecord   OBJECT   开始录像  
stopRecord   OBJECT   结束录像,成功则返回封面与视频  

takePhoto 的 OBJECT 参数列表:

quality   String     成像质量,值为high, normal, low,默认normal  
success   Function     接口调用成功的回调函数 ,res = { tempImagePath }  
fail   Function     接口调用失败的回调函数  
complete   Function     接口调用结束的回调函数(调用成功、失败都会执行)  

这不是有个拍照功能的模块吗,于是去找了一下官网所给的代码研究了一下:

官网代码:

wxml代码:

<view> <view> <camera device-position="back" flash="off" binderror="error"></camera> <view> <button type="primary" bindtap="takePhoto">拍照</button> </view> <view> <button type="primary" bindtap="startRecord">开始录像</button> </view> <view> <button type="primary" bindtap="stopRecord">结束录像</button> </view> <view>预览</view> <image wx:if="https://www.jb51.net/{{src}}" mode="widthFix" src="https://www.jb51.net/{{src}}"></image> <video wx:if="https://www.jb51.net/{{videoSrc}}" src="https://www.jb51.net/{{videoSrc}}"></video> </view> </view>

js代码:

Page({ onLoad() {   this.ctx = wx.createCameraContext() }, takePhoto() {   this.ctx.takePhoto({     quality: 'high',     success: (res) => {       this.setData({         src: res.tempImagePath       })     }   }) }, startRecord() {   this.ctx.startRecord({     success: (res) => {       console.log('startRecord')     }   }) }, stopRecord() {   this.ctx.stopRecord({     success: (res) => {       this.setData({         src: res.tempThumbPath,         videoSrc: res.tempVideoPath       })     }   }) }, error(e) {   console.log(e.detail) } })

wxcss代码:

.preview-tips {   margin: 20rpx 0; } .video {   margin: 50px auto;   width: 100%;   height: 300px; }

这代码修改还是可以的只是不是我想要的那种,我要的是隐藏没有摄像头的,和自动抓拍功能的,

官网代码分析:

<camera device-position="back" flash="off" binderror="error"></camera>

这是摄像头模块,这模块只要不是隐藏,宽高不为0,都可以正常使用拍照功能

this.ctx = wx.createCameraContext()

这是获取摄像头图像功能 

takePhoto() {   this.ctx.takePhoto({     quality: 'high',     success: (res) => {       this.setData({         src: res.tempImagePath       })     }   }) },

这是拍照功能,并没有和摄像头一起使用,只要创建了摄像头并不隐藏的情况下可以单独调用 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/60979c7828c3228e42235e88bfea8b72.html