使用方法

安卓讯飞虚拟数字人交互UTS原生插件是基于虚拟人SDK是基于科大讯飞虚拟人相关能力进行融合和封装的UTS插件，以便为客户提供更便捷的接入方式，快速打造属于自己的虚拟人业务场景。插件支持uniapp和uniapp x，支持vue2和vue3的选项式和组合式

注意

如果插件不符合你的要求可以联系作者优化

插件使用注意事项

如果您在使用插件的过程中有任何问题，可以联系作者，作者将全力协助您使用插件
本文档同时提供了uniapp的用法示例和uniappx的用法示例，插件市场导入的示例项目仅为uniapp的用法示例，如果您需要uniappx的示例项目可以通过下方的链接下载示例

https://pan.baidu.com/s/1qAW_RBoSvv2R-xzsHZYlng?pwd=urr1

sdk文档地址

https://www.yuque.com/xnrpt/bbc1du/nvg8cabgl4ycqvtv

联系作者

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

插件地址

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

使用流程

初始化sdk
创建播放器 创建播放器需要在组件中使用，调用组件的创建播放器的方法
设置虚拟人参数
开启虚拟人
发送虚拟人数据

API用法

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

uniappuniappx

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

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

组件用法

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

uniappuniappx

vue

<leven-uts-avatar ref="refXfAvatarPlayer" style="height: 500px;" :config="config" @onEventMethod="onEventMethod"
      @onError="onError" @onEvent="onEvent"></leven-uts-avatar>

vue

<leven-uts-avatar ref="refAvatarPlayer" style="height: 500px;" :configX="config" @onEventMethod="onEventMethod"
      @onError="onError" @onEvent="onEvent"></leven-uts-avatar>

//组件的引用
const refAvatarPlayer = ref<LevenUtsAvatarElement | null>(null)

用法示例

api用法示例

uniappuniappx

vue

<template>
  <view class="content">
    <!-- sdk版本号 -->
    <sdk-version-nvue @onComMessage="onComMessage"></sdk-version-nvue>
    <!-- sdk初始化 -->
    <init-nvue :permissonIsEnd="permissonIsEnd" @onComMessage="onComMessage"></init-nvue>
    <!-- 全局参数设置 -->
    <global-params-nvue @onCreatePlayer="createPlayer"></global-params-nvue>
    <!-- 文本驱动交互 -->
    <text-active-nvue></text-active-nvue>
    <!-- 播放器组件 -->
    <player-nvue ref="refPlayer"></player-nvue>
  </view>
</template>

<script>
  import sdkVersionNvue from './component/sdk-version.nvue';
  import initNvue from './component/init.nvue';
  import globalParamsNvue from './component/global-params.nvue';
  import playerNvue from './component/player.nvue';
  import textActiveNvue from './component/text-active.nvue';
  import * as module from "@/uni_modules/leven-uts-avatar"
  export default {
    components: {
      sdkVersionNvue,
      initNvue,
      globalParamsNvue,
      playerNvue,
      textActiveNvue
    },
    data() {
      return {
        //权限是否申请结束
        permissonIsEnd: false
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.requestPermissions();
      })
    },
    methods: {
      //显示消息
      showMessage(message) {
        uni.showToast({
          title: message,
          icon: "none"
        })
      },
      createPlayer(data) {
        this.$refs.refPlayer.createPlayer(data);
      },
      toAllFilesPermissionPage() {
        module.toAllFilesPermissionPage({
          complete: (res) => {
            if (res.code == 0) {
              let data = res.data;
              if (!data.status) {
                this.showMessage("所有文件访问权限未打开")
              } else {
                this.showMessage("权限申请完成，可以使用插件")
                this.permissonIsEnd = true;
              }
            } 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.permissonIsEnd = true;
              }
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      //申请插件所需权限
      requestPermissions() {
        module.requestPermissions({
          params: {
            permissions: [
              "android.permission.READ_EXTERNAL_STORAGE",
              "android.permission.WRITE_EXTERNAL_STORAGE",
              "android.permission.RECORD_AUDIO",
              "android.permission.READ_PHONE_STATE"
            ]
          },
          complete: (res) => {
            if (res.code == 0) {
              //判断是否有所有文件访问权限
              this.checkAllFilesPermission();
            } else {
              this.showMessage(res.message)
            }
          }
        })
      },
      onComMessage(e) {
        this.showMessage(e)
      }
    }
  }
</script>

<style>

</style>

vue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex:1">
  <!-- #endif -->
    <!-- sdk版本号 -->
    <sdk-version @onComMessage="showMessage"></sdk-version>
    <!-- sdk初始化 -->
    <init-vue :permissonIsEnd="permissonIsEnd" @onComMessage="showMessage"></init-vue>
    <!-- 全局参数设置 -->
    <global-params-vue @onCreatePlayer="createPlayer"></global-params-vue>
    <!-- 文本驱动交互 -->
    <text-active></text-active>
    <!-- 播放器组件 -->
    <avatar-player ref="refPlayer"></avatar-player>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import SdkVersion from "./components/sdk-version.uvue"
  import InitVue from "./components/init.uvue"
  import globalParamsVue from "./components/global-params.uvue";
  import AvatarPlayer from "./components/avatar-player.uvue";
  import TextActive from "./components/text-active.uvue"
  import * as module from "@/uni_modules/leven-uts-avatar"
  import { LevenResult, LevenOptions } from "@/uni_modules/leven-uts-avatar"

  const permissonIsEnd = ref<boolean>(false)
  const refPlayer = ref<ComponentPublicInstance | null>(null)

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

  function createPlayer(data : UTSJSONObject) {
    refPlayer.value?.$callMethod("createPlayer", data)
  }

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

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

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

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

<style>

</style>

组件用法示例

uniappuniappx

vue

<template>
  <uni-card title="播放器组件">
    <leven-uts-avatar ref="refXfAvatarPlayer" style="height: 500px;" :config="config" @onEventMethod="onEventMethod"
      @onError="onError" @onEvent="onEvent"></leven-uts-avatar>
  </uni-card>
</template>

<script>
  export default {
    data() {
      return {
        config: {}
      }
    },
    methods: {
      createPlayer(data) {
        this.$refs.refXfAvatarPlayer.createPlayer({
          stream: data.stream,
          renderTimeout: data.renderTimeout
        })
      },
      onEventMethod(e) {
        // console.log("onEventMethod:" + JSON.stringify(e.detail))
      },
      onError(e) {
        console.log("onError:" + JSON.stringify(e.detail))
      },
      onEvent(e) {
        console.log("onEvent:" + JSON.stringify(e.detail))
      }
    }
  }
</script>

<style>

</style>

vue

<template>
  <lux-card title="播放器组件">
    <leven-uts-avatar ref="refAvatarPlayer" style="height: 500px;" :configX="config" @onEventMethod="onEventMethod"
      @onError="onError" @onEvent="onEvent"></leven-uts-avatar>
  </lux-card>
</template>

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

  const config = ref({})
  function createPlayer(data : UTSJSONObject) {
    // console.log("进入player: " + JSON.stringify(data))
    let params = JSONObject.parse(JSON.stringify(data)) as JSONObject
    refAvatarPlayer.value?.createPlayer(params)
  }

  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))
  }

  defineExpose({ createPlayer })
</script>

<style>

</style>

示例说明

本文档的用法示例仅为页面部分代码，完整代码请导入示例程序查看

使用方法 ​

插件使用注意事项 ​

sdk文档地址 ​

联系作者 ​

插件地址 ​

使用流程 ​

API用法 ​

组件用法 ​

用法示例 ​

api用法示例 ​

组件用法示例 ​

示例说明 ​

使用方法

插件使用注意事项

sdk文档地址

联系作者

插件地址

使用流程

API用法

组件用法

用法示例

api用法示例

组件用法示例

示例说明