aicall-vue3

基于 Vue 3 + Element Plus 的 AI 通话组件库，支持语音通话、数字人、视觉通话等多种模式。

安装

npm install aicall-vue3

安装依赖

本库需要以下 peer dependencies，请确保在你的项目中已安装：

npm install vue@^3.4.0 element-plus@^2.5.0 @element-plus/icons-vue@^2.3.1 vue-router@^4.2.5 pinia@^2.1.7 vue-i18n@^9.9.0 [email protected]

使用

1. 引入样式

// main.ts
import 'aicall-vue3/dist/style.css'

2. 使用组件

<template>
  <div>
    <!-- PC 端通话组件 -->
    <AICallPC 
      :controller="controller" 
      @endCall="handleEndCall" 
    />
    
    <!-- 移动端通话组件 -->
    <AICallMobileCall 
      :controller="controller"
      :agent-type="agentType"
      :user-id="userId"
      :user-token="userToken"
      @exit="handleExit"
    />
    
    <!-- 移动端聊天组件 -->
    <AICallMobileChat 
      :rc="runConfig"
      :user-id="userId"
      :user-token="userToken"
      @exit="handleExit"
    />
    
    <!-- 配置管理组件 -->
    <ConfigManager />
  </div>
</template>

<script setup lang="ts">
import { AICallPC, AICallMobileCall, AICallMobileChat, ConfigManager } from 'aicall-vue3'
import { AICallAgentType } from 'aliyun-auikit-aicall'

// 你的控制器实例
const controller = null // 需要根据实际情况初始化

const agentType = AICallAgentType.VoiceAgent
const userId = 'your-user-id'
const userToken = 'your-user-token'

const handleEndCall = () => {
  console.log('通话结束')
}

const handleExit = () => {
  console.log('退出')
}
</script>

3. 使用组合式函数

import { useRunConfig, loadRunConfig } from 'aicall-vue3'

const { config, isLoading, error } = useRunConfig()

// 加载配置
await loadRunConfig()

4. 使用控制器

import { AUIAICallStandardController } from 'aicall-vue3'

const controller = new AUIAICallStandardController(userId, token)
controller.appServer = 'https://your-app-server.com'

// 开始通话
await controller.start()

组件说明

AICallPC

PC 端通话组件，支持语音、数字人、视觉通话模式。

AICallMobileCall

移动端通话组件，适配移动端交互。

AICallMobileChat

移动端聊天组件，支持文本对话。

ConfigManager

配置管理组件，用于管理 AI 通话相关配置。

类型定义

import type { AICallRunConfig } from 'aicall-vue3'

interface AICallRunConfig {
  region?: string
  appServer: string
  voiceAgentId?: string
  avatarAgentId?: string
  visionAgentId?: string
  videoAgentId?: string
  chatAgentId: string
  // ... 更多配置项
}

国际化

import { i18n, setLanguage } from 'aicall-vue3'

// 设置语言
setLanguage('zh') // 或 'en'

许可证

MIT