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

本文会详细介绍如何建立一个简单的项目并使用 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

开发条件

1. 安装一款 Agora Web SDK 支持的浏览器，如下表所示：

2. 获得一个有效的 Agora 账号。 

注：如果你的网络环境部署了防火墙，请根据声网文档中心的「应用企业防火墙限制」打开相关端口。

设置开发环境

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

创建 Web 项目

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

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

• common.css

• jquery.min.js

• materialize.min.js

以下为示例：

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

1. 新建一个 HTML 文件。这里我们将文件命名为 index.html（以下简称项目文件）。

2. 用一个代码编辑器（例如 VS Code）打开该文件。

3. 复制以下代码，粘贴到项目文件中。
该步骤会为你的项目创建前端页面的 UI。这里我们直接用了 Agora 示例项目中的代码，你也可以自定义你的 UI。

 

   

     
Basic Communication
   
 


 

   

     

       

           

             App ID
             
           
           

             Channel
             
           
           

             Token
             
           
           

             

             JOIN
             LEAVE
             PUBLISH
             UNPUBLISH
             
           
       
     
   
   

     

       

         

         

         

       
     
   
 

集成 SDK

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

方法 一、 使用 npm 获取 SDK

1. 运行安装命令

npm install agora-rtc-sdk

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

import AgoraRTC from 'agora-rtc-sdk'

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

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