运行 Web Demo_音视频通信(RTC)-阿里云帮助中心

通过阅读本文，您可以了解运行Web Demo的方法。

前提条件

您已从控制台获取鉴权信息，具体操作，请参见控制台操作指南。

说明

从控制台获取的Token仅为开发测试使用，正式上线有被攻击风险。建议您自己搭建服务端生成Token，并使用HTTPS协议。搭建服务端请参见服务端生成Token。

操作步骤

从github下载并解压SDK及示例代码，下载地址为Demo地址。

在项目根目录下用控制台依次执行以下命令：

cd DingRTC/Web
npm install
npm install vite -g
npm install typescript -g
npm run dev

打开 src/utils/ 文件夹中的request.ts文件，配置token信息。

export const getAppToken = (): Promise<{ token: string }> => {
  return { token: string }; // 配置Token
};

运行Demo。
1. Demo运行成功后，在准备页面可看到界面分为左右两栏布局，左边界面是摄像头和麦克风的预览，可点击下方按钮进行设备的启用和停用，以及设备的切换。预览操作同时实时创建了音视频轨道，在加入频道后会自动执行发布；右边界面可以填入频道名（Channel ID）、用户id（User ID）、用户名（User Name）、应用id（App ID），然后点击加入按钮加入频道。
2. 加入频道成功后，会有toast提示加入房间成功,同时进入频道中的节面。
3. 默认情况下，麦克风和摄像头采集数据创建的音视频轨道会在加入频道内自动执行发布，可以点击下方设备图标旁的箭头进行发布/取消发布/调整视频编码/取消订阅全局音频/切换设备等操作，其中调整视频编码要求视频不处于发布中的状态。
4. 上方小视窗会展示本端预览以及远端用户的视频预览画面、设备状态等其他信息，小窗右下角操作按钮列表，会包含摄像头和共享流的订阅、取消订阅、截图等操作，这些按钮要求小窗口展示的是当前要操作的轨道才会展示，操作一次后操作按钮列表会自动收起，操作成功没有提示，失败会有提示。
5. 当有其他用户加入相同频道，会自动订阅其他用户音视频。可通过大小流按钮进行订阅视频规格的切换，也可通过取消订阅按钮来执行取消订阅该用户的视频轨道。
6. 点击底部右下角离开按钮，会导致本端立刻离开频道，当频道内无人在线时，会被系统回收释放。