实时音视频
实时音视频
文档指南
请输入
实时音视频
快速入门
场景方案
开发指南
Token 鉴权
音频管理
视频管理
屏幕共享
SDK 升级指南
客户端 API 参考
服务端 API 参考
房间管理
转推直播
输入在线媒体流
WTN 流（原公共流）
实时数据监控
历史数据查询
业务标识管理
实时消息通信
历史版本（文档停止维护）
2023-08-01
2023-06-01
转推直播
2022-06-01
2020-12-01
转推直播
输入在线媒体流
获取数据指标
常见问题
集成相关
质量相关
AI 音视频互动方案
开发指南
配置 ASR/LLM/TTS 服务
API 参考
硬件对话智能体
用户指南
服务端 API
智能体
实时信令
互动白板
客户端 API 参考
服务端 API 参考
- 文档首页
实时音视频实时音视频快速入门跑通示例项目Web
复制全文
下载 pdfWeb
文档反馈
问问助手快速开始 Demo 是 RTC 提供的基本音视频通话功能的开源示例工程文件。获取该工程文件后，你可以快速构建应用，体验 RTC 的通话效果；也能通过阅读代码，了解基本音视频通话的最佳实践。
前提条件
- 操作系统为图形界面
- 终端
- 使用兼容的浏览器（推荐使用 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
申请临时 Token 后，你应记录下申请时使用的房间 ID、用户 ID 和对应生成的临时 Token，以供后续配置环境和加入房间时使用。
步骤 2：配置 Demo 工程文件
- 全局安装 Node.js 和 npm。
- 使用 npm 全局安装 yarn ：npm install -g yarn。
- 下载 Demo 工程文件并解压到本地。
- 进入你希望体验的 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：编译运行
- 打开终端。
- 进入 BasicDemo 或 ReactDemo 工程文件根目录。
- 运行 yarn 编译 Demo。
- 运行 yarn start 启动 Demo，启动后会自动跳转到浏览器，登录页面如下：
步骤 4：体验音视频通话功能
为更好地体验实时音视频互动效果，你可以邀请一位朋友使用另一台设备运行该示例项目（需确保两个设备配置示例项目时填入的 App ID 和 AppKey 一致）。当你们输入相同的房间名加入房间后，即可在同一房间中体验音视频通话。
后续步骤
在完成音视频互动后，你可以阅读以下文档进一步了解：
- 在测试或生产环境中，你需要使用 Token 进行鉴权。为保证通信安全，推荐从服务器中获取 Token，详情请参考使用 Token 完成鉴权。
- 在实现不同的视频通话场景时，你需要配置不同的视频发布参数以达到最佳效果，详情请参考设置视频发布参数。
常见问题
最近更新时间：2026.08.05 15:18:17
这个页面对您有帮助吗？
有用
有用
无用
无用