logo
当前页

实现数字人视频通话

本文档用于说明如何快速集成客户端 SDK (ZEGO Express SDK 和数字人 SDK)并实现与智能体进行视频互动。

数字人介绍

仅需一张上半身的真人或二次元的照片或图片,即可获得1080P、口型准确、形象逼真的数字人。通过搭配AI Agent产品使用,即可快速实现整体2s内的与AI数字人的视频互动聊天,适用于数字人 1V1 互动视频、数字人客服、数字人直播等多种场景。

  • 更自然的驱动效果:支持轻微的身体动作,面部表情自然不变形,相较语音通话互动更真实沉浸;
  • 多语种口型准确:唇形准确自然,尤其针对中英文效果更佳;
  • 互动超低延迟:数字人驱动延迟 < 500ms,结合 AI Agent 互动延迟 < 2s;
  • 更高清晰度:真实 1080P 效果,比传统图片数字人清晰度提高20%+

可跳转至体验 Demo下载体验。

前提条件

  • 已在 ZEGO 控制台 创建项目,并申请有效的 AppID 和 AppSign,详情请参考 控制台 - 项目信息
  • 已联系 ZEGO 技术支持开通数字人 PaaS 服务和相关接口的权限。
  • 已联系 ZEGO 技术支持创建数字人。
  • 已联系 ZEGO 技术支持获取支持 AI 降噪的 ZEGO Express SDK,并集成到您的项目中。

示例代码

以下是客户端示例代码,,您可以参考示例代码来实现自己的业务逻辑。

以下视频演示了如何跑通服务端和客户端(Web)示例代码并跟数字人智能体进行视频互动。

整体业务流程

  1. 服务端,参考业务后台快速开始文档跑通业务后台示例代码,部署好业务后台
    • 接入实时互动 AI Agent API 管理智能体。
  1. 客户端,跑通示例代码
    • 通过业务后台创建和管理智能体。
    • 集成 ZEGO Express SDK 完成实时通信。

完成以上两个步骤后即可实现将智能体加入房间并与真实用户进行实时互动。

sequenceDiagram participant 客户端 participant 业务后台 participant AI Agent 后台 业务后台->>业务后台: 注册智能体 业务后台->>AI Agent 后台: 注册智能体 AI Agent 后台-->>业务后台: 客户端->>业务后台: 通知业务后台开始通话 业务后台->>AI Agent 后台: 创建数字人智能体实例 AI Agent 后台->>AI Agent 后台: 数字人智能体登录房间并推流、拉用户流 AI Agent 后台-->>业务后台: 数字人配置 业务后台-->>客户端: 数字人配置 客户端->>客户端: 初始化数字人 SDK 并设置数字人配置 客户端->>业务后台: 请求 Token 业务后台-->>客户端: Token 客户端->>客户端: 初始化 ZEGO Express SDK 后登录房间并推流 客户端->>客户端: 用户拉智能体流并且把帧数据和 SEI 数据传给数字人 SDK 客户端->>业务后台: 通知业务后台停止通话 业务后台->>AI Agent 后台: 删除智能体实例 AI Agent 后台-->>业务后台: 业务后台-->>客户端: 客户端->>客户端: 用户停止推流并退出房间 客户端->>客户端: 用户退出数字人 SDK

核心能力实现

集成 ZEGO Express SDK

请参考 集成 SDK > 方式 2 手动集成 SDK。集成 SDK 后按以下步骤初始化 ZegoExpressEngine。

1 加载AI降噪模块

2 实例化 ZegoExpressEngine

3 检查系统要求(WebRTC 支持和麦克风权限)

Untitled
import { ZegoExpressEngine } from "zego-express-engine-webrtc";
import { VoiceChanger } from "zego-express-engine-webrtc/voice-changer";

const appID = 1234567 // 从即构控制台获取
const server = 'xxx' // 从即构控制台获取
// 加载AI降噪模块
ZegoExpressEngine.use(VoiceChanger);
// 实例化 ZegoExpressEngine传入appId和server等配置
const zg = new ZegoExpressEngine(appID, server);
// 检查系统要求
const checkSystemRequirements = async () => {
    // 检测是否支持webRTC
    const rtc_sup = await zg.checkSystemRequirements("webRTC");
    if (!rtc_sup.result) {
      // 浏览器不支持webrtc
  }
    // 检测是否开启麦克风权限
    const mic_sup = await zg.checkSystemRequirements("microphone");
    if (!mic_sup.result) {
      // 未开启麦克风权限
  }
}
checkSystemRequirements()
1
Copied!

通知业务后台开始通话

可在客户端真实用户进入房间后立即通知业务后台开始通话,异步调用可加降低通话接通时间。业务后台收到开始通话通知后,使用与客户端相同的 roomID 及关联的 userID 和 streamID 创建数字人智能体实例,这样数字人智能体就能与真实用户在同一个房间内进行相互推拉流实现视频互动。

请求业务后台的时候需要带上数字人参数,参数包括 digital_human_idconfig_id

  • digital_human_id 是数字人 ID,请联系 ZEGO 技术支持获取。
  • config_id 是数字人的配置 ID,不同平台使用不同的数字人配置, 数字人服务会根据 config_id 优化不同平台上的性能和效果,Android/iOS 请填写 mobile,Web 请填写 web

用户进入房间并推流

真实用户登录房间后推流。

说明

在此场景下需要开启 AI 降噪以获得更好的效果。

登录用的 token 需要从您的业务后台获取,请参考完整示例代码。

说明

请确保 roomID、userID、streamID 在一个 ZEGO APPID 下是唯一的。

  • roomID: 由用户自己定义生成规则,会用来登录 Express SDK 的房间。仅支持数字,英文字符 和 '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', ''。如果需要与 Web SDK 互通,请不要使用 '%'。
  • userID: 长度不超过32字节。仅支持数字,英文字符 和 '~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '=', '-', '`', ';', '’', ',', '.', '<', '>', ''。如果需要与 Web SDK 互通,请不要使用 '%'。
  • streamID: 长度不超过256字节。仅支持数字,英文字符 和 '-', '_'。
客户端登录房间并推流
const userId = "" // 登录 Express SDK房间用户ID
const roomId = "" // RTC 房间 ID
const userStreamId = "" // 用户推流 ID
async function enterRoom() {
  try {
    // 生成 RTC Token [参考文档](https://doc-zh.zego.im/article/7646)
    const token = await Api.getToken();
    // 登录房间
    await zg.loginRoom(roomId, token, {
      userID: userId,
      userName: "",
    });

    // 创建本地音频流
    const localStream = await zg.createZegoStream({
      camera: {
        video: false,
        audio: true,
      },
    });
    if (localStream) {
      // 推送本地流
      await zg.startPublishingStream(userStreamId, localStream);
      // 开启AI降噪(需要特殊编包的 ZEGO Express SDK)
      const enableResult = await zg.enableAiDenoise(localStream, true);
      if (enableResult.errorCode === 0) {
        return zg.setAiDenoiseMode(localStream, 1);
      }
    }
  } catch (error) {
    console.error("进入房间失败:", error);
    throw error;
  }
}
enterRoom()
1
Copied!

拉智能体流

默认只有一个真实用户及智能体在同一个房间内,所以拉流时默认新增的就是智能体流。

客户端拉智能体的流
// 监听远端流更新事件
function setupEvent() {
  zg.on("roomStreamUpdate",
    async (roomID, updateType, streamList) => {
      if (updateType === "ADD" && streamList.length > 0) {
        try {
          for (const stream of streamList) {
            // 拉智能体流
            const mediaStream = await zg.startPlayingStream(stream.streamID);
            if (!mediaStream) return;
            const remoteView = await zg.createRemoteStreamView(mediaStream);
            if (remoteView) {
             // 这里需要页面上有个id为remoteSteamView的容器接收智能体流 [参考文档](https://doc-zh.zego.im/article/api?doc=Express_Video_SDK_API~javascript_web~class~ZegoStreamView)
              remoteView.play("remoteSteamView", {
                enableAutoplayDialog: false,
              });
            }
          }
        } catch (error) {
          console.error("拉流失败:", error);
        }
      }
    }
  );
}
1
Copied!

恭喜你🎉!完成这一步骤后,您已经可以用语音问智能体任何问题,智能体都会回答您的问题!

退出房间结束通话

客户端调用退出登录接口退出房间,并停止推拉流。同时通知业务后台本次通话结束。业务后台收到结束通话通知后会删除智能体实例,智能体实例会自动退出房间并停止推拉流。最后再调用数字人 SDK 退出接口,这样一次完整的互动就结束了。

Untitled
// 退出房间
async function stopCall() {
  try {
    const response = await fetch(`${YOUR_SERVER_URL}/api/stop`, { // YOUR_SERVER_URL 为您的业务后台地址
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      }
    });

    const data = await response.json();
    console.log('结束通话结果:', data);
    return data;
  } catch (error) {
    console.error('结束通话失败:', error);
    throw error;
  }
}
stopCall();
zg.destroyLocalStream(localStream);
zg.logoutRoom();
1
Copied!

以上就是您实现与数字人智能体进行实时互动的完整核心流程。

ZEGO Express SDK 最佳配置实践

为了获得最佳的音频通话体验,建议按照以下最佳实践配置 ZEGO Express SDK。这些配置可以显著提升智能体视频交互的质量。

拉流前设置:

  • 设置拉流播放缓存自适应调整的区间范围,优化拉流体验
Untitled
const playOption = {
  jitterBufferTarget: 500,
}
zg.startPlayingStream(streamId, playOption);
1
Copied!
  • 开启传统音频 3A 处理(回声消除AEC、自动增益控制AGC、噪声抑制ANS)
  • 设置房间的使用场景为高品质语聊房场景,SDK 会针对不同的场景采取不同的优化策略
  • 加载 AI 降噪模块,设置均衡模式模式(该功能需要联系 ZEGO 技术支持获取对应版本的 ZEGOExpress SDK)
  • 推流时,设置推流参数配置自动切换为可用的 videoCodec
Untitled
// 引入必要的模块
import { ZegoExpressEngine } from "zego-express-engine-webrtc";
import { VoiceChanger } from "zego-express-engine-webrtc/voice-changer";

// 加载音频处理模块,需要在 new ZegoExpressEngine 前调用
ZegoExpressEngine.use(VoiceChanger);

// 实例化 ZegoExpressEngine,设置房间的使用场景为高品质语聊房场景
const zg = new ZegoExpressEngine(appid, server, { scenario: 7 })

// 传统音频 3A 处理,SDK 默认开启

// 创建本地媒体流
const localStream = await zg.createZegoStream();

// 创建本地媒体流后开启 AI 降噪
await zg.enableAiDenoise(localstream, true);
// 设置为AIBalanced
await zg.setAiDenoiseMode(localstream, 1);

// 推送本地媒体流,需要设置自动切换为可用的 videoCodec
await zg.startPublishingStream(userStreamId, localStream, {
  enableAutoSwitchVideoCodec: true,
});

// 检查系统要求
async function checkSystemRequirements() {
  // 检测是否支持WebRTC
  const rtcSupport = await zg.checkSystemRequirements("webRTC");
  if (!rtcSupport.result) {
    console.error("浏览器不支持WebRTC");
    return false;
  }
  
  // 检测麦克风权限
  const micSupport = await zg.checkSystemRequirements("microphone");
  if (!micSupport.result) {
    console.error("未获得麦克风权限");
    return false;
  }
  
  return true;
}
1
Copied!

其他优化建议

  • 浏览器兼容性:推荐使用 Chrome、Firefox、Safari 等现代浏览器的最新版本
  • 网络环境:确保网络连接稳定,建议使用有线网络或信号良好的Wi-Fi
  • 音频设备:使用质量较好的麦克风和扬声器
  • 页面优化:避免在同一页面运行过多JavaScript任务,可能会影响音频处理性能
  • HTTPS环境:在生产环境中使用HTTPS协议,以确保获取麦克风权限

Previous

快速发起语音通话

Next

展示字幕