微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用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 }) } }) },
这是拍照功能,并没有和摄像头一起使用,只要创建了摄像头并不隐藏的情况下可以单独调用