Web

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

前提条件

• 操作系统为图形界面

• 终端

• 安装 Web SDK 支持的浏览器，推荐使用 Chrome 最新版本

目录结构说明

Web 端快速开始工程文件分为基于原生 JS 和 React 框架的两个示例工程。目录结构分别说明如下：

• 基于原生 JS 的 Demo

│─ BasicDemo                 // 基于原生 JS 的快速开始 Demo
   │  ├─ assets                 // 图片等静态资源
   │  ├─ js                    // 进房、通信等基础模块
   │  ├─ lib                    // vrtc sdk
   │  ├─ README.md              // 跑通快速开始指南

• React 框架 Demo

│─ ReactDemo                 // 基于 React 的快速开始 Demo
   │  ├─ public                 // 图片等静态资源
   │  ├─ src                    // 进房、通信等基础模块
   │  ├─ README.md              // 跑通快速开始指南

操作步骤

步骤 1：获取 AppId 和临时 Token

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

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

步骤 2：配置 Demo 工程文件

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

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

3. 下载快速开始 Demo 工程文件并解压到本地。

4. 进入你希望体验的 Demo 文件目录，找到配置文件并填写配置，包括上一步骤中获取到的 AppId 和 Token。

   • BasicDemo：./js/common.js
   • ReactDemo：./src/config.ts

   修改以下配置：

   • appId：填写你的 AppID
   • roomId：填写申请 Token 时填写的房间 ID
   • token：填写用户 ID 和对应 Token，多对token值之间使用西文逗号隔开

const config = {
  appId: 'YourAppId',
  roomId: 'YourRoomId',
  tokens: [
    {
      userId: 'yourUserId1',
      token: 'yourToken1',
    },
    {
      userId: 'yourUserId2',
      token: 'yourToken2',
    }
  ],
};

步骤 3：编译运行

1. 打开终端。

2. 进入 BasicDemo 或 ReactDemo 工程文件根目录。

3. 运行 yarn 编译 Demo。

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

常见问题

Web SDK 浏览器兼容性和已知问题