关于微信小程序百度api人脸识别的制作

最新推荐文章于 2024-08-03 14:48:29 发布

置顶

我是爱丽

最新推荐文章于 2024-08-03 14:48:29 发布

阅读量2.9k

点赞数 4

文章标签：人脸识别微信小程序百度api

本文链接：https://blog.csdn.net/lnsf_fsj/article/details/102167598

版权

本文介绍了如何在微信小程序中使用百度API实现人脸识别功能。首先，详细阐述了申请百度AI人脸识别API的步骤，包括注册账号和获取API Key及Secret Key。接着，创建人脸库并创建用户分组。然后，展示了WXML、JS和WXSS的代码实现，以及如何配置这些代码以接入API。最后，讲解了如何设置用户组以完成人脸识别的追踪和识别功能。

摘要由CSDN通过智能技术生成

1.首先申请百度的api
这是申请api入口的链接：https://console.bce.baidu.com/ai/?_=1528192333418&fromai=1#/ai/face/overview/index，没有账号的可以手机直接注册。

2.api的申请步骤详情可以参考这篇博客：
https://blog.csdn.net/Hydra_xyc/article/details/80835389

3.建立人脸库：

申请完成后，如下界面：点击 “查看人脸库”，这里的API Key和Secret Key，后面会用到！！！！！

在这里插入图片描述
点击进去之后，如下界面，点击创建分组，
注意：要记住自己分组的名字，后面会用到，很重要！！！！
这里我的分组名字是 “test123”

4.代码部分：

wxml：

<view class="page-body">
  <view class="page-body-wrapper">
    <camera device-position="front" flash="off" binderror="error" style="width:100%;height:{
   {windowWidth}}px;"></camera>
    <canvas wx:if="{
   {canvasshow}}" style="width: 100%;height:{
   {windowWidth}}px;position:absolute;" canvas-id="canvas"></canvas>
    <view class="btn-area">
      <button type="primary" bindtap="track" style='background-color:#31859c;' data-trackshow="{
   {trackshow}}">{
   {
   trackshow}}</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="search" style='background-color:#31859c;'>进行人脸识别</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="startRecord" style='background-color:#31859c;'>开始录像</button>
    </view>
    <view class="btn-area">
      <button type="primary" bindtap="stopRecord" style='background-color:#31859c;'>结束录像</button>
    </view>
    <view  wx:if="{
   {src}}" class="preview-tips">识别结果:{
   {
   who}}</view>
    <view wx:if="{
   {src}}" style='display:flex;width:100%;justify-content:center;'>
      <image  mode="aspectFit" src="{
   {src}}"  style='width:50%;height:{
   {windowWidth/2}}px;'></image>
      <canvas  style="width: 50%;height:{
   {windowWidth/2}}px;position:absolute;" canvas-id="canvasresult"></canvas>
    </view>
    <view wx:if="{
   {videoSrc}}" class="preview-tips">视频预览</view>
    <video wx:if="{
   {videoSrc}}" poster="{
   {fengmian}}" class="video" src="{
   {videoSrc}}"></video>
    <view wx:if="{
   {videoSrc}}" class="btn-area">
      <button type="primary" bindtap="uploadRecord" style='background-color:#31859c;'>上传该录像</button>
    </view>
  </view>
</view>

var app = getApp();
Page({
   
  data: {
   
    src:"",
    fengmian:"",
    videoSrc:"",
    who:"",
    openid: "",
    token: "",
    windowWidth: 0,
    trackshow: "进行人脸追踪",
    canvasshow:true,
    access_token:''
  },

  onLoad() {
   
    var that = this
    wx.showLoading({
   
      title: '努力加载中',
      mask: true
    })
    //屏幕宽度
    var sysInfo = wx.getSystemInfoSync()
    that.setData({
   
      windowWidth: sysInfo.windowWidth,
    })
    that.ctx = wx.createCameraContext()
    console.log("onLoad"),
      that.setData({
   
        openid: app.globalData.openid,
        token: app.globalData.token
      });
    
    // 每次更新access_token
    wx.request({
   
      url: "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=" + app.globalData.baiduapikey + "&