# Tutorial: 快速跑通 Demo

本文主要介绍如何快速跑通RTC Web demo。

## 前提条件

您已 向技术支持部门拿到demo包或下载地址，准备好供Web App运行的开发环境。

## 操作步骤

## 步骤1：下载 SDK 和 Demo 源码

1. 下载 Web 端 SDK 及配套的 Demo 源码。

   从http://cd.nice2meet.cn:9594/3tee/sdk/web/中选择下载个最新的sdk_web_v3_x.zip包。

   ​

2. 下载解压完成后。

​

## 步骤2：设置 AccessKey 和 密钥（SecretKey)

​ demo集默认采用的是公司提供的rtc媒体服务器地址及指定的AccessKey和SecretKey。如果客户已经本地化部署了rtc媒体服务器，可以改成客户自己的服务器地址及客户设置的AccessKey和SecretKey。

## 步骤3：运行 Demo

RTC Web SDK目前提供以下几种基础 Demo，您可以选择您熟悉的项目框架进行运行体验：

1. `baseVideo` 为RTC Web 快速运行 PC端Demo (原生 Js 版本)，集成了 RTC Web SDK 的基础音视频通话、开关设备等功能，使用原生 Js 开发，可直接在浏览器中运行。
2. `baseVideoMobile` 为 RTC Web 快速运行 手机端Demo (原生 Js 版本，主要是适配了手机界面及手机上打开前后置摄像头的区别)，集成了 RTC Web SDK 的基础音视频通话、前后置摄像头设备选择等功能，使用原生 Js 开发，可直接在手机浏览器或微信内运行。
3. `baseVideoVue` 为 RTC Web 快速运行 Demo (Vue3 版本)，集成了 RTC Web SDK 的基础音视频通话、开关设备等功能，使用 Vue3 + TypeScript 开发，需要您安装 Node 环境，按下方说明运行体验。

> 注意：

> - 本地体验 Demo 可以直接在本地搭建静态服务（本地计算机需要接入互联网），通过 `http://localhost:端口` 访问，打开两个页面即可进行通话。
> - 部署到公网体验，需要通过 HTTPS 协议，即 `https://域名/xxx` 访问，原因可参考文档页面访问协议限制说明。
> - 目前桌面端 Chrome 浏览器支持 Web SDK 的相关特性比较完整，因此建议使用 Chrome 浏览器进行体验，参考文档浏览器兼容信息。

### Demo 1：baseVideo

1. 在下载的源码中找到sdk_web_v3_20231117/demo/lib/config.js文件，如果已经本地化部署了rtc媒体服务器，打开并配置相应的服务器地址、AccessKey 和 SecretKey。
2. 在下载的源码中找到并使用浏览器打开 `sdk_web_v3_20231117/demo/baseVideo/index.html` 文件。
3. 功能体验

- 点击【创建房间】按钮可以创建一个新的房间号。如已有房间号可以直接输入。
- 点击【加会】按钮，加入房间内，会直接采集麦克风或摄像头。
- 点击 本地区域的【麦克风或摄像头图片】按钮，可终止或开启采集麦克风或摄像头
- 点击【退会】按钮退出房间

4. 另一个用户访问同一个URL地址，输入同样的房间号加入房间后您可以与他一起体验 RTC Web 语音及视频互通功能。

### Demo 2：baseVideoMobile

1. 在下载的源码中找到sdk_web_v3_20231117/demo/lib/config.js文件，如果已经本地化部署了rtc媒体服务器，打开并配置相应的服务器地址、AccessKey 和 SecretKey。
2. 在下载的源码中找到并使用浏览器打开 `sdk_web_v3_20231117/demo/baseVideoMobile/index.html` 文件。
3. 功能体验

- 点击【创建房间】按钮可以创建一个新的房间号。如已有房间号可以直接输入。
- 点击【加会】按钮，加入房间内，会直接采集麦克风或摄像头(默认前置摄像头)。
- 点击【前置或后置】按钮，可切换前后置摄像头
- 点击【退会】按钮退出房间

4. 另一个用户访问同一个URL地址，输入同样的房间号加入房间后您可以与他一起体验 RTC Web 语音及视频互通功能。

### Demo 3：baseVideoVue

1. 在下载的源码中找到并进入到 `sdk_web_v3_20231117/demo/baseVideoVue` 目录下。

2. 找到src/config.js文件，如果已经本地化部署了rtc媒体服务器，打开并配置相应的服务器地址、AccessKey 和 SecretKey。

3. 安装依赖包

       npm istall

4. 本地运行 Demo

       npm run dev

   默认浏览器会自动打开 http://localhost:3000/ 地址。

5. 功能体验

   - 点击【创建房间】按钮可以创建一个新的房间号。如已有房间号可以直接输入。
   - 点击【加会】按钮，加入房间内，会直接采集麦克风或摄像头。
   - 点击 本地区域的【麦克风或摄像头图片】按钮，可终止或开启采集麦克风或摄像头
   - 点击【退会】按钮退出房间

6. 加入房间后您可以通过分享邀请链接与被邀请人一起体验 RTC Web 语音及视频互通功能。