文档中心
视频通话 (Legacy)
Console 官网 社区 技术支持
简体中文
search-icon

实现视频通话 (Web SDK 3.x)

更新时间 2023/01/12 03:00:36
本文仅适用于声网 Web SDK 3.x 及之前版本。

根据本文指导快速集成声网 Web SDK 并在你自己的 app 里实现实时音视频通话。

前提条件

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

创建 Web 项目

  1. 创建一个文件夹作为视频通话应用的项目文件夹，在该文件夹下按照以下结构创建文件和目录：

    .
├── index.html
├── scripts
│   └── script.js
└── styles
   └── style.css

    其中，index.html 为视频通话应用的前端页面文件，scripts 目录下的 script.js 文件为实现视频通话功能的 JavaScript 代码，styles 目录下的 style.css 文件用于设置页面的样式。

  2. 将以下代码复制到 index.html 文件中。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video Call</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <h1>
        Video Call<br><small style="font-size: 14pt;">Powered by Agora.io</small>
    </h1>
    <h4>Local video</h4>
    <div id="me"></div>
    <h4>Remote video</h4>
    <div id="remote-container">
    </div>
    <script src="./scripts/script.js"></script>
</body>
</html>

  3. 将以下代码复制到 style.css 文件中。

    *{
    font-family: sans-serif;
}
h1,h4{
    text-align: center;
}
#me{
    position: relative;
    width: 50%;
    margin: 0 auto;
    display: block;
}
#me video{
    position: relative !important;
}
#remote-container{
    display: flex;
}
#remote-container video{
    height: auto;
    position: relative !important;
}

获取 SDK

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

方法 1. 使用 npm 获取 SDK

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

  1. 运行安装命令：

    npm install agora-rtc-sdk

  2. 在项目的 JavaScript 代码中引入 AgoraRTC 模块：

    import AgoraRTC from 'agora-rtc-sdk'

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

该方法无需下载安装包。在 index.html 中，将如下代码添加到 <head> 的下一行：

<script src="https://cdn.agora.io/sdk/release/AgoraRTCSDK-3.6.11.js"></script>

方法 3. 从官网获取 SDK

  1. 下载最新版声网 Web SDK 软件包。

  2. 将下载的软件包中的 AgoraRTCSDK-3.6.11.js 文件保存到 scripts 目录下。

  3. 在 index.html 中，将以下代码添加到 <head> 的下一行：

    <script src="./AgoraRTCSDK-3.6.11.js"></script>

基本流程

现在，我们已经将声网 Web SDK 集成到项目中了。接下来我们要在 script.js 文件中调用声网 Web SDK 提供的核心 API 实现基础的视频通话功能。

在使用声网 Web SDK 时，你会经常用到以下两种对象：

  • Client 对象，代表一个本地客户端。Client 类的方法提供了音视频通话的主要功能，例如加入频道、发布音视频流等。
  • Stream 对象，代表本地和远端的媒体流。Stream 类的方法用于定义媒体流对象的行为，例如流的播放控制、音视频的编码配置等。调用 Stream 方法时，请注意区分本地流和远端流对象。

实现一个简单的视频通话主要包括以下步骤：

  1. 创建并初始化一个本地客户端对象。
  2. 加入频道。
  3. 创建本地音视频流，并发布到频道中。
  4. 订阅频道中其他用户的音视频流。

下图展示了基础的一对一音视频通话的 API 调用。注意图中的方法是对不同的对象调用的。

为方便起见，我们先定义几个函数，用来处理错误、添加和移除远端用户的视频画面。在 script.js 文件开头添加以下代码：

// 处理错误的函数
let handleError = function(err){
        console.log("Error: ", err);
};

// 定义远端视频画面的容器
let remoteContainer = document.getElementById("remote-container");

// 将视频流添加到远端视频画面容器的函数
function addVideoStream(elementId){
        // 给每个流创建一个 div
        let streamDiv = document.createElement("div");
        // 将 elementId 分配到 div
        streamDiv.id = elementId;
        // 处理镜像问题
        streamDiv.style.transform = "rotateY(180deg)";
        // 将 div 添加到容器
        remoteContainer.appendChild(streamDiv);
};

// 将视频流从远端视频画面容器移除的函数
function removeVideoStream(elementId) {
        let remoteDiv = document.getElementById(elementId);
        if (remoteDiv) remoteDiv.parentNode.removeChild(remoteDiv);
};

1. 创建本地客户端

创建并初始化一个用于控制通话的客户端对象。你需要将 yourAppId 替换为你的声网项目的 App ID。详见 获取 App ID。 

let client = AgoraRTC.createClient({
    mode: "rtc",
    codec: "vp8",
});

client.init("yourAppId", function() {
    console.log("client initialized");
}, function(err) {
    console.log("client init failed ", err);
});
  • 在 AgoraRTC.createClient 方法中，需注意 mode 和 codec 这两个参数的设置：
    • mode 用于设置频道场景。一对一或多人通话中，建议设为 "rtc" ，使用通信场景；互动直播中，建议设为 "live"，使用直播场景。
    • codec 用于设置浏览器使用的编解码格式。如果你需要使用 Safari 12.1 及之前版本，将该参数设为 "h264"；其他情况推荐设为 "vp8"。

2. 加入频道

调用 client.join 加入频道。

在 client.join 中你需要将 yourToken 替换成你自己生成的 Token。

// 加入频道
client.join("yourToken", "myChannel", null, (uid)=>{
    // 创建本地媒体流
}, handleError);

3. 创建并发布本地流

将以下代码复制到 client.join 示例代码中的 // 创建本地音视频流 下方。

let localStream = AgoraRTC.createStream({
    audio: true,
    video: true,
}); 
// 初始化本地流
localStream.init(()=>{
    // 播放本地流
    localStream.play("me");
    // 发布本地流
    client.publish(localStream, handleError);
}, handleError);

4. 订阅远端流

当远端流发布到频道时，会触发 stream-added 事件，我们需要通过 client.on 监听该事件并在回调中订阅新加入的远端流。

// 有远端用户发布流时进行订阅
client.on("stream-added", function(evt){
    client.subscribe(evt.stream, handleError);
});
// 订阅成功后播放远端用户的流
client.on("stream-subscribed", function(evt){
    let stream = evt.stream;
    let streamId = String(stream.getId());
    addVideoStream(streamId);
    stream.play(streamId);
});

当远端用户取消发布流或者退出频道时，关闭及移除对应的流。

// 远端用户取消发布流时，关闭及移除对应的流。
client.on("stream-removed", function(evt){
    let stream = evt.stream;
    let streamId = String(stream.getId());
    stream.close();
    removeVideoStream(streamId);
});
// 远端用户离开频道时，关闭及移除对应的流。
client.on("peer-leave", function(evt){
    let stream = evt.stream;
    let streamId = String(stream.getId());
    stream.close();
    removeVideoStream(streamId);
});

运行项目

我们建议在本地 Web 服务器上运行和测试你的项目。这里我们用 npm 的 live-server 设置一个本地服务器。

  • 在本地服务器（localhost）运行 Web 应用仅作为测试用途。部署生产环境时，请确保使用 HTTPS 协议。
  • 由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制，声网 Web SDK 仅支持 HTTPS 协议或者 http://localhost（http://127.0.0.1），请勿使用 HTTP 协议部署你的项目。

    1. 安装 live-server。在命令行中运行以下命令：

      npm i live-server -g

    2. 在命令行中进入你的项目所在的目录。

    3. 运行项目。

      live-server .

      现在你的浏览器应该会自动打开 index.html 页面。

    4. 浏览器会弹窗要求摄像头和麦克风权限，点击允许，你现在应该可以看到自己的视频画面。

    5. 在浏览器中复制当前标签页，现在你应该可以在这两个标签页上分别看到两个视频画面。

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

    • INVALID_VENDOR_KEY：App ID 或 Token 错误，检查你填写的 App ID 及 Token。
    • DYNAMIC_USE_STATIC_KEY：你的声网项目启用了 App 证书，需要在加入频道时填写 Token。
    • Media access:NotFoundError：检查你的摄像头和麦克风是否正常工作。
    • MEDIA_NOT_SUPPORT：请使用 HTTPS 协议或者 localhost。
    声网 Web SDK 不支持在浏览器上模拟移动设备调试。

    相关链接

    GitHub 示例项目

    我们在 GitHub 上提供以下开源的视频通话示例项目供你参考：

    WordPress 插件

    声网视频 WordPress 插件可以让你轻松地将实时音视频功能添加到你的 WordPress 帖子和页面。详见 WordPress 插件快速集成教程。

    常见问题