从零开始之扣子智能音视频项目部署

从零开始之扣子智能音视频项目部署

---

前言

扣子平台于2025年2月13日推出智能语音 OpenAPI，配合火山方舟提供的视觉理解模型，开发者可以在 Web、App、小程序、终端硬件上集成扣子智能语音和视频识别能力，使终端用户能够和扣子上的智能体进行实时音视频通话。这一新功能的推出增加了智能体开发的有趣性和方便性。

一、工具列表

• 扣子专业版
• VSCode
• Nodejs 及 npm（Nodejs版本 >= 16）
• Yarn（可选）
• Google Chrome浏览器
• OBS（可选）
• Virtual Audio Cable（可选）

二、部署流程

官方给出的项目部署流程是React版本的，官方项目部署流程传送门。本文是基于Vue版本的。

1. 下载项目

从Github上下载项目到本地，Github项目传送门。

2. 安装VSCode

VSCode安装流程传送门

3. NVM安装

NVM主要用于管理多个Nodejs版本，方便Nodejs版本的切换。
NVM详细安装传送门

如果遇到nvm使用use命令失效的问题，可参考NVM的use命令失效解决方案传送门

如果npm安装各种依赖包的时候，下载速度慢，可通过更换npm源的方式解决。npm源切换详解

如果出现npm install 一直sill idealTree buildDeps问题。可参考解决方案 npm install一直sill idealTree buildDeps

npm cache clear --force

npm config set registry http://registry.npmjs.org/

4. 安装yarn

如果进入 coze-js-main\examples\realtime-quickstart-vue 目录后
通过 npm install 没有依赖错误，可以直接跳过此步。如果报依赖错误如以下日志所示。可选择用 yarn 工具安装。

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/utils@6.21.0
npm WARN Found: eslint@9.14.0
npm WARN node_modules/eslint
npm WARN   dev eslint@"9.14.0" from the root project
npm WARN   12 more (eslint-utils, fork-ts-checker-webpack-plugin, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^7.0.0 || ^8.0.0" from @typescript-eslint/utils@6.21.0
npm WARN node_modules/@typescript-eslint/utils
npm WARN   @typescript-eslint/utils@"6.21.0" from @typescript-eslint/eslint-plugin@6.21.0
npm WARN   node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/eslint-plugin
npm WARN   1 more (@typescript-eslint/type-utils)
npm WARN 
npm WARN Conflicting peer dependency: eslint@8.57.1
npm WARN node_modules/eslint
npm WARN   peer eslint@"^7.0.0 || ^8.0.0" from @typescript-eslint/utils@6.21.0
npm WARN   node_modules/@typescript-eslint/utils
npm WARN     @typescript-eslint/utils@"6.21.0" from @typescript-eslint/eslint-plugin@6.21.0
npm WARN     node_modules/@vue/eslint-config-typescript/node_modules/@typescript-eslint/eslint-plugin
npm WARN     1 more (@typescript-eslint/type-utils)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @vue/eslint-config-typescript@12.0.0
npm ERR! Found: eslint@9.14.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"9.14.0" from the root project
npm ERR!   peer eslint@">=5" from eslint-utils@3.0.0
npm ERR!   node_modules/eslint-utils
npm ERR!     eslint-utils@"^3.0.0" from eslint-plugin-vue@8.7.1
npm ERR!     node_modules/eslint-plugin-vue
npm ERR!       dev eslint-plugin-vue@"^8.0.3" from the root project
npm ERR!   11 more (fork-ts-checker-webpack-plugin, vue-eslint-parser, ...)

yarn 的安装只需要使用如下命令即可，yarn的详细细节可参考yarn安装传送门

npm install -g yarn

安装完 yarn 后，只需要通过 yarn install 安装依赖即可。

5. 搭建智能体

可以参考扣子官方的搭建智能体流程创建一个智能体，官方智能体搭建流程传送门。智能体搭建结束后，可参考官方发布API流程，将智能体发布为API服务，官方发布API服务传送门。如果需要使用视频理解能力，应为智能体设置一个视觉模型，例如豆包视觉理解模型。

6. 创建密钥

创建一个访问密钥，用于身份认证和鉴权。

• 体验或调试场景：可生成一个短期的个人访问令牌（PAT），快速跑通Realtime SDK的整体流程。个人访问令牌获取方式可参考 官方PAT令牌设置传送门。
• 线上环境：线上环境应使用OAuth鉴权方案。OAuth鉴权方案的详细说明可参考 官方OAuth令牌设置传送门。

7. 修改配置

7.1 修改令牌

本文采用的鉴权方法是PAT，需要进入src/hooks/use-token-with-pat.ts 文件，用步骤6中创建的PAT密钥进行替换即可。

const useTokenWithPat = () => {
  const getToken = () =>
    '创建的PAT密钥';
  return {
    getToken,
  };
};

export { useTokenWithPat };

7.2 修改botId

botId即为智能体的id，经由步骤5创建智能体后，进入智能体的 开发页面，开发页面 URL 中 bot 参数后的数字就是智能体 ID。例如 https://www.coze.com/space/341****/bot/73428668*****，bot ID 为73428668*****。用此ID替换 src/App.vue 中对应的内容即可。

import { ref, onUnmounted } from 'vue';
import { message } from 'ant-design-vue';
import {
  EventNames,
  RealtimeAPIError,
  RealtimeClient,
  RealtimeError,
  RealtimeUtils,
} from '@coze/realtime-api';
import { CozeAPI, COZE_CN_BASE_URL, ChatEventType } from '@coze/api';
import {
  useTokenWithPat,
  useTokenWithWeb,
  useTokenWithJWT,
  useTokenWithDevice,
  useTokenWithPKCE,
} from './hooks/index';
import { NetworkErrorManager } from './network-error-manager';

const botId = '创建智能体后获得的botID';
const { getToken } = useTokenWithPat();

8. 运行项目

在 coze-js-main\examples\realtime-quickstart-vue 目录下的终端中执行 npm start 命令即可。运行成功如下图所示。

然后便可以使用Chrome浏览器访问 http://localhost:3000/ 地址，即可进入主界面。主界面如下图所示。

三、音视频模拟设备

如果需要不通过真实摄像头和麦克风对项目进行测试，可以采用的方案是使用OBS的虚拟摄像头的功能和Virtual Audio Cable的虚拟麦克风的功能，将Chrome浏览器的摄像头输入源和麦克风输入源分别设置成虚拟摄像头输入源和虚拟麦克风输入源即可。

1. OBS安装

OBS下载安装可直接一路默认即可，OBS下载传送门。

2. 创建场景

3. 创建媒体源

4. 启动虚拟摄像机

5. 安装Virtual Audio Cable

Virtual Audio Cable的下载和安装可参考 Virtual Audio Cable安装传送门

6. 设置OBS音频

点击媒体源下的三个小点，进入 高级音频设置 界面，打开 媒体源 对应的 音频监听 为 监听并输出。高级音频设置 界面如下图所示。

然后进入 文件-设置-音频 将监听设备选择为 Cable Input，如下图所示。这样视频文件的音频将会被 Cable Input 监听到。

7. 设置Chrome

7.1 设置虚拟摄像头

通过 chrome://settings/content/camera 地址进入 Chrome浏览器的摄像头设置界面，将摄像头选择为OBS Virtual Camera，界面如下图所示，这样Chrome就会采用OBS作为摄像头源，而非物理摄像头。

7.2 设置虚拟麦克风

通过 chrome://settings/content/microphone 地址进入 Chrome浏览器的麦克风设置界面，将麦克风选择为 Cable Output，界面如下图所示，这样Chrome就会采用 Cable Input 监听到的视频文件音频作为麦克风输入源。