跑通示例项目

概览

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

同时，你可以通过我们的在线 Web 应用快速体验声网实现的互动直播效果。

前提条件

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

操作步骤

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-Broadcasting 仓库，找到 OpenLive-Web 示例项目文件夹。
2. 在命令行中进入 OpenLive-Web 目录。
3. 运行 npm install 命令，安装依赖库并集成声网 Web SDK。

5. 运行示例项目

按照以下步骤运行示例项目：

1. 将示例项目文件夹中的 .env.example 文件重命名为 .env。

   该文件为隐藏文件，你可能需要修改系统设置以显示该文件。

2. 打开 .env 文件，将 <#YOUR Agora.io APP ID#> 替换为你的声网项目的 App ID，将 <#YOUR Agora.io APP TOKEN#> 替换为你在控制台生成的临时 Token。

   此处填写的 App ID 和 Token 均为字符串格式，如下图所示。

3. 在命令行中进入 OpenLive-Web 目录，然后运行 npm run dev 命令，启动示例应用。

   运行命令后示例应用的页面会自动在你的默认浏览器打开，如下图所示：
   

   如果页面没有自动打开，你可以打开浏览器，通过访问 http://localhost:3000 打开示例应用。

4. 输入生成临时 Token 时使用的频道名，点击 Start Live Streaming，以主播（host）的角色开始直播。浏览器会弹出对话框要求麦克风和摄像头权限，点击允许，即可在页面上看到本地的视频画面。

   你也可以在开始直播前选择角色为观众（audience）。以观众角色加入直播，浏览器不会请求麦克风和摄像头权限，页面也不会显示本地视频画面。

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

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