跑通示例项目

概览

声网在 GitHub 上提供一个开源的一对一视频通话示例项目，本文介绍如何快速跑通该示例项目，体验声网视频通话效果。 你也可以直接观看下面的视频教程。

同时，你可以通过我们的在线 demo 快速体验声网实现的音视频通话效果。

前提条件

• 可以连接到互联网的 Windows 或 macOS 计算机。如果你的网络环境部署了防火墙，请参考应用企业防火墙限制以正常使用声网服务。
• 计算机搭载 2.2 GHz Intel 第二代 i3/i5/i7 处理器或同等性能的其他处理器。
• 物理音视频采集设备，如内置摄像头和麦克风。
• 安装最新稳定版 Chrome 浏览器。
• 有效的声网开发者账号。

操作步骤

1. 创建声网项目

参考以下步骤创建一个声网项目：

1. 进入声网控制台的项目管理页面。
2. 在项目管理页面，点击创建按钮。
3. 在弹出的对话框内输入项目名称、使用场景，依次选择场景标签和鉴权机制。其中鉴权机制推荐选择安全模式，调试模式的安全性较低。
4. 点击提交按钮。新建的项目会显示在项目管理页中。

2. 获取声网项目的 App ID

声网会给每个项目自动分配一个 App ID 作为项目唯一标识。

在声网控制台的项目管理页面，找到你的项目，点击 App ID 右侧的 图标，即可获取项目的 App ID。

3. 生成临时 Token

为提高项目的安全性，声网推荐使用 Token 对即将加入频道的用户进行鉴权。

为了方便测试，声网控制台提供生成 RTC 临时 Token 的功能。参考以下步骤获取 RTC 临时 Token：

1. 在控制台的项目管理页面，找到你的项目，点击配置。
   
2. 在主要证书下面，点击生成临时音视频 token。
   
3. 输入一个频道名，例如 testroom，然后点击生成。后续调用 API 加入频道时，请确保填入的频道名与这里的频道名一致。
   
4. 点击复制图标，即可复制生成的临时 token。

4. 集成声网 SDK

按照以下步骤将声网 SDK 集成到示例项目中。

1. 下载 Basic-Video-Call 仓库，找到 Agora-Web-Tutorial-1to1 示例项目文件夹（位于 Basic-Video-Call/One-to-One-Video 目录下）。
2. 下载最新版视频通话 Web SDK 并解压。
3. 将 SDK 包中以 AgoraRTCSDK 开头的 .js 文件复制到 Agora-Web-Tutorial-1to1 示例项目的 assets 文件夹下，并重命名为 AgoraRTCSDK.js。

5. 运行示例项目

按照以下步骤运行示例项目，开始视频通话：

1. 在 Chrome 浏览器中打开示例项目中的 index.html 文件，你会看到 Basic Communication 页面：
   
2. 按照上文步骤获取 App ID、生成临时 Token，并在该页面填入，在 Channel 栏填入用于生成临时 Token 的频道名。
3. 点击 JOIN，浏览器会弹出对话框要求麦克风和摄像头权限，点击允许，即可在页面上看到本地的视频画面。
4. 如果想体验双人视频通话效果，可以在浏览器中复制当前标签页，输入相同的 App ID、频道名和 Token 并点击 JOIN。

如果页面没有正常工作，可以打开浏览器的控制台查看错误信息进行排查。常见的错误信息包括：

• INVALID_VENDOR_KEY：App ID 或 Token 错误，检查你填写的 App ID 及 Token。
• DYNAMIC_USE_STATIC_KEY：你的声网项目启用了 App 证书，需要在加入频道时填写 Token。
• Media access:NotFoundError：检查你的摄像头和麦克风是否正常工作。

示例项目结构

下表列出示例项目的代码结构，你可以参考示例项目的代码，根据自己的需求进行调整。

相关链接

除本文介绍的示例项目外，我们在 GitHub 上还提供以下开源的视频通话示例项目供你参考：

• Agora-Web-Tutorial-1to1-Webpack
• Agora-Web-Tutorial-1to1-Vue
• Agora-Web-Tutorial-1to1-React
• OpenVideoCall