根据本文指导快速集成 Agora Web SDK 并在你自己的 app 里实现音视频互动直播。
本文会详细介绍如何建立一个简单的项目并使用 Agora Web SDK 实现基础的互动直播。我们建议你阅读本文以快速了解 Agora 的核心方法。
互动直播和实时通话的区别在于，直播频道的用户有角色之分。你可以将角色设置为主播，或者观众，其中主播可以收、发流，观众只能收流。

由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制，Agora Web SDK 仅支持 HTTPS 协议或者 http://localhost（http://127.0.0.1），请勿使用 HTTP 协议部署你的项目。

Demo 体验

我们在 GitHub 上提供一个开源的基础视频互动直播示例项目，在开始开发之前你可以通过该示例项目体验互动直播效果。

前提条件

安装一款 Agora Web SDK 支持的浏览器，如下表所示：
获得一个有效的 Agora 账号。（免费注册）
如果你的网络环境部署了防火墙，请根据声网文档中心的「应用企业防火墙限制」打开相关端口。

设置开发环境

你需要准备一个自己的项目并且将 Agora Web SDK 集成到其中。

创建 Web 项目

如果你已经有一个 Web 项目了，跳过该节，直接阅读集成 SDK。

我们提供的示例代码使用了一些第三方的库文件来实现页面的样式和布局，你可以在 Github repo 中查找一下文件，或者使用其他方式实现。

common.css
jquery.min.js
materialize.min.js
这个项目只需要用到一个 HTML 文件。

新建一个 HTML 文件。这里我们将文件命名为 index.html（以下简称项目文件）。
用一个代码编辑器（例如 VS Code）打开该文件。
复制以下代码，粘贴到项目文件中。
该步骤会为你的项目创建前端页面的 UI，你也可以自定义你的 UI。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Basic Live Broadcast</title>
  <link rel="stylesheet" href="./assets/common.css" />
</head>
<body class="agora-theme">
  <div class="navbar-fixed">
    <nav class="agora-navbar">
      <div class="nav-wrapper agora-primary-bg valign-wrapper">
        <h5 class="left-align">Basic Live Broadcast</h5>
      </div>
    </nav>
  </div>
  <form id="form" class="row col l12 s12">
    <div class="row container col l12 s12">
      <div class="col" style="min-width: 433px; max-width: 443px">
        <div class="card" style="margin-top: 0px; margin-bottom: 0px;">
          <div class="row card-content" style="margin-bottom: 0px;">
              <div class="input-field">
                <label for="appID" class="active">App ID</label>
                <input type="text" placeholder="App ID" name="appID">
              </div>
              <div class="input-field">
                <label for="channel" class="active">Channel</label>
                <input type="text" placeholder="channel" name="channel">
              </div>
              <div class="input-field">
                <label for="token" class="active">Token</label>
                <input type="text" placeholder="token" name="token">
              </div>
              Host: <input id="role" type="checkbox" checked></input>
              <div class="row" style="margin: 0">
                <div class="col s12">
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="join">JOIN</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="leave">LEAVE</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="publish">PUBLISH</button>
                <button class="btn btn-raised btn-primary waves-effect waves-light" id="unpublish">UNPUBLISH</button>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="col s7">
        <div class="video-grid" id="video">
          <div class="video-view">
            <div id="local_stream" class="video-placeholder"></div>
            <div id="local_video_info" class="video-profile hide"></div>
            <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
          </div>
        </div>
      </div>
    </div>
  </form>
<script src="vendor/jquery.min.js"></script>
<script src="vendor/materialize.min.js"></script>
</body>
</html>

集成 SDK

选择如下任意一种方法获取 Agora Web SDK：

方法 1. 使用 npm 获取 SDK

使用该方法需要先安装 npm，详见 npm 快速入门。

运行安装命令

npm install agora-rtc-sdk

在你的项目的 Javascript 代码中添加一行：

import AgoraRTC from 'agora-rtc-sdk'

方法 2. 使用 CDN 方法获取 SDK

该方法无需下载安装包。在项目文件中，将以下代码添加到

创作场景

基于 Agora SDK 实现 Web 端的多人视频互动