快速开始 Demo 是 RTC 提供的基本音视频通话功能的开源示例工程文件。获取该工程文件后，你可以快速构建应用，体验 RTC 的通话效果；也能通过阅读代码，了解基本音视频通话的最佳实践。

前置条件
目录结构说明

Web 端快速开始工程文件的目录结构如下：

├─ Web
│  │─ ReactDemo                 // 基于 React 的快速开始 Demo
│  │  ├─ public                 // 图片等静态资源
│  │  ├─ src                    // 进房、通信等基础模块
│  │  ├─ README.md              // 跑通快速开始指南
│  │─ BasicDemo                 // 基于原生 JS 的快速开始 Demo
│  │  ├─ assets                 // 图片等静态资源
│  │  ├─ lib                    // vrtc sdk
│  │  ├─ README.md              // 跑通快速开始指南
操作步骤
步骤 1：获取 AppId 和临时 Token

参考 RTC 接入指南获取 AppId 和临时 Token。
申请临时 Token 后，你应记录下申请时使用的房间 ID、用户 ID 和对应生成的临时 Token，以供后续配置环境和加入房间时使用。

临时 Token 仅用于测试或跑通 Demo，你可以通过阅读密钥说明了解更多 Token 相关信息。

image

步骤 2：配置 Demo 工程文件

  1. 全局安装 Node.js 和 npm。

  2. 使用 npm 全局安装 yarn ：npm install -g yarn。

  3. 在 Demo 工程文件根目录中找到 ./js/common.js（基于原生 JS）或 ./src/config.ts（基于 React） 并修改以下配置：

    • appId：填写你的 AppID
    • roomId：填写申请 Token 时填写的房间 ID
    • token：填写用户 ID 和对应 Token，多对token值之间使用西文逗号隔开
const config = {
  appId: 'YourAppId',
  roomId: 'YourRoomId',
  token: {
    'YourUserId1': 'YourToken1', // "test_user1": "test_tokenxxxxxxxxx"
    'YourUserId2': 'YourToken2',
  }
};
步骤 3：编译运行

  1. 打开终端。

  2. 进入 Demo 工程文件根目录。

  3. 运行 yarn 编译 Demo。

  4. 运行 yarn start 启动 Demo，启动后会自动跳转到浏览器，登录页面如下：

image.png