快速开始 Demo 是 RTC 提供的基本音视频通话功能的开源示例工程文件。获取该工程文件后，你可以快速构建应用，体验 RTC 的通话效果；也能通过阅读代码，了解基本音视频通话的最佳实践。 ## 前提条件 * 操作系统为图形界面 * 终端 * 使用[兼容的浏览器](https://www.volcengine.com/docs/6348/2120886?lang=zh#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)（推荐使用 Chrome 最新版本） ## 目录结构说明 Web 端快速开始工程文件分为基于原生 JS 和 React 框架的两个示例工程。目录结构分别说明如下： * 基于原生 JS 的 Demo ```Plain Text │─ BasicDemo // 基于原生 JS 的快速开始 Demo │ ├─ assets // 图片等静态资源 │ ├─ js // 进房、通信等基础模块 │ ├─ lib // vrtc sdk │ ├─ README.md // 跑通快速开始指南 ``` * React 框架 Demo ```Plain Text │─ ReactDemo // 基于 React 的快速开始 Demo │ ├─ public // 图片等静态资源 │ ├─ src // 进房、通信等基础模块 │ ├─ README.md // 跑通快速开始指南 ``` ## 操作步骤 ### 步骤 1：获取 AppId 和临时 Token 参考 RTC [接入指南](/docs/6348/69865)获取 AppId 和临时 Token。申请临时 Token 后，你应记录下申请时使用的房间 ID、用户 ID 和对应生成的临时 Token，以供后续配置环境和加入房间时使用。 > 临时 Token 仅用于测试或跑通 Demo，你可以通过阅读[密钥说明](/docs/6348/70121)了解更多 Token 相关信息。 ![图片](https://p-vcloud.byteimg.com/tos-cn-i-em5hxbkur4/a2d4acf23109429c8c2e59da665a68ef~tplv-em5hxbkur4-noop.image?width=3688&height=1382 =3688x) ### 步骤 2：配置 Demo 工程文件 1. 全局安装 [Node.js 和 npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)。 2. 使用 npm 全局安装 yarn ：`npm install -g yarn`。 3. 下载 [Demo 工程文件](/docs/6348/1163793)并解压到本地。 4. 进入你希望体验的 Demo 文件目录，找到配置文件并填写配置，包括上一步骤中获取到的 AppId 和 Token。 * BasicDemo：`./js/common.js` * ReactDemo：`./src/config.ts` 修改以下配置： * `appId`：填写你的 AppID * `roomId`：填写申请 Token 时填写的房间 ID * `token`：填写用户 ID 和对应 Token，多对`token`值之间使用西文逗号隔开 ```Plain Text 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，启动后会自动跳转到浏览器，登录页面如下： ![图片](https://p-vcloud.byteimg.com/tos-cn-i-em5hxbkur4/35698af5f31d435bb31b1e7ea01332b7~tplv-em5hxbkur4-noop.image?width=3358&height=1634 =3358x) ## 步骤 4：体验音视频通话功能为更好地体验实时音视频互动效果，你可以邀请一位朋友使用另一台设备运行该示例项目（需确保两个设备配置示例项目时填入的 App ID 和 AppKey 一致）。当你们输入相同的房间名加入房间后，即可在同一房间中体验音视频通话。 ## 后续步骤在完成音视频互动后，你可以阅读以下文档进一步了解： * 在测试或生产环境中，你需要使用 Token 进行鉴权。为保证通信安全，推荐从服务器中获取 Token，详情请参考[使用 Token 完成鉴权](/docs/6348/70121)。 * 在实现不同的视频通话场景时，你需要配置不同的视频发布参数以达到最佳效果，详情请参考[设置视频发布参数](/docs/6348/70122)。 ## 常见问题 [Web SDK 浏览器兼容性和已知问题](/docs/6348/2120886)