本文会详细介绍如何建立一个简单的项目并使用 Agora Web SDK 实现基础的一对一视频通话。

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

Demo 体验

我们在 GitHub 上提供一个开源的基础一对一视频通话示例项目，在开始开发之前你可以通过该示例项目体验音视频通话效果。
Github：https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-Tutorial-1to1

开发条件

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

设置开发环境

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

创建 Web 项目

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

我们提供的示例代码使用了一些第三方的库文件来实现页面的样式和布局，你可以访问本文开篇的 Github 地址，在文件夹「vendor」中获得以下文件，或者使用其他方式实现。

common.css
jquery.min.js
materialize.min.js

以下为示例：

这个项目只需要用到一个 HTML 文件。

新建一个 HTML 文件。这里我们将文件命名为 index.html（以下简称项目文件）。
用一个代码编辑器（例如 VS Code）打开该文件。
复制以下代码，粘贴到项目文件中。
该步骤会为你的项目创建前端页面的 UI。这里我们直接用了 Agora 示例项目中的代码，你也可以自定义你的 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 Communication</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 Communication</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>
           <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：
方法一、使用 npm 获取 SDK

运行安装命令

npm install agora-rtc-sdk

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

import AgoraRTC from 'agora-rtc-sdk'

方法二、使用 CDN 方法获取 SDK

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

创作场景

基于 Agora Web SDK 实现一对一视频通话