更新记录

1.0.0（2026-03-03）

初始化 AI实时对话火山引擎。

平台兼容性

uni-app(4.81)

Vue2 Vue2插件版本 Vue3 Vue3插件版本 Chrome Safari app-vue app-nvue app-nvue插件版本 Android iOS iOS插件版本 鸿蒙
√ 1.0.0 √ 1.0.0 - - - √ 1.0.0 × 12 1.0.0 -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

RTC VolcEngine 组件使用示例

安装

将 rtc-volcengine 插件放入 uni_modules 目录。

Vue 3 示例 (Composition API)

<template>
  <view class="container">
    <rtc-volcengine ref="rtcRef" @onTokenWillExpire="handleTokenWillExpire" />

    <button @click="joinRoom">加入房间</button>
    <button @click="leaveRoom">离开房间</button>
    <button @click="interruptAI">打断AI</button>
    <button @click="toggleMute">静音/取消静音</button>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const rtcRef = ref(null)
const isMuted = ref(false)

// 初始化引擎
onMounted(() => {
  rtcRef.value.initEngine('YOUR_APP_ID', false, (success) => {
    console.log('引擎初始化:', success ? '成功' : '失败')
  })
})

// 销毁引擎
onUnmounted(() => {
  rtcRef.value.destroyEngine()
})

// 加入房间
const joinRoom = () => {
  rtcRef.value.joinRoom(
    'ROOM_ID',
    'USER_ID', 
    'TOKEN',
    true,   // publishAudio
    false,  // publishVideo
    true,   // subscribeAudio
    false,  // subscribeVideo
    true,   // startAudioCapture
    false,  // startVideoCapture
    0,      // roomProfile
    () => console.log('加入成功'),
    (err) => console.log('加入失败:', err)
  )
}

// 离开房间
const leaveRoom = () => {
  rtcRef.value.leaveRoom()
}

// 打断AI说话
const interruptAI = () => {
  const aiUserId = 'AI_BOT_ID'
  rtcRef.value.sendInterruptMessage(aiUserId)
}

// 静音/取消静音
const toggleMute = () => {
  isMuted.value = !isMuted.value
  rtcRef.value.muteAudioCapture(isMuted.value)
}

// Token 即将过期回调
const handleTokenWillExpire = async () => {
  console.log('Token 即将过期，请更新')

  try {
    // 从服务端获取新 Token
    const newToken = await fetchNewToken()
    // 更新 Token
    rtcRef.value.updateToken(newToken)
    console.log('Token 更新成功')
  } catch (e) {
    console.error('Token 更新失败:', e)
  }
}

// 模拟获取新 Token
const fetchNewToken = async () => {
  // 实际项目中调用你的后端接口获取新 Token
  const response = await fetch('/api/rtc/token')
  return response.json().token
}
</script>

Vue 3 示例 (Options API)

<template>
  <view class="container">
    <rtc-volcengine ref="rtcRef" @onTokenWillExpire="handleTokenWillExpire" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      isMuted: false
    }
  },

  mounted() {
    this.initRTC()
  },

  beforeUnmount() {
    this.$refs.rtcRef.destroyEngine()
  },

  methods: {
    initRTC() {
      this.$refs.rtcRef.initEngine('YOUR_APP_ID', false, (success) => {
        console.log('引擎初始化:', success)
      })
    },

    joinRoom() {
      this.$refs.rtcRef.joinRoom(
        'ROOM_ID',
        'USER_ID',
        'TOKEN',
        true, false, true, false,
        true, false, 0,
        () => console.log('加入成功'),
        (err) => console.log('加入失败:', err)
      )
    },

    leaveRoom() {
      this.$refs.rtcRef.leaveRoom()
    },

    interruptAI() {
      this.$refs.rtcRef.sendInterruptMessage('AI_BOT_ID')
    },

    toggleMute() {
      this.isMuted = !this.isMuted
      this.$refs.rtcRef.muteAudioCapture(this.isMuted)
    },

    async handleTokenWillExpire() {
      const newToken = await this.fetchNewToken()
      this.$refs.rtcRef.updateToken(newToken)
    },

    async fetchNewToken() {
      // 调用后端接口获取新 Token
      const res = await this.$http.get('/api/rtc/token')
      return res.data.token
    }
  }
}
</script>

Vue 2 示例

<template>
  <view class="container">
    <rtc-volcengine ref="rtcRef" @onTokenWillExpire="handleTokenWillExpire" />

    <button @click="joinRoom">加入房间</button>
    <button @click="leaveRoom">离开房间</button>
    <button @click="interruptAI">打断AI</button>
    <button @click="toggleMute">静音/取消静音</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isMuted: false
    }
  },

  mounted() {
    this.initRTC()
  },

  beforeDestroy() {
    if (this.$refs.rtcRef) {
      this.$refs.rtcRef.destroyEngine()
    }
  },

  methods: {
    initRTC() {
      this.$refs.rtcRef.initEngine('YOUR_APP_ID', false, (success) => {
        console.log('引擎初始化:', success)
      })
    },

    joinRoom() {
      this.$refs.rtcRef.joinRoom(
        'ROOM_ID',
        'USER_ID',
        'TOKEN',
        true,   // publishAudio
        false,  // publishVideo
        true,   // subscribeAudio
        false,  // subscribeVideo
        true,   // startAudioCapture
        false,  // startVideoCapture
        0,      // roomProfile
        () => {
          console.log('加入房间成功')
        },
        (err) => {
          console.log('加入房间失败:', err)
        }
      )
    },

    leaveRoom() {
      this.$refs.rtcRef.leaveRoom()
    },

    interruptAI() {
      this.$refs.rtcRef.sendInterruptMessage('AI_BOT_ID')
    },

    toggleMute() {
      this.isMuted = !this.isMuted
      this.$refs.rtcRef.muteAudioCapture(this.isMuted)
    },

    async handleTokenWillExpire() {
      console.log('Token 即将过期')
      try {
        const newToken = await this.fetchNewToken()
        this.$refs.rtcRef.updateToken(newToken)
        console.log('Token 已更新')
      } catch (e) {
        console.error('Token 更新失败:', e)
      }
    },

    async fetchNewToken() {
      const res = await this.$u.get('/api/rtc/token')
      return res.token
    }
  }
}
</script>

事件回调列表

事件名 参数 说明
onRoomStateChanged { roomId, uid, state, extraInfo } 房间状态变化
onUserJoined { roomId, uid, reason } 用户加入
onUserLeave { roomId, uid, reason } 用户离开
onLeaveRoom { roomId, duration, txBytes, rxBytes } 离开房间统计
onNetworkQuality { roomId, uid, txQuality, rxQuality } 网络质量
onLocalAudioProperties { volume } 本地音频属性
onRemoteAudioProperties { uid, volume } 远端音频属性
onSubtitleMessage { userId, text, language, mode, sequence, definite } 字幕消息
onRoomBinaryMessage { msgid, userId, messageType, message } 二进制消息
onRecordingState { state, errorCode, filePath, duration, fileSize } 录制状态
onConnectionStateChanged { state } 连接状态变化
onTokenWillExpire {} Token 即将过期

方法列表

方法 参数 说明
initEngine(appId, isGameScene, callback) appId: string, isGameScene: boolean, callback: function 初始化引擎
joinRoom(roomId, userId, token, ...) 见下方详细参数 加入房间
leaveRoom() - 离开房间
destroyEngine() - 销毁引擎
updateToken(token) token: string 更新 Token
muteAudioCapture(mute) mute: boolean 静音/取消静音
sendInterruptMessage(aiUserId) aiUserId: string 打断AI说话
sendUserBinaryMessage(userId, jsonString) userId: string, jsonString: string 发送点对点二进制消息
enableLocalVideo(enable) enable: boolean 启用/禁用本地视频
enableLocalAudio(enable) enable: boolean 启用/禁用本地音频
switchCamera() - 切换摄像头

joinRoom 参数说明

joinRoom(
  roomId,           // 房间ID
  userId,           // 用户ID
  token,            // Token
  publishAudio,     // 是否发布音频
  publishVideo,     // 是否发布视频
  subscribeAudio,   // 是否订阅音频
  subscribeVideo,   // 是否订阅视频
  startAudioCapture,// 是否开始音频采集
  startVideoCapture,// 是否开始视频采集
  roomProfile,      // 房间配置文件 (0=通信, 1=直播)
  success,          // 成功回调
  fail              // 失败回调
)

Token 过期处理流程

┌─────────────────────────────────────────────────────────────┐
│                      Token 生命周期                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 加入房间时传入 Token                                     │
│     │                                                       │
│     ▼                                                       │
│  2. 正常通话中...                                            │
│     │                                                       │
│     ▼                                                       │
│  3. Token 过期前 30 秒，触发 onTokenWillExpire 回调          │
│     │                                                       │
│     ▼                                                       │
│  4. 调用后端接口获取新 Token                                  │
│     │                                                       │
│     ▼                                                       │
│  5. 调用 updateToken(newToken) 更新 Token                    │
│     │                                                       │
│     ▼                                                       │
│  6. 继续正常通话...                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

注意事项

  1. Token 有效期：建议设置合理的有效期，并在过期前通过回调更新
  2. 打断 AI：sendInterruptMessage 使用特殊的二进制格式，内部已处理
  3. 静音状态：muteAudioCapture(true) 会静音本地音频采集
  4. 内存管理：离开页面时务必调用 destroyEngine() 释放资源

隐私、权限声明

1. 本插件需要申请的系统权限列表：

iOS: NSCameraUsageDescription, NSMicrophoneUsageDescription, NSPhotoLibraryAddUsageDescription;相机、麦克风、存储权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。