You need to enable JavaScript to run this app.
导航
Web
最近更新时间:2024.09.25 17:59:09首次发布时间:2021.10.29 16:36:24

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

前提条件

目录结构说明

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 相关信息。

image

步骤 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,启动后会自动跳转到浏览器,登录页面如下:

image.png

步骤 4:体验音视频通话功能

为更好地体验实时音视频互动效果,你可以邀请一位朋友使用另一台设备运行该示例项目(需确保两个设备配置示例项目时填入的 App ID 和 AppKey 一致)。当你们输入相同的房间名加入房间后,即可在同一房间中体验音视频通话。

常见问题

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