如何在7分钟内创建实时AI视频头像

如果借助人工智能，您可以将枯燥乏味的静态文本和音频内容转化为精彩的视频，那会怎样？有了人工智能视频头像生成器，您可以轻松创建高质量的视频，从简单的文本或音频开始，吸引观众的注意力。

这些AI视频生成器用途广泛，既可以部署在应用程序中作为客户支持代理，提供更具吸引力的支持并提升客户满意度，也可以用作教育工具，让学生参与互动式学习环境。此外，它们还可以用来创建虚拟助手，引导用户快速上手产品或工具，而无需查阅文档。

本教程将指导您使用 AI 视频头像生成器Simli设置和实现实时 AI 视频头像。Simli 为开发者提供语音转视频 API，用于创建具有逼真动画角色、真实头部动作和同步语音的唇形同步AI 头像。

按照本指南，您将学会如何通过语音输入快速创建视频头像，并将其部署到交互式项目中。那么，让我们马上开始吧！

该项目的完整源代码可在GitHub上找到。

先决条件

你应该拥有：

• 对 JavaScript 和 React 有基本的了解。
• 您的计算机上已安装Node和 Node 包管理器 (NPM)。

在设置 API 环境并使用 Simli API 创建实时 AI 视频头像之前，让我们先简要了解一下使用 Simli 创建 AI 视频头像所需的步骤。

使用 Simli 创建 AI 视频头像的步骤：

1. 获取 API 密钥
2. 选择面容 ID
3. 初始化 Simli 客户端
4. 调用该simliClient.start()函数以设置 WebRTC 连接
5. 使用流媒体音频sendAudioData()

几分钟内即可搭建您的 API 环境

首先，请在 Simli 注册以获取您的 API 密钥。为了方便快捷地登录，您可以选择 Google 帐户。
成功创建帐户后，您将被重定向到用户个人资料控制面板，在那里您可以生成 API 密钥并跟踪您的 API 使用情况。

点击上方图标复制您的 API 密钥并妥善保管。获取 API 密钥后，请选择要在前端显示的头像。

选择你的AI化身

Simli 提供可通过其可用面孔访问的示例 AI 头像，并且不断添加新的头像。

以下是一些可供选择的面孔：

要获取每张人脸的 ID，请复制姓名后面的随机文本。例如，Jenna 的 ID 将是tmp9i8bbq7c。

如果您不想使用任何现有的头像，Simli 提供了一个创建头像的工具，您只需上传图片即可创建自定义头像。不过，本教程将使用一个现有的头像。

现在你已经有了面部 ID 和 Simli API 密钥，让我们创建一个 Next.js 应用。

创建一个 Next.js 应用

要启动 Next.js 应用程序，请打开终端，cd进入要创建应用程序的目录，然后运行以下命令：

npx create-next-app@latest simli-demo

此命令会提示您一些关于配置 Next.js 应用程序的问题。以下是您应该如何回答每个问题：

请按上述按钮选择每个问题的答案enter。

安装依赖项

接下来，运行以下代码安装simli-clientand软件包：AudioContext

npm install simli-client standardized-audio-context

SimliClient ，也称为Simli 的 WebRTC前端客户端，是一款将实时视频和音频流功能集成到使用 WebRTC 的 Web 应用程序中的工具。它可以让您避免手动配置WebRTC。

AudioContext用于对音频进行降采样，并将其转换为可以SimliClient处理的块。

在您的项目中初始化 SimliClient

在你的 Next.js 应用程序中，找到该page.js文件并粘贴以下代码：

// src/app//page.js
...
// Declare video and audio ref 
... 

import { useRef, useEffect } from 'react';

function Home() {
  const videoRef = useRef(null);
  const audioRef = useRef(null);

return (
  <div>
    <video ref={videoRef} autoPlay playsInline></video>
    <audio ref={audioRef} autoPlay></audio>
  </div>
);
...

在上面的代码中，使用了useRef hookvideoRef创建了一个 `<video> `和`<audio>` 元素，以便访问组件中的 `<video>` 和 `<audio>` HTML 元素。SDK使用 `<video>`和`<audio>` 将实时 WebRTC 视频和音频流附加到这些 HTML 元素。`<video>`和 `<audio> ` 元素将用于在客户端渲染来自远程流的视频和音频数据。audioRef<video><audio>SimliClientvideoRefaudioRef<video><audio>

下一步是配置SimliClient并传入视频和音频引用。为此，请将以下代码粘贴到此处Interview.js：

// src/app//page.js
...
// configure the simli client
...  

import { SimliClient } from 'simli-client';

const simliClient = new SimliClient();

const simliConfig = {
  apiKey: "your api key",
  faceID: "tmp9i8bbq7c",
  handleSilence: true,
  maxSessionLength: 3600,
  maxIdleTime: 600,
  videoRef: videoRef,
  audioRef: audioRef,
};
...

这段代码创建了一个新的实例SimliClient和一个simliConfig对象。让我们来分析一下这个simliConfig对象的各个部分：

• apiKey这是在 Simli 创建账户时的唯一密钥。
• faceID：代表将在视频流中渲染的头像面部 ID。Simli 提供不同的头像；您可以使用面部 ID 选择一个。
• handleSilence：此布尔值指示客户端是否应处理音频流中的静音时刻（例如，如果未检测到音频，则将视频静音或暂停）。
• maxSessionLength设置最大会话时长（以秒为单位）。此处设置为 1 小时（3600 秒），限制了单个连接会话的持续时间。
• maxIdleTime设置最大空闲时间（以秒为单位）。会话在 600 秒（10 分钟）无任何活动后将断开连接。
• videoRef and audioRef这些是指向视频和音频元素的引用，媒体流将在浏览器中显示在这些元素上。SimliClient 可以通过传递这些引用将 WebRTC 流直接连接到这些元素。

使用 AI 视频头像开始实时流媒体播放

配置成功后SimliClient，下一步是建立 WebRTC 连接。

但在此之前，您需要创建一个函数，将音频采样率降低到 16 kHz，并将其分割成更小的脉冲编码调制 (PCM) 片段。本指南将使用预先录制的 mp3 音频文件SimliClient。您可以下载并使用任何您选择的音频文件。

将以下代码粘贴到page.js文件中以创建downsampleAndChunkAudio函数：

// src/app//page.js
...
// Downsample the audio to PCM chunks
... 

const downsampleAndChunkAudio = async (audioUrl, chunkSizeInMs = 100) => {
  // Create an AudioContext with a target sample rate of 16kHz
  const audioContext = new AudioContext({ sampleRate: 16000 });
  // Fetch and decode audio file
  const response = await fetch(audioUrl);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  // Extract PCM data from audio buffer
  const rawPCM = audioBuffer.getChannelData(0); // assuming mono audio for simplicity
  // Calculate chunk size in samples (16-bit PCM)
  const chunkSizeInSamples = (chunkSizeInMs / 1000) * 16000;
  const pcmChunks = [];
  // Loop through the raw PCM data and create chunks
  for (let i = 0; i < rawPCM.length; i += chunkSizeInSamples) {
    const chunk = rawPCM.subarray(i, i + chunkSizeInSamples);
    // Convert each chunk to Int16Array PCM data
    const int16Chunk = new Int16Array(chunk.length);
    for (let j = 0; j < chunk.length; j++) {
      int16Chunk[j] = Math.max(-32768, Math.min(32767, chunk[j] * 32768));
    }
    pcmChunks.push(int16Chunk);
  }
  return pcmChunks;
};

此downsampleAndChunkAudio函数以音频文件为参数，并通过将其降采样至 16 kHz 并将其分割成更小的 PCM 块来处理音频文件。此格式是向服务器发送音频所必需的SimliClient。

接下来，您需要初始化SimliClinet并建立 WebRTC 连接。为此，请将以下代码粘贴到page.js文件中：

// src/app//page.js
...
// Initialize simli client
... 

async function initializeClient() {
   try {
     simliClient.Initialize(simliConfig);
     await simliClient.start();
     // setIsInitialized(true);
     // Send audio data in chunks
     const pcmChunks = await downsampleAndChunkAudio(audioUrl);
     const interval = setInterval(() => {
       const chunk = pcmChunks.shift();
       // if (isInitialized && chunk) {
         chunk && simliClient.sendAudioData(chunk);
       // }
       if (!pcmChunks.length) clearInterval(interval);
       console.log("PCM ", chunk);
     }, 120);
   } catch(error){
     alert(error);
   }
 }

该initializeClient函数使用之前声明的simliConfig对象初始化SimliClient。然后，它调用另一个downsampleAndChunkAudio函数将音频分割成PCM16类型的块，然后再将其发送到Simli客户端。

注意：音频数据应为 PCM16 类型，采样率为 16KHz。

PCM16是一种标准的音频格式，非常适合语音处理。当您将此音频格式发送到 Simli 的 API 时，它有助于保持音频与虚拟形象唇部动作的同步。这可以实时模拟自然说话，从而提升观看体验。

在前端渲染和集成AI虚拟形象

应用程序构建完成后，让我们在浏览器中渲染它。为此，请打开终端并运行以下代码：

npm run dev

此命令将在本地主机上启动一个服务器http://localhost:3000。

通过这段视频观看应用程序的实际运行效果。

您可以查看这个GitHub 存储库，了解如何集成 Simli 的 API 来构建交互式 AI 化身的实际示例。

结论

这篇快速指南展示了如何使用 Simli API 创建实时 AI 视频头像。虽然本文仅涵盖了基础知识，例如向 Simli API 发送预录音频，但 Simli 的功能远不止于此。

要充分发挥 Simli 的潜力，您可以集成其他工具来增强您的 AI 视频头像，例如使用OpenAI 的语言模型，以及使用Deepgram或Elevenlabs进行文本转语音。这些工具与 Simli 无缝协作，可创建更具吸引力和互动性的视频体验。
查看此教程，了解 Simli 的更高级用法。立即注册 Simli，开始体验吧！