devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序开发考试答题监控系统_培训小程序 开源 过程抓拍

作者：空白诗007 | 2024-08-03 16:35:40

赞

踩

培训小程序 开源 过程抓拍

记录下两年前开发小程序答题监控功能的思路。因时间久远，同时删除了部分业务代码，没讲清楚的请多多包涵。

需求

  • 用户进入考试须知页面，人脸识别成功后，点击开始考试进入答题页面
  • 考试须知页面和答题页面控制考试总时长，控制每道题时长最多60秒
  • 考试过程中启用摄像头对用户进行抓拍监控，比对人脸数据

方案选择

        开始采用的方案是分别开发“考试须知”和“考试”两个独立页面，后因“考试”页面采用了tensorflow人脸识别，初始相机和加载模型耗时过长，遂将两个页面合并，让用户提前加载模型，同时两个页面是考试时长控制也统一起来了。其中最关键的视图容器就是page-container。

主要容器和组件

1.page-container

功能描述：

        页面容器。

        小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

        根据官方文档描述，我们使用page-container来构建一个类似弹出层的假的“子页面”。它的特性可以用于禁止用户在考试过程中返回上一页，如果是两个独立页面，很难实现这一点。

2.camera

功能描述：

        系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要用户授权 scope.camera。 2.10.0起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 CameraContext.setZoom。

        请注意原生组件使用限制

 页面结构预览

1.页面原型

2.整体结构 

  1. <page-meta page-style="{{ popShow||containerShow ? 'overflow: hidden;' : '' }}">
  2. <pageload id="pageload" bind:initPage="initPage" ...>
  3. <view>
  4.   考试须知页面
  5. </view>
  6. </pageload>
  7.  
  8. <page-container show="{{containerShow}}" z-index="100" id="container"
  9.     duration="{{duration}}"
  10.     position="right"
  11.     bind:enter="pageenter"
  12.     bind:beforeleave="beforeleave"
  13.     bind:afterleave="afterleave"
  14.   >
  15.  
  16.   <pageload bind:initPage="initExamPage" requesting="true" id="examPage">
  17.     <block wx:if="{{cameraShow}}">
  18.       <view class="camera-container-out">
  19.         <view class="camera-container-in">
  20.           <camera
  21.             device-position="front"
  22.             flash="off"
  23.             frame-size="small"
  24.             binderror="cameraError"
  25.             class="camera"
  26.           ></camera>
  27.           <canvas id="mark-canvas" class="mark-canvas" type="2d"></canvas>
  28.         </view>
  29.       </view>
  30.     </block>
  31.     
  32.     <view class="titlebar">
  33.       <view>
  34.               剩余答题时间：
  35.       </view>
  36.     </view>
  37.     <view class="pageBody pageBody_sty">
  38.       <view>
  39.         考试题目
  40.       </view>
  41.       <scroll-view scroll-y="true" scroll-top="{{top}}" style="height:{{viewHeight}}rpx;" show-scrollbar="false">
  42.         <view class="item_con" wx:for="{{curr_question.trunk.options}}">
  43.               试题选项
  44.         </view>
  45.       </scroll-view>
  46.     </view>
  47.  
  48.     <view class="foot-nav-panel">
  49.       <view class="foot-nav-ul">	               
  50.           <view class="li">
  51.             <van-button type="primary" block custom-class="foot-btn"
  52.             bind:click="showPop">
  53.               答题板
  54.             </van-button>                  
  55.           </view>
  56.           <view class="li leftBorder">
  57.             <van-button type="primary" block custom-class="foot-btn" 
  58.             data-id="{{curr_question.nextId}}"
  59.             bind:click="nextQuestion">
  60.               {{!curr_question.nextId?'交卷':'下一题'}}
  61.             </van-button> 
  62.           </view>
  63.       </view>
  64.     </view>
  65.  
  66.     <van-popup show="{{popShow}}" closeable position="bottom" custom-style="height: 60%" bind:close="hidPop">
  67.       <view class="serialNum">
  68.         答题板详情
  69.       </view>
  70.     </van-popup>
  71.   </pageload>
  72.  
  73. </page-container>
  74. </page-meta>

 3.局部分析

1）最外层组件page-meta

        页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。page-style属性：页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点。

<page-meta page-style="{{ popShow||containerShow ? 'overflow: hidden;' : '' }}">

        当弹出层（答题板）或者子页面（答题页）显示时，父页面溢出隐藏，防止滑动操作时父页面滚动。

2）自定义组件pageload

功能描述

        页面初始化。打开页面后执行initPage方法，通过回调来判断展示正确或错误的页面信息

 wxml
  1. <view>
  2.   <view wx:if="{{requesting===false}}">
  3.     <view wx:if="{{status===false}}" class="error">
  4.       <image class="error_image" src="{{errImg}}"></image>
  5.       <view class="error_text">{{errText?errText:'未知错误'}}</view>
  6.       <view class="error_btn">
  7.         <!-- <view bindtap="refresh" class="refresh">
  8.           <image class="icon" src="/assets/image/replay.png"/>
  9.         </view> -->
  10.         <button bindtap="refresh" class="btnDefault">刷新</button>
  11.         <button bindtap="goback" class="btnBack marginTop2">返回</button>
  12.       </view>
  13.     </view>
  14.     <view wx:if="{{status===true}}">
  15.       <slot>
  16.       </slot>
  17.     </view>
  18.   </view>
  19. </view>
 js
  1. Component({
  2.   options: {
  3.     addGlobalClass: true
  4.   },
  5.   properties: {
  6.     requesting: {
  7.       type: Boolean,
  8.       value: false,
  9.       observer: 'requestingEnd',
  10.     },
  11.     status: {
  12.       type: Boolean,
  13.       value: false
  14.     },
  15.     errText: {
  16.       type: String,
  17.       value: ''
  18.     },
  19.     errImg: {
  20.       type: String,
  21.       value: '/assets/image/empty-image-error.png'
  22.     },
  23.     cancelLoading:{
  24.       type: Boolean,
  25.       value: false
  26.     }
  27.   },
  28.   data: {
  29.  
  30.   },
  31.   methods: {
  32.     /**
  33. 		 * 监听 requesting 字段变化
  34. 		 */
  35. 		requestingEnd(newVal, oldVal) {
  36.       if(!this.data.cancelLoading){
  37.         if (oldVal === true && newVal === false) {
  38.           if(this.data.status===false&&this.data.errText==''){
  39.             //兼容request.js中拦截500和404响应,toast提示不能立马关闭
  40.             setTimeout(() => {
  41.               wx.hideLoading()  
  42.             }, 2000);
  43.           }else{
  44.             wx.hideLoading()
  45.           }
  46.         } else {
  47.           wx.showLoading({
  48.             title: '加载中',
  49.             mask: true
  50.           })
  51.         }
  52.       }
  53.     },
  54.     init: function(){
  55.       //防止重复调用
  56.       if(this.data.requesting){
  57.         return;
  58.       }
  59.       //插件初始化
  60.       this.setData({
  61.         requesting : true,
  62.         status: false,
  63.         errText: ''
  64.       });
  65.       this.network().then(() => {
  66.         this.triggerEvent('initPage',{
  67.           callback: res=>{
  68.             this.setData(res);
  69.           }
  70.         });
  71.       }).catch(res => {
  72.         this.setData({
  73.           requesting : false,
  74.           status : false,
  75.           errText : res
  76.         });
  77.       })
  78.       
  79.     },
  80.     refresh: function(){
  81.       this.init();
  82.     },
  83.     network: function() {
  84.         return new Promise((resolve, reject) => {
  85.             wx.getNetworkType({
  86.                 success: res => {
  87.                     if (res.networkType != 'none') {
  88.                       resolve();
  89.                     } else {
  90.                       reject("网络异常");
  91.                     }
  92.                 },
  93.             })
  94.         })
  95.     },
  96.     goback: function(){
  97.       wx.navigateBack();
  98.     }
  99.   },
  100.   pageLifetimes: {
  101.     show: function() {
  102.       // 页面被展示
  103.     },
  104.     hide: function() {
  105.       // 页面被隐藏
  106.     }
  107.   },
  108.   lifetimes: {
  109.     attached: function() {
  110.       // 在组件实例进入页面节点树时执行
  111.       if(!this.data.requesting){
  112.         this.init();
  113.       }
  114.     },
  115.   }
  116. })
  117.  
  118. /* 
  119.   使用该组件的页面js中添加如下方法：
  121.   initPage(e){
  122.     let that = this;
  123.     let callback = e.detail.callback;
  124.     let url = app.globalData.url + "/...";
  125.     request.requestPostApi(url,{},this,succRes=>{
  126.       callback({
  127.         status : succRes.status,
  128.         errText : succRes.message
  129.       });
  130.       if(succRes.status){
  131.         doSuccess...
  132.       }
  133.     },failRes=>{
  134.       callback({
  135.         status : false,
  136.         errText : '未知错误'
  137.       });
  138.     },completeRes=>{
  139.       callback({requesting:false});
  140.     });
  141.   }
  142. */

3）倒计时组件van-count-down 

本文使用的UI组件为Vant Weapp - 轻量、可靠的小程序 UI 组件库

  1. <view>剩余时间：
  2.     <van-count-down use-slot
  3.     class="control-count-down"
  4.     time="{{ examInfo.remainingTime }}"
  5.     bind:change="remainingTimeChange"
  6.     bind:finish="remainingTimeFinish">
  7.     <text class="time" wx:if="{{vantRemainingTime.days>0}}">{{ vantRemainingTime.days }}天</text>
  8.     <text class="time" >{{ vantRemainingTime.hours>9?vantRemainingTime.hours:'0'+vantRemainingTime.hours }}时</text>
  9.     <text class="time" >{{ vantRemainingTime.minutes>9?vantRemainingTime.minutes:'0'+vantRemainingTime.minutes }}分</text>
  10.     <text class="time" >{{vantRemainingTime.seconds>9?vantRemainingTime.seconds:'0'+vantRemainingTime.seconds}}秒</text>
  11.     </van-count-down>
  12. </view>

通过组件绑定事件remainingTimeChange来处理倒计时问题。除了计算整场考试剩余时间，可调用自定义函数去控制单个题目显示时长。

  1. remainingTimeChange(e) {
  2.     this.setData({
  3.       'vantRemainingTime':e.detail
  4.     });
  5.     //自定义函数执行业务逻辑
  6.     this.timeGo(e.detail);
  7. }

当小程序切换到后台，js定时器会停止，考试剩余时间就需要重新从服务端获取，可以在onShow中来触发。

  1. onHide(){
  2.     this.setData({pageHide:true})
  3. },
  4. onShow(){
  5.     this.setData({pageHide:false});
  6.     //请求服务端更新考试剩余时间
  7.     this.updateRemainingTime();
  8. }

4）父页面js

在onLoad中初始化子页面的滚动区域大小，在onReady中初始化tfjs插件（注：20230828，鸿蒙系统无法使用，暂未解决。该插件主要为在小程序端追踪人脸，实时提示用户保持头像居中，可整体移除。具体的考试监控由相机拍照上传至服务端后，异步执行）。tfjs插件使用教程可自行搜索。

  1. const app = getApp();
  2. const faces = require("../../../utils/face-storage.js");
  3. const request = require("../../../utils/request.js");
  4. const util = require("../../../utils/util.js");
  5. const examApi = require("../../../utils/exam.js");
  6. var fetchWechat = require('fetch-wechat');
  7. var tf = require('@tensorflow/tfjs-core');
  8. var webgl = require('@tensorflow/tfjs-backend-webgl');
  9. var plugin = requirePlugin('tfjsPlugin');
  10. const faceDetection = require('@tensorflow-models/face-detection');
  11. const log = require('../../../utils/log.js')
  12.  
  13. onLoad(options) {
  14.     util.triggerEvent('resetIsClick');
  15.     this._cup2model = app.globalData.cup2model;
  16.     var that = this;
  17.     that.initViewHeight();
  18.     //防止 setTimeout 和 setInterval 在页面返回后继续执行
  19.     var taskId = setInterval(() => {
  20.       let timeout;
  21.       if(!util.isEmpty(that.data.examInfo)){
  22.         timeout = that.data.examInfo.timeout;
  23.       }
  24.       if(timeout!=1){
  25.         that.updateRemainingTime();
  26.       }else{
  27.         clearInterval(taskId);
  28.       }
  29.     }, 1000*60*10)
  30.     that.setData({taskId,taskId});
  31.   },
  32.   initViewHeight: function(){
  33.     var that = this;
  34.     wx.getSystemInfoAsync({
  35.       success: function(res) {
  36.         let {windowHeight,windowWidth} = res;
  37.         //页面高度减头部底部按钮高度，结合自身页面情况计算
  38.         let rpxHeight = Math.floor(750*(windowHeight-105)/(windowWidth || 375))-280;
  39.         that.setData({viewHeight:rpxHeight});
  40.       }
  41.     });
  42.   },
  43. async onReady(){
  44.     if(this.data.useTfjs){
  45.       this.initTfjsPlugin();
  46.       this.loadmodel();
  47.     }
  48.   },
  49.   initTfjsPlugin(){
  50.     let config = {
  51.       // polyfill fetch function
  52.       fetchFunc: fetchWechat.fetchFunc(),
  53.       // inject tfjs runtime
  54.       tf,
  55.       // inject webgl backend
  56.       webgl,
  57.       // provide webgl canvas
  58.       canvas: wx.createOffscreenCanvas()
  59.     }
  60.     plugin.configPlugin(config);
  61.   },
  62.   async loadmodel(){
  63.     try {
  64.       let start = new Date();
  65.       const FILE_STORAGE_PATH = 'zjk_face_model';
  66.       const fileStorageHandler = plugin.fileStorageIO(FILE_STORAGE_PATH,wx.getFileSystemManager());
  67.       const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
  68.       const detectorConfig = {
  69.         maxFaces: 2,
  70.         runtime: 'tfjs' 
  71.       };
  72.       detectorConfig.detectorModelUrl = this._modelUrl;
  73.       this._model = await faceDetection.createDetector(model, detectorConfig);
  74.       let end = new Date();
  75.       log.info("下载模型成功，耗时："+ (end-start)+" ms");
  76.       if(!this._cup2model){
  77.         this._model.estimateFaces(
  78.           {
  79.             data:new Uint8Array(),
  80.             width:1,
  81.             height:1
  82.           }, 
  83.           {flipHorizontal: false}
  84.         ).then(e=>{
  85.           log.info("模型运行成功，耗时："+ (new Date()-end)+" ms")
  86.           if(this._modelLoad){
  87.             log.info("成功后关闭等待框")
  88.             wx.hideLoading();
  89.           }
  90.           this._modelLoad = true;
  91.           this._cup2model = true;
  92.           app.globalData.cup2model = true;
  93.           console.log("第一次模型运行成功")
  94.         }).catch(e=>{
  95.           log.error("模型运行失败，耗时："+ (new Date()-end)+" ms")
  96.           if(this._modelLoad){
  97.             log.error("失败后关闭等待框")
  98.             wx.hideLoading();
  99.           }
  100.           this._modelLoad = true;
  101.           console.log("模型运行失败",e)
  102.         })
  103.       }
  104.     } catch (error) {
  105.       log.error("捕捉到异常信息"+JSON.stringify(error))
  106.       if(this._modelLoad){
  107.         log.error("捕捉到异常信息后关闭等待框")
  108.         wx.hideLoading();
  109.       }
  110.       this._modelLoad = true;
  111.     }
  112.     //代码运行失败
  113.     /* try{
  114.       console.log("加载本地模型")
  115.       detectorConfig.detectorModelUrl = fileStorageHandler;
  116.       this._model = await faceDetection.createDetector(model, detectorConfig);
  117.     }catch(e){
  118.       console.log("加载本地模型失败",e)
  119.       detectorConfig.detectorModelUrl = this._modelUrl;
  120.       this._model = await faceDetection.createDetector(model, detectorConfig);
  121.       console.log("加载网络模型成功")
  122.       try{
  123.         this._model.detectorModel.save(fileStorageHandler);
  124.       }catch(e){
  125.         console.log("保存本地模型失败",e)
  126.       }
  127.       
  128.     } */
  129.   }
  130.   onShow(){
  131.     this.setData({pageHide:false});
  132.     this.updateRemainingTime();
  133.   },
  134.   onHide(){
  135.     this.setData({pageHide:true})
  136.   },
  137.   onUnload(){
  138.     if(this.data.taskId){
  139.       clearInterval(this.data.taskId);
  140.     }
  141.     let countdown = this.selectComponent('.control-count-down');
  142.     if(countdown){
  143.       //返回上一页必须关闭定时器，否则会一直执行
  144.       countdown.pause();
  145.     }
  146.   },
  147.   /** 页面初始化，获取考试信息*/
  148.   initPage(e){
  149.     let that = this;
  150.     let callback = e.detail.callback;
  151.     let url = app.globalData.url + "/.../getExamInfo";
  152.     request.requestPostApi(url,{},this,succRes=>{
  153.       callback({
  154.         status : succRes.status,
  155.         errText : succRes.message
  156.       });
  157.       if(succRes.status){
  158.         that.setData({
  159.           examInfo : succRes.result
  160.         });
  161.         if(!that.data.examInfo.examing){//如果后台已经提交或者无考试，重置本地考试完成状态
  162.           examApi.finish(false);
  163.         }
  164.         that.setData({localFinish:examApi.finish()})
  165.       }
  166.     },failRes=>{
  167.       callback({
  168.         status : false,
  169.         errText : '未知错误'
  170.       });
  171.     },completeRes=>{
  172.       callback({requesting:false});
  173.       if(!this._cup2model&&!this._modelLoad){
  174.         this._modelLoad = true;
  175.         wx.showLoading({
  176.           title: '加载中',
  177.           mask: true
  178.         })
  179.       }
  180.     });
  181.   },
  182.     timeBeforeChange(e) {
  183.     this.setData({
  184.       timeBefore: e.detail
  185.     });
  186.   },
  187.   timeBeforeFinish(){
  188.     this.setData({
  189.       'examInfo.timeout':0
  190.     })
  191.   },
  192.   remainingTimeChange(e) {
  193.     this.setData({
  194.       'vantRemainingTime':e.detail
  195.     });
  196.     this.timeGo(e.detail);
  197.   },
  198.   remainingTimeFinish(){
  199.     this.setData({
  200.       'examInfo.timeout':1
  201.     })
  202.     if(this.data.examInfo.examing){
  203.       this.submitExam();
  204.     }
  205.   },
  206.   updateRemainingTime(){
  207.     var that = this;
  208.     if(!util.isEmpty(that.data.examInfo)&&that.data.examInfo.timeout!=1&&!(that.data.examInfo.answerCountCurrent==that.data.examInfo.answerCountMax&&!that.data.examInfo.examing&&that.data.examInfo.isSubmit)){
  209.         request.requestPostApi(app.globalData.url + "/.../validateRemainingTime",{},this,succRes=>{
  210.           if(succRes.status){
  211.             that.updateExamInfo(succRes.result);
  212.           }else{
  213.             console.log("刷新时间失败:"+succRes.message);
  214.           }
  215.         },failRes=>{
  216.           console.log("刷新时间失败");
  217.         });
  218.     }
  219.   }

5）子页面js

  1.   pageenter(){
  2. 	//打开子页面，执行initPage绑定方法
  3.     let examPage = this.selectComponent("#examPage");
  4.     examPage.setData({requesting:false});
  5.     examPage.init();//执行的是initExamPage
  6.   },  
  7.   beforeleave(){
  8. 	//隐藏子页面，停止摄像头
  9.     this._listener&&this._listener.stop();
  10.     this.setData({
  11.       curr_question: {},
  12.       containerShow:false
  13.     })
  14.   },
  15.   afterleave(){
  16. 	//	可在该事件内阻止用户返回
  17.     // if(!this.data.localFinish&&this.data.examInfo.timeout==0){
  18.     //   this.setData({containerShow:true});
  19.     //   setTimeout(() => {
  20.     //     request.toast("请保持答题页面至提交试卷")
  21.     //   }, 300);
  22.     // }
  23.   },
  24.  initExamPage(e){
  25.     let that = this;
  26.     that.setData({isLoadingExam:false});
  27.     let callback = e.detail.callback;
  28.     let{questions,answers,currQuestion} = examApi.getAll();
  29.     //中途退出，直接从本地缓存取题目
  30.     if(!util.isEmpty(questions)&&!util.isEmpty(currQuestion)){
  31.       console.log("从缓存中获取试题数据")
  32.       var count = 0;
  33.       for(let key in questions){
  34.         count++;
  35.       }
  36.       that.setData({
  37.         questions:questions,
  38.         listCount: count,
  39.         userAnswers: answers,
  40.         curr_question:questions[currQuestion.id]
  41.       })
  42.       //作用:显示剩余时间后再callback
  43.       if(!util.isEmpty(that.data.vantRemainingTime)){
  44.         that.timeGo(that.data.vantRemainingTime);
  45.       }
  46.       callback({
  47.         status : true,
  48.         errText : '',
  49.         requesting : false
  50.       });
  51. 	  //初始化相机
  52.       that.initCamera();
  53.       return;
  54.     }
  55.  
  56.     let url = app.globalData.url + "/.../getExamQuestions";
  57.     request.requestPostApi(url,{},this,succRes=>{
  58.       callback({
  59.         status : succRes.status,
  60.         errText : succRes.message
  61.       });
  62.       if(succRes.status){
  63.         let qs = succRes.result;
  64.         let temp_questions = {};
  65.         for(var i=0;i<qs.length;i++){
  66.           temp_questions[qs[i].id]=qs[i];
  67.         }
  68.         that.setData({
  69.           questions:temp_questions,
  70.           listCount: qs.length
  71.         })
  72.         that.showQuestion(qs[0]["id"]);//显示第一题,在本地保存questions和curr_question
  73.         that.updateRemainingTime();
  74. 		//初始化相机
  75.         that.initCamera();
  76.       }
  77.     },failRes=>{
  78.       callback({
  79.         status : false,
  80.         errText : '未知错误'
  81.       });
  82.     },completeRes=>{
  83.       callback({requesting:false});
  84.     });
  85.   }
  86.   initCamera(){
  87.     console.log("显示相机和画布");
  88.     this.setData({cameraShow:true});
  89.     setTimeout(() => {//必须setTimeout,等待页面渲染完成
  90.       try {
  91.         if(!this._camera){
  92.           console.log("创建相机")
  93.           this._camera = wx.createCameraContext();
  94.           this._camera.setZoom({
  95.             zoom:1
  96.           })
  97.         }else{
  98.           this._camera.setZoom({
  99.             zoom:1
  100.           })
  101.         }
  102.         if(this.data.useTfjs){//判断是否使用tfjs
  103.           this.initCanvas();//初始画布，用于显示人脸追踪框
  104.         }
  105.         this.addCameraListener();
  106.         this._listener.start();
  107.       } catch (error) {
  108.         console.log("exception:",error)
  109.       }
  110.     }, 1500);
  111.   },
  112.   initCanvas(){
  113.     if(!this._canvas){
  114.       console.log("创建画布")
  115.       const query = wx.createSelectorQuery();
  116.       query.select('#mark-canvas')
  117.         .fields({ node: true, size: true })
  118.         .exec((res) => {
  119.           this._canvas = res[0].node;
  120.           const canvas = res[0].node;
  121.           const canvasContext = canvas.getContext('2d')
  122.           const systemInfo = wx.getSystemInfoSync()
  123.           //设备像素比
  124.           const dpr = systemInfo.pixelRatio
  125.           //画布像素
  126.           canvas.width = res[0].width * dpr
  127.           this._canvasWidthPix = canvas.width;
  128.           canvas.height = res[0].height * dpr
  129.           this._canvasHeightPix = canvas.height
  130.           this._dpr = dpr;
  131.           canvasContext.lineWidth = 3
  132.           canvasContext.strokeStyle = 'red'
  133.           canvasContext.fillStyle = 'yellow'
  134.           this._canvasContext = canvasContext;
  135.         })
  136.     }
  137.   },
  138.   addCameraListener(){
  139.     if(!this._listener){
  140.       console.log("创建相机监听")
  141.       this._listener = this._camera.onCameraFrame(async frame=> {
  142. 		//当使用tfjs时，每隔1秒（60帧）判断一次人脸位置
  143.         if(this.data.useTfjs&&this.data.containerShow){
  144.           if(this._frameWidth!=frame.width || this._frameHeight != frame.height){
  145.             this._frameWidth = frame.width;
  146.             this._frameHeight = frame.height;
  147.             this._xRatio = Math.round(this._canvasWidthPix*1000 / frame.width)/1000;
  148.             //等比例缩放后画布高的像素值
  149.             let tempCanvasnHeightPix = Math.floor(frame.height*this._xRatio);
  150.             //画布沿y轴偏移量
  151.             this._yoffset = Math.floor((this._canvasHeightPix-tempCanvasnHeightPix)/2);
  152.             console.log("初始化缩放倍数和偏移量",this._frameWidth,this._frameHeight,this._xRatio,this._yoffset)
  153.           }
  154.           this._count++;
  155.           if (this._count === 60) {      
  156.             this.clearMarkCanvas();
  157.             if(this._model){
  158.               const res = await this.detectFace(frame);
  159.               this.validateFace(res);
  160.             }
  161.             this._count = 0;
  162.           }else if(this._count>60){
  163.             this._count = 0;
  164.           }
  165.         }
  166.       });
  167.     }
  168.   },
  169.   async detectFace(frame) {
  170.     const image = {
  171.       data: new Uint8Array(frame.data),
  172.       width: frame.width,
  173.       height: frame.height
  174.     }
  175.     const estimationConfig = {flipHorizontal: false};
  176.     return await this._model.estimateFaces(image, estimationConfig);
  177.   },
  178.   validateFace(res){
  179.     //this._canvasContext.strokeRect(0,0,this._canvasWidthPix,this._canvasHeightPix);
  180.     let msg = "";
  181.     if(res.length<1){
  182.       msg = '请保持头像居中';
  183.       this.setData({faceError:msg});
  184.       return;
  185.     }
  186.     /* if(res.length>1){
  187.       msg = '检测到多人';
  188.       this.setData({faceError:msg});
  189.       return;
  190.     } */
  191.     
  192.     const face = res[0];
  193.     //画关键点
  194.     // const keypoints = face.keypoints
  195.     // for(let i=0; i<6; ++i){
  196.     //   const point = this.transformPoint([keypoints[i].x,keypoints[i].y])
  197.     //   this._canvasContext.fillRect(point[0],point[1],6,6)
  198.     // }
  199.     const box = face.box;
  200.     const start = this.transformPoint([box.xMin,box.yMin]);
  201.     const end = this.transformPoint([box.xMax,box.yMax]);
  202.     let size = [end[0] - start[0], end[1] - start[1]]
  203.     //画人脸预测框
  204.     //this._canvasContext.strokeRect(start[0], start[1], size[0], size[1]);
  205.     /* if (size[0] < 0.2 * this._canvasWidthPix){
  206.       msg = '距离太远';
  207.       this.setData({faceError:msg});
  208.       return;
  209.     } */
  210.     if (size[0] > this._canvasWidthPix*1.05){
  211.       msg = '距离太近';
  212.       this.setData({faceError:msg});
  213.       return;
  214.     }
  215.     if(start[0] < -0.06 * this._canvasWidthPix){
  216.       msg = "头像偏左,";
  217.     }else if(end[0] > 1.06 * this._canvasWidthPix){
  218.       msg = "头像偏右,";
  219.     }else if(start[1] < 0.14 * this._canvasHeightPix){
  220.       msg = "头像偏上,";
  221.     }else if(end[1] > 1.06 * this._canvasHeightPix){
  222.       msg = "头像偏下,";
  223.     }
  224.     if(msg){
  225.       this.setData({faceError:msg+'请保持头像居中'});
  226.       return;
  227.     }
  228.     this.setData({faceError:""});
  229.   },
  230.   transformPoint(point){
  231.     const x = Math.floor(point[0] * this._xRatio);
  232.     const y = Math.floor(point[1] * this._xRatio)+this._yoffset;
  233.     return [x,y]
  234.   },
  235.   clearMarkCanvas(){
  236.     this._canvasContext&&this._canvasContext.clearRect(0,0,this._canvasWidthPix,this._canvasHeightPix)
  237.   },
  238.   cameraError(e){
  239.     request.toast("摄像头打开失败，请退出重试或更换手机！")
  240.   }

如果要使用tfjs，请参考下面摄像头和画布的关系。画布透明地覆盖在摄像头上。如果要求隐形监控的话，可以将相机组件长宽设置为1px，同时，在onCameraFrame中截取视频帧图片进行上传，以达到隐形效果。

因本案例无特殊要求，所以采用了最简单的方式实现监控：每间隔一道题拍一次照片上传至服务端。这样做的弊端是，苹果用户拍照会有系统提示声（甲方没说就懒得改了...）

  1.     <block wx:if="{{cameraShow}}">
  2.       <view class="camera-container-out">
  3.         <view class="camera-container-in">
  4.           <camera
  5.             device-position="front"
  6.             flash="off"
  7.             frame-size="small"
  8.             binderror="cameraError"
  9.             class="camera"
  10.           ></camera>
  11.           <canvas id="mark-canvas" class="mark-canvas" type="2d"></canvas>
  12.         </view>
  13.       </view>
  14.     </block>
  1. .camera-container-out {
  2.   position: absolute;
  3.   top:100rpx;
  4.   right: 30rpx;
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8.   z-index: 101;
  9. }
  10. .camera-container-in {
  11.   display: flex;
  12.   justify-content: flex-start;
  13. }
  14. .camera{
  15.   width: 50px;
  16.   height: 70px;
  17.   z-index: 101;
  18. }
  19. .mark-canvas{
  20.   position: absolute;
  21.   width: 50px;
  22.   height: 70px;
  23.   z-index: 102;
  24. }

6）拍照上传

图片保存使用阿里云oss服务。人脸比对也用的是阿里云服务。

  1.   takePhoto() {
  2.     const that = this;
  3.     if(!this._camera){
  4.       setTimeout(() => {
  5.         that.takePhoto();
  6.       }, 1100);
  7.       return;
  8.     }
  9.     this._camera.takePhoto({
  10.       quality: 'high',
  11.       success: (res) => {
  12.         let localSrc = res.tempImagePath;
  13.         let type = localSrc.substring(localSrc.lastIndexOf("."));
  14.         console.log("开始上传");
  15.         let policy = this._policy;
  16.         let signature = this._signature;
  17. 		let oSSAccessKeyId = this._OSSAccessKeyId;
  18.         let date = new Date();
  19.         let filePath = that.data.examInfo.themeId+"/"+that.data.examInfo.examUser+"/"+date.Format('yyyyMMddhhmmssS')+type;
  20.         let uploadUrl = "https://域名.oss-cn-shanghai.aliyuncs.com";
  21.         wx.uploadFile({
  22.           url: uploadUrl, // 开发者服务器的URL。
  23.           filePath: localSrc,
  24.           name: 'file', // 必须填file。
  25.           formData: {
  26.             key: filePath,
  27.             policy: policy,
  28.             OSSAccessKeyId: oSSAccessKeyId,
  29.             signature: signature
  30.           },success: (res) => {
  31.             if (res.statusCode === 204||res.statusCode === 200) {
  32.               let photos = examApi.photos();
  33.               photos.push("/"+filePath);
  34.               let photoTimes = examApi.photoTimes();
  35.               photoTimes.push(date.getTime());
  36.               examApi.updatePhotoDatas(photos,photoTimes);
  37.             }
  38.           },
  39.           fail: err => {
  40.             console.log(err);
  41.           }
  42.         });
  43.       },fail: err =>{
  44.         console.log(err);
  45.       }
  46.     })
  47.   }

7）注意事项

因tfjs依赖包比较大，考试模块建议采用分包开发。本案例中tfjs依赖包如下：

"dependencies": {

    "node-fetch": "2.6.1",

    "@mediapipe/face_detection": "0.4.1646425229",

    "@tensorflow-models/face-detection": "1.0.1",

    "@tensorflow/tfjs-backend-webgl": "3.20.0",

    "@tensorflow/tfjs-converter": "3.20.0",

    "@tensorflow/tfjs-core": "3.20.0",

    "fetch-wechat": "0.0.3"

  }

其他注意事项：

防止页面重复打开；防止页面返回后定时任务和相机监控继续执行；防止tfjs初始化失败对业务的影响；相机组件要在页面渲染完成后初始化，否则会错位。

最后

自认为这边文章写得很水，感谢阅读x3。如有问题请留意。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/923850
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号