uniapp leven系列原生插件

Appearance

leven2026-06-20
3049
16m

使用方法 ​

安卓百度离线人脸识别UTS原生组件，支持在线激活，离线激活，批量激活，单个人脸注册，批量注册，相机人脸注册等，插件使用灵活识别速度快，插件支持自定义数据存储目录。插件支持uniapp和uniappx

注意事项 ​

  • 当前插件为1.x版本的升级版，同时支持uniapp和uniappx
  • 当前2.*版本更新内容较多，使用方法有重大更新，如果您当时使用的是1.*版本请移步至1.*版本文档
  • 1.*版本不再更新，后期将直接更新2.*版本
  • 如果您在使用插件的过程中有任何问题，可以联系作者，作者将全力协助您使用插件
  • 本文档同时提供了uniapp的用法示例和uniappx的用法示例，插件市场导入的示例项目仅为uniapp的用法示例，如果您需要uniappx的示例项目可以通过下方的链接下载示例

    https://pan.baidu.com/s/1psPKxPFZ5f6gbzqsUlae1Q?pwd=fjn4

  • 组件只能在nvue/uvue页面中使用，不支持vue页面

使用流程 ​

  1. 在线激活
  2. 初始化SDK
  3. 注册人脸
  4. 识别人脸

SDK版本 ​

V8.6.0.2026.04.15

联系作者 ​

关注微信公众号可联系作者

官方文档 ​

https://ai.baidu.com/ai-doc/FACE/pk37c1mqu

插件地址 ​

https://ext.dcloud.net.cn/plugin?id=20343

演示程序 ​

进群下载演示程序

​

权限 ​

  • android.permission.CAMERA
  • android.permission.WRITE_EXTERNAL_STORAGE
  • android.permission.READ_EXTERNAL_STORAGE

API用法 ​

用法 ​

在需要使用插件的页面加载以下代码

js
import * as module from "@/uni_modules/leven-uts-baiduFace"
js
import * as module from "@/uni_modules/leven-uts-baiduFace"

示例 ​

vue
<template>
  <view>
    <template v-if="!isCheckActive">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"></uni-segmented-control>
      <active-online v-if="current == 0" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-online>
      <active-offline v-if="current == 1" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-offline>
      <active-batch v-if="current == 2" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-batch>
      <view style="text-align: center; margin-bottom: 32px;" @click="toHelp">激活遇到问题?</view>
    </template>
    <template v-else>
      <view style="padding: 32px;">
        <view style="text-align: center;">正在加载，请稍后....</view>
      </view>
    </template>
  </view>
</template>

<script>
  import ActiveOnline from "./components/activeOnline.vue"
  import ActiveOffline from "./components/activeOffline.vue"
  import ActiveBatch from "./components/activeBatch.vue"
  import * as module from "@/uni_modules/leven-uts-baiduFace"
  export default {
    components: {
      ActiveOnline,
      ActiveOffline,
      ActiveBatch
    },
    data() {
      return {
        isCheckActive: true,
        current: 0,
        items: ['在线激活', '离线激活', '批量激活']
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.requestPermissions();
      })
    },
    methods: {
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
        }
      },
      toHelp() {
        uni.navigateTo({
          url: "/pages/index/help"
        })
      },
      toHome() {
        uni.redirectTo({
          url: "/pages/index/home"
        })
      },
      //显示消息
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      //设置自定义文件保存目录
      setCustomSaveDir() {
        module.setCustomSaveDir({
          params: {
            dir: "/storage/emulated/0/levenBaiduFace/"
          },
          complete: (res) => {
            this.toHome()
          }
        })
      },
      //判断设备是否激活
      isActive() {
        module.isActive({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data || {};
              let result = data.result;
              if (result) {
                this.setCustomSaveDir()
              } else {
                this.isCheckActive = false;
              }
            } else {
              this.isCheckActive = false;
            }
          }
        })
      },
      toAllFilesPermissionPage() {
        module.toAllFilesPermissionPage({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data;
              if (!data.status) {
                this.showMessage("所有文件访问权限未打开")
              } else {
                this.showMessage("权限申请完成，可以使用插件")
                this.isActive();
              }
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      checkAllFilesPermission() {
        module.checkAllFilesPermission({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data;
              if (!data.status) {
                this.toAllFilesPermissionPage();
              } else {
                this.showMessage("权限申请完成，可以使用插件")
                this.isActive();
              }
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      //申请插件所需权限
      requestPermissions() {
        module.requestPermissions({
          params: {
            permissions: [
              "android.permission.READ_EXTERNAL_STORAGE",
              "android.permission.WRITE_EXTERNAL_STORAGE",
              "android.permission.CAMERA"
            ]
          },
          complete: (res) => {
            if (res.code == 0) {
              //判断是否有所有文件访问权限
              this.checkAllFilesPermission();
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
    }
  }
</script>

<style>

</style>
vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <rice-subsection v-model="current" :list="items"></rice-subsection>
    <active-online v-if="current == 0" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-online>
    <active-offline v-if="current == 1" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-offline>
    <active-batch v-if="current == 2" @onMessage="showMessage" @onSuccess="setCustomSaveDir"></active-batch>
    <view style="justify-content: center; align-items: center; margin-bottom: 32px;" @click="toHelp">激活遇到问题?</view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup>
  import ActiveOnline from "./components/activeOnline.uvue"
  import ActiveOffline from "./components/activeOffline.uvue"
  import ActiveBatch from "./components/activeBatch.uvue"
  import * as module from "@/uni_modules/leven-uts-baiduFace"
  import { LevenResult, LevenOptions } from "@/uni_modules/leven-uts-baiduFace"

  const isCheckActive = ref(false)
  const current = ref(0)
  const items = ref<string[]>(['在线激活', '离线激活', '批量激活'])

  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  function toHelp() {
    uni.navigateTo({
      url: "/pages/baiduFace/help"
    })
  }

  function toHome() {
    uni.redirectTo({
      url: "/pages/baiduFace/home"
    })
  }

  //设置自定义文件保存目录
  function setCustomSaveDir() {
    module.setCustomSaveDir({
      params: {
        dir: "/storage/emulated/0/levenBaiduFace/"
      },
      complete: (_res : LevenResult) => {
        toHome()
      }
    })
  }

  //判断设备是否激活
  function isActive() {
    module.isActive({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let result = data.getBoolean("result")!;
          if (result) {
            setCustomSaveDir()
          } else {
            isCheckActive.value = false;
          }
        } else {
          isCheckActive.value = false;
        }
      }
    })
  }

  function toAllFilesPermissionPage() {
    module.toAllFilesPermissionPage({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status : boolean = data.getBoolean("status")!
          if (!status) {
            showMessage("所有文件访问权限未打开")
          } else {
            showMessage("权限申请完成，可以使用插件")
            isActive();
          }
        } else {
          showMessage(res.message)
        }
      }
    })
  }

  function checkAllFilesPermission() {
    module.checkAllFilesPermission({
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          let data = res.data;
          let status : boolean = data.getBoolean("status")!
          if (!status) {
            toAllFilesPermissionPage();
          } else {
            showMessage("权限申请完成，可以使用插件")
            isActive();
          }
        } else {
          showMessage(res.message)
        }
      }
    })
  }

  //申请插件所需权限
  function requestPermissions() {
    module.requestPermissions({
      params: {
        permissions: [
          "android.permission.READ_EXTERNAL_STORAGE",
          "android.permission.WRITE_EXTERNAL_STORAGE",
          "android.permission.CAMERA"
        ]
      },
      complete: (res : LevenResult) => {
        if (res.code == 0) {
          //判断是否有所有文件访问权限
          checkAllFilesPermission();
        } else {
          showMessage(res.message)
        }
      }
    } as LevenOptions)
  }

  onMounted(() => {
    requestPermissions();
  })
</script>

<style>

</style>

人脸注册组件 ​

在使用插件的地方引入以下代码：

vue
<leven-uts-baiduFace-CameraRegister ref="refLevenRegister"
  style=" position: fixed; left: 0; right: 0; bottom: 0; top: 0;" :config="config" @onEvent="onEvent"
  @onError="onError" @onEventMethod="onEventMethod"></leven-uts-baiduFace-CameraRegister>
vue
<leven-uts-baiduFace-CameraRegister ref="refLevenRegister" style="flex:1;" :configX="config" @onEvent="onEvent"
      @onError="onError" @onEventMethod="onEventMethod"></leven-uts-baiduFace-CameraRegister>

//组件的引用
const refLevenRegister = ref<LevenUtsBaiduFaceCameraRegisterElement | null>(null)

页面示例 ​

vue
<template>
  <view>
    <leven-uts-baiduFace-CameraRegister ref="refLevenRegister"
      style=" position: fixed; left: 0; right: 0; bottom: 0; top: 0;" :config="config" @onEvent="onEvent"
      @onError="onError" @onEventMethod="onEventMethod"></leven-uts-baiduFace-CameraRegister>
    <cover-view style="position: fixed; right: 16px; bottom: 16px;">
      <button type="primary" size="mini" @click="openRegister">开始注册</button>
    </cover-view>
    <uni-popup ref="refPop">
      <view style="width: 600rpx; height: 250px; background-color: #FFFFFF; border-radius: 8px;">
        <view
          style="height: 50px; border-bottom: 1px solid #f2f2f2; flex-direction: row; justify-content: center; align-items: center;">
          <text>注册人脸</text>
        </view>
        <view style=" padding: 16px;">
          <view style="margin-bottom: 16px;">
            <uni-easyinput v-model="params.id" placeholder="请输入用户id"></uni-easyinput>
          </view>
          <view style="margin-bottom: 16px;">
            <uni-easyinput v-model="params.name" placeholder="请输入用户名"></uni-easyinput>
          </view>
          <button type="primary" @click="register">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          //rgb摄像头旋转角度，可传入0、90、180、270四个选项
          rgbVideoDirection: 90,
          //rbg人脸检测角度 默认为0。可传入0、90、180、270四个选项。
          rgbDetectDirection: 270,
          // rbg人脸检测 0：RGB无镜像，1：有镜像
          mirrorDetectRGB: 0,
          //是否显示圆形识别区
          // isFaceRoundView: false,
          //自定义识别区域外颜色
          // outAreaBgColor: "#f2f2f2"
        },
        params: {
          id: "1234",
          name: "leven"
        }
      }
    },
    methods: {
      //显示消息
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      register() {
        this.$refs.refPop.close()
        this.$refs.refLevenRegister.register(this.params);
      },
      openRegister() {
        this.$refs.refPop.open()
      },
      onEvent(e) {
        console.log("onEvent:" + JSON.stringify(e.detail))
      },
      onError(e) {
        console.log("onError:" + JSON.stringify(e.detail))
      },
      onEventMethod(e) {
        console.log("onEventMethod:" + JSON.stringify(e.detail))
        let detail = e.detail;
        let type = detail.type;
        if (type == "register") {
          //注册
          let data = detail.data;
          if (data.code != 0) {
            this.showMessage(data.message)
          } else {
            let resultData = data.data;
            if (resultData.type == "success") {
              this.showMessage("注册成功")
            }
          }
        }
      }
    }
  }
</script>

<style>

</style>
vue
<template>
  <view style="flex: 1;">
    <leven-uts-baiduFace-CameraRegister ref="refLevenRegister" style="flex:1;" :configX="config" @onEvent="onEvent"
      @onError="onError" @onEventMethod="onEventMethod"></leven-uts-baiduFace-CameraRegister>
  </view>
  <view style="position: fixed; right: 16px; bottom: 16px;">
    <button type="primary" size="mini" @click="openRegister">开始注册</button>
  </view>

  <!-- 注册弹窗 -->
  <rice-popup v-model:show="popShow" position="center" radius="8px" :closeable="false">
    <view style="width: 600rpx; height: 250px;">
      <view
        style="height: 50px; border-bottom: 1px solid #f2f2f2; flex-direction: row; justify-content: center; align-items: center;">
        <text>注册人脸</text>
      </view>
      <view style=" padding: 16px;">
        <view style="margin-bottom: 16px;">
          <rice-input v-model="params.id" placeholder="请输入用户id"></rice-input>
        </view>
        <view style="margin-bottom: 16px;">
          <rice-input v-model="params.name" placeholder="请输入用户名"></rice-input>
        </view>
        <button type="primary" @click="register">确定</button>
      </view>
    </view>
  </rice-popup>
</template>

<script lang="uts" setup>
  import JSONObject from 'com.alibaba.fastjson.JSONObject'
  //组件引用
  const refLevenRegister = ref<LevenUtsBaiduFaceCameraRegisterElement | null>(null)

  //弹窗显示状态
  const popShow = ref(false)

  //初始化配置
  const config = ref({
    //rgb摄像头旋转角度，可传入0、90、180、270四个选项
    rgbVideoDirection: 90,
    //rbg人脸检测角度 默认为0。可传入0、90、180、270四个选项。
    rgbDetectDirection: 270,
    // rbg人脸检测 0：RGB无镜像，1：有镜像
    mirrorDetectRGB: 0,
    //是否显示圆形识别区
    // isFaceRoundView: false,
    //自定义识别区域外颜色
    // outAreaBgColor: "#f2f2f2"
  })

  //注册参数
  type RegisterParams = {
    id : string,
    name : string
  }

  const params = ref<RegisterParams>({
    id: "1234",
    name: "leven"
  })

  //显示消息
  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  function openRegister() {
    popShow.value = true
  }

  function register() {
    popShow.value = false
    let registerParams : JSONObject = JSONObject.parse(JSON.stringify(params.value)) as JSONObject
    refLevenRegister.value?.register(registerParams)
  }

  function onEventMethod(e : JSONObject) {
    console.log("onEventMethod:" + JSON.stringify(e))
    let type : string = e.getString("type");
    let data : JSONObject = e.getJSONObject("data");
    if (type == "register") {
      let code = data.getInteger("code");
      let message : string = data.getString("message");
      if (code != 0) {
        showMessage(message)
      } else {
        let resultData : JSONObject = data.getJSONObject("data");
        let resultType = resultData.getString("type");
        if (resultType == "success") {
          showMessage("注册成功")
        }
      }
    }
  }

  function onError(e : JSONObject) {
    console.log("onError:" + JSON.stringify(e))
  }

  function onEvent(e : JSONObject) {
    console.log("onEvent:" + JSON.stringify(e))
  }
</script>

<style>

</style>

识别组件 ​

在使用插件的地方引入以下代码：

vue
<leven-uts-baiduFace-Recognition style="position: fixed; left: 0; right: 0; bottom: 0; top: 0;"
      ref="refLevenRegister" :config="config" @onEvent="onEvent" @onError="onError"
      @onEventMethod="onEventMethod"></leven-uts-baiduFace-Recognition>
vue
<leven-uts-baiduFace-Recognition style="position: fixed; left: 0; right: 0; bottom: 0; top: 0;"
      ref="refLevenRegister" :configX="config" @onEvent="onEvent" @onError="onError"
      @onEventMethod="onEventMethod"></leven-uts-baiduFace-Recognition>

//组件的引用
const refLevenRegister = ref<LevenUtsBaiduFaceRecognitionElement | null>(null)

页面示例 ​

vue
<template>
  <view>
    <leven-uts-baiduFace-Recognition style="position: fixed; left: 0; right: 0; bottom: 0; top: 0;"
      ref="refLevenRegister" :config="config" @onEvent="onEvent" @onError="onError"
      @onEventMethod="onEventMethod"></leven-uts-baiduFace-Recognition>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          //rgb摄像头旋转角度，可传入0、90、180、270四个选项
          rgbVideoDirection: 90,
          //rbg人脸检测角度 默认为0。可传入0、90、180、270四个选项。
          rgbDetectDirection: 270,
          //是否显示圆形识别区
          isFaceRoundView: false,
          // rbg人脸检测镜像 0：RGB无镜像，1：有镜像
          mirrorDetectRGB: 1
        }
      }
    },
    methods: {
      //显示消息
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      onEvent(e) {
        // console.log("onEvent:" + JSON.stringify(e.detail))
        let detail = e.detail || {};
        let type = detail.type || "";
        let data = detail.data || {};
        if (type == "onRecognitionProcess") {
          //识别过程
          let resultData = data.data || {};
          let resuleMessage = resultData.message;
          let resuleCode = resultData.code;
          if (resuleCode != 0) {
            this.showMessage(resuleMessage)
          }
        } else if (type == "onFaceResult") {
          //识别结果
          let resultData = data.data || {};
          let resuleType = resultData.type;
          // let resuleMessage = resultData.message;
          // let resuleCode = resultData.code;
          if (resuleType == "onResultSuccess") {
            //识别成功
            let successData = resultData.data || {};
            let userName = successData.userName;
            this.showMessage("欢迎您：" + userName)
          } else {
            //识别失败
            this.showMessage("识别失败")
          }
        }
      },
      onError(e) {
        console.log("onError:" + JSON.stringify(e.detail))
      },
      onEventMethod(e) {
        console.log("onEventMethod:" + JSON.stringify(e.detail))
      }
    }
  }
</script>

<style>

</style>
vue
<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <leven-uts-baiduFace-Recognition style="position: fixed; left: 0; right: 0; bottom: 0; top: 0;"
      ref="refLevenRegister" :configX="config" @onEvent="onEvent" @onError="onError"
      @onEventMethod="onEventMethod"></leven-uts-baiduFace-Recognition>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="uts" setup>
  import JSONObject from 'com.alibaba.fastjson.JSONObject'

  //初始化配置
  const config = ref({
    //rgb摄像头旋转角度，可传入0、90、180、270四个选项
    rgbVideoDirection: 90,
    //rbg人脸检测角度 默认为0。可传入0、90、180、270四个选项。
    rgbDetectDirection: 270,
    // rbg人脸检测 0：RGB无镜像，1：有镜像
    mirrorDetectRGB: 1,
    //是否显示圆形识别区
    isFaceRoundView: false
  })

  //显示消息
  function showMessage(message : string) {
    uni.showToast({
      title: message,
      icon: "none"
    })
  }

  function onEventMethod(e : JSONObject) {
    console.log("onEventMethod:" + JSON.stringify(e))
  }

  function onError(e : JSONObject) {
    console.log("onError:" + JSON.stringify(e))
  }

  function onEvent(e : JSONObject) {
    // console.log("onEvent:" + JSON.stringify(e))
    let type : string = e.getString("type");
    let data : JSONObject = e.getJSONObject("data");
    if (type == "onRecognitionProcess") {
      //识别过程
      let resultData = data.getJSONObject("data")!;
      let resuleMessage = resultData.getString("message")!;
      let resuleCode = resultData.getInteger("code")!;
      if (resuleCode != 0) {
        showMessage(resuleMessage)
      }
    } else if (type == "onFaceResult") {
      //识别结果
      let resultData = data.getJSONObject("data")!;
      let resuleType = resultData.getString("type")!;
      if (resuleType == "onResultSuccess") {
        //识别成功
        let successData = resultData.getJSONObject("data")!;
        let userName = successData.getString("userName");
        showMessage("欢迎您：" + userName)
      } else {
        //识别失败
        showMessage("识别失败")
      }
    }
  }
</script>

<style>

</style>

演示界面 ​

在线激活

离线激活

批量激活

演示程序首页

相机人脸注册

人脸管理

批量注册

单个注册

全屏识别

圆形识别

自定义圆角

人证核检

人脸属性

批量注册进度

删除人脸