记一次微信小程序人脸比对开发

由于公司要开发一个考试类型的项目用到了人脸比对,我就研究了一下相关了知识。

1.最开始想的是用微信小程序的媒体组件camera。

const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: ‘high‘,
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })  

用ctx.takePhoto()拍照来获取实时图片和数据库中的人脸作比对,比对成功进入考试页面,一个demo做下来后效果还算理想,但是当用IOS系统测试的时候拍照时会发出‘咔咔咔’的响声,这很影响用户体验,于是我寻思找一找资料看有没有办法,当我看完所有camera的属性后,发现并没有能关闭拍照声音的属性,最后已失败告终。

2.然后我又看到了同是媒体组件的live-pusher

利用这个属性获取实时截图然后发送给后台与数据库比对不也很完美,于是我就开始着手写demo,一开始我没打算推流,只是想一直在预览画面然后获取截图,但是后来发现不推流就没法进入到预览画面,而且与推流地址链接不上后会关闭预览画面,考虑到公司没有开启接受推流的地址,这个方法也暂时行不通(如果有接受推流的服务器的小伙伴这个方法是可以使用的,只是使用live-pusher需要开通相应的权限)

3.我又把目光聚焦到camera组件上

在众多的api中我发现了这么一个api-获取 Camera 实时帧数据,得到帧数据后转化成base64岂不美哉

导入插件:

var UPNG = app.require(‘util/UPNG.js‘);

  插件地址UPNG.js,pako.js

const context = wx.createCameraContext();
    const listener = context.onCameraFrame((frame) => {
   let base64= wx.arrayBufferToBase64(UPNG.upng.encode([frame.data], frame.width, frame.height, 256))
    })

  把得到的base64发送到后台,完事

  

原文地址:https://www.cnblogs.com/wangyunhui/p/12598838.html

时间: 2024-10-02 22:45:24

记一次微信小程序人脸比对开发的相关文章

微信小程序购物商城系统开发系列-目录结构

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

微信小程序购物商城系统开发系列

微信小程序购物商城系统开发系列 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址

微信小程序人脸识别功能

本文档以微信小程序为例,微信小程序开发人脸核身功能需要两个申请:腾讯云申请人脸识别服务和小程序申请人脸识别服务(注意:只有符合以下条件的机构才能在小程序端申请) 政务:政府机构或事业单位金融:银行.保险医疗:公立医疗机构运营商:电信运营商教育:公立教育机构交通:航空.客运.网约车.交通卡.共享交通.轨道交通.租车旅游:酒店物流:快递.邮政.物流 主要参考文档: 1.腾讯云人脸核身文档 :https://cloud.tencent.com/product/faceid/developer 2.腾讯

记一次微信小程序在安卓的白屏问题

在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1.相关代码文件 我这里是使用了自定义组件的形式来渲染的 外部的引用的自定义组件的wxml文件 /* limitCommodity是一个数组,返回的是商品对象,包含商品价格.商品结束时间.商品图片等 */ <block wx:for="{{limitCommodity}}" wx:key

记一次微信小程序开发

之前在网上看到博客园新闻服务开放接口,因为自己本身有看博客园IT新闻的习惯,为了能随时随地简洁方便的浏览新闻,于是萌生了一个利用开放API开发一个微信小程序的想法. 1. mpvue初探 平时技术栈有用到Vue,这个小程序功能也比较简单,用 mpvue 再合适不过了.mpvue 基于 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,获得完整的 Vue.js 开发体验,组件化代码复用.Vuex 数据管理.webpack 构建机制

微信小程序家庭记账本开发进度五

我们要做的事一个家庭记账本的微信小程序,首先,先对app.json,进行编译 { "pages": [ "pages/index/index", "pages/item/item" ], "window": { "backgroundTextStyle": "dark", "navigationBarBackgroundColor": "#fff"

微信小程序之使用本地接口开发

本文主要讲解如何使用本地接口进行开发,很多人都会遇到这个问题,特别是小程序上线后. 一.解决思路 在小程序开发工具设置网络代理,然后再通过Charles设置代理,将https域名转为本地接口进行访问. 以下示例的环境为win7 + 老版本的微信开发工具 二.准备工作 1.配置https域名 为小程序配置request合法域名,在登录公众号平台去设置. 2.安装Charles 下载地址:https://www.charlesproxy.com/download/ 三.配置Charles 1.安装根

webstorm开发微信小程序代码提醒(webstorm开发工具)

使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss 1.png 2.FileType下HTML 添加*.wxml 2.png 3.将其中的wecharCode.jar下载下来,然后在webStorm 的 File -> import settings 中导入即可 3.png 配置已经完