在远程沟通成为常态的今天，Web 端一对一视频通话已成为在线问诊、远程面试、私教辅导、亲友闲聊等场景的核心需求。但开发者往往面临一些痛点：延迟高到对话 "不同步"、画质模糊到细节 "看不清"、接入复杂到开发 "耗时长"......
作为极速视频的核心组件，ZEGO RTC 通过深度优化的音视频引擎与全球化网络布局，为您提供极致低延迟与弱网抗性、影院级别的音视频质量、无限玩法与场景及海量能力API ,为在线医疗、远程面试、私教辅导等具体场景深度赋能，实现从技术到业务的价值转化。
因此，本期推文我们就来仔细讲讲，如何基于 ZEGO RTC 实现 web 端一对一视频通话，为您提供具体的场景落地思路
实时音视频 SDK 核心流程拆解
1、跑通示例代码，体验基础的音视频通话服务
1.1 前提条件
已在 ZEGO 控制台 创建项目，申请有效 AppID ，并获取接入服务器的 "Server地址"，详细请参考控制台---项目管理中的 "项目信息"。
1.2 准备环境
按照以下兼容性要求安装浏览器：
|----------------|--------------|--------------|--------------|----------------------------------------------------------|----------------------------------------------------|
| 浏览器 | Windows | Mac | Android | iOS | Harmony OS |
| Chrome 58 或以上 | ✔️ | ✔️ | ✔️ | iOS 14.3 或以上版本支持推拉流iOS 14.3 以下版本仅支持拉流 | ✖ |
| FireFox 56 或以上 | ✔️ | ✔️ | ✔️ | ✖ | ✖ |
| Safari 11 或以上 | ------------ | ✔️ | ------------ | ✔️ | ✖ |
| Opera 45 或以上 | ✔️ | ✔️ | 部分支持 | ✖ | ✖ |
| QQ 浏览器最新版 | ✔️ | ✔️ | 部分支持 | ✖ | ✖ |
| 360 安全浏览器极速模式 | ✔️ | ✔️ | ✖ | ✖ | ✖ |
| 微信浏览器 | ------------ | ------------ | ✔️ | iOS 14.3 或以上版本，并且当微信版本为 6.5 或以上时，支持推拉流iOS 14.3 以下版本仅支持拉流 | ✖ |
| WebView | ------------ | ------------ | ✔️ | iOS 14.3 或以上版本支持推拉流iOS 14.3 以下版本仅支持拉流 | ✖ |
| 华为浏览器 | ✖ | ✖ | ✖ | ✖ | Mate 60 Pro 机型、HarmonyOS NEXT beta 2 版本的操作系统的华为浏览器 |
1.3 运行示例代码
获取示例代码：👉**Github下载** 👉**Gitee下载**
①在下载的示例源码中，使用支持的浏览器，打开 "./src/Examples/DebugAndConfig/InitSettings/index.html" 文件，输入 前提条件 中获取的 AppID 和 Server 地址后，单击" 设置 "。
②设置完成后，可以开始体验 Demo 功能，即可使用支持的浏览器，打开 "**./src/Examples** "文件夹下各场景功能的 HTML 文件。例如打开 "QuickStart/CommonUsage"文件夹下的"index.html"。
1.4 体验实时音视频功能
在真机中运行项目，运行成功后，可以看到本端视频画面。
为方便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入不同的 UserID、以及对应的 Token，即可加入同一房间与真机设备互通。当成功开始音视频通话时，可以听到远端的音频，看到远端的视频画面。
2、集成SDK
2.1 使用包管理器自动集成（推荐）
2.1.1 下载并安装 Node.js
2.1.2 新建项目
|-------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML | 新建文件夹 创建index.html , index.js 
|
| Vue | 在命令行中执行 
选择默认选项即可 
|
| React | 在命令行中执行 
|
2.1.3 通过包管理安装SDK
在项目的根目录下执行以下命令安装依赖。
|------|----------------------------------------------------------------------------|
| npm | 
|
| yarn | 
|
| pnpm | 
|
2.1.4 在项目文件中引入 SDK，示例代码如下：
|-------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML | index.html: 
index.js: 
|
| Vue | app.vue: 
|
| React | app.jsx: 
|
2.1.5 完整引入和按需引入 SDK
①完整集成：
参考如下代码，在 "index.js" 文件中引入完整的 SDK。
②单独集成功能模块：
在创建 ZegoExpressEngine 实例时，开发者必须通过 import { ZegoExpressEngine } from "zego-express-engine-webrtc/esm" 引入某个功能模块，才能实现按需集成的效果。 请根据您业务需要，选择需要使用的功能，通过 zego-express-engine-webrtc/esm 路径引入。
如果您未集成某个功能模块、但调用了模块相关的 API 接口，SDK 将返回错误码 1101003 及相关提示。
2.2 从技术文档下载 SDK，手动集成
1.下载最新版本的**SDK** 并解压到项目文件夹，我们可以在 dist_js/ 下找到**ZegoExpressWebRTC-x.x.x.js**文件。
2.在 VSCode 中打开项目文件夹并新建 **index.html**文件。
3.在 index.html 文件中编写界面代码，并在文件的**head** 标签内使用 script 标签引入**ZegoExpressWebRTC-x.x.x.js** 。其中 **x.x.x**为 SDK 的版本号，请参考第 1 步压缩包解压后的文件名修改。
3、实现视频通话
3.1 前提条件
已在项目中集成 ZEGO Express SDK，详情请参考 快速开始 - 集成。
已在 ZEGO 控制台 创建项目，申请有效的 AppID 和 Server 地址，详情请参考 控制台 - 项目管理 中的"项目信息"。
3.2 实现流程
以用户 A 拉取用户 B 的流为例，一次简单的实时音视频通话主要流程如下：
①用户 A 创建实例，登录房间。（登录成功后，可预览自己的画面并推流。）
②用户 B 创建实例，登录同一个房间。登录成功后，用户 B 开始推流，此时 SDK 会触发 roomStreamUpdate 回调，表示房间内有流的变化。
③用户 A 可通过监听 roomStreamUpdate 回调，当回调通知有流新增时，获取用户 B 的流 ID，来拉取播放用户 B 刚刚推送的流。
3.2.1 创建界面
为方便实现基本的实时音视频功能，您可参考下图实现一个简单的页面。
3.2.2 创建引擎并监听回调
①创建并初始化一个 ZegoExpressEngine 的实例，将您项目的 AppID 传入参数 "appID"，Server 传入参数 "server"。
②SDK 提供如房间连接状态、音视频流变化、用户进出等通知回调。创建引擎后，您可以通过引擎实例的 on 方法注册回调。
代码如下
3.2.3 检测兼容性
调用 checkSystemRequirements 接口检测浏览器的兼容性，检测结果的含义，请参考 ZegoCapabilityDetection 接口下的参数描述。
您还可以通过 ZEGO 提供的 在线检测工具，在需要检测的浏览器中打开，直接检测浏览器的兼容性。请参考 浏览器兼容性和已知问题 获取 SDK 支持的浏览器兼容版本。
3.2.4 登录房间
①生成 Token
登录房间需要用于验证身份的 Token，开发者可直接在 ZEGO 控制台 获取临时 Token（有效期为 24 小时）来使用，详情请参考 控制台 - 项目管理中的 "项目信息"。
②登录房间
调用 loginRoom 接口，传入房间 ID 参数 "roomID"、"token" 和用户参数 "user"，根据实际情况传入参数 "config"，登录房间。如果房间不存在，调用该接口时会创建并登录此房间。
您可以监听 roomStateChanged 回调实时监控自己与房间的连接状态。只有当房间状态是连接成功时，才能进行推流、拉流等操作。如果登录房间失败，可参考 错误码 进行操作。
3.2.5 预览自己的画面，并推送到 ZEGO 音视频云
①创建流并预览自己的画面
开始推流前需要创建本端的音视频流，调用 createZegoStream 接口获取 ZegoLocalStream 实例对象 localStream，默认会采集摄像头画面和麦克风声音。
通过 localStream 的 playVideo、playAudio 接口，创建本地媒体流播放组件，播放待推送或者已经成功推流的音视频。
②需等待 createZegoStream 接口返回 ZegoLocalStream 实例对象 localStream 后，再将自己的音视频流推送到 ZEGO 音视频云。
调用 startPublishingStream 接口，传入 "streamID" 和创建流得到的流对象 "localStream"，向远端用户发送本端的音视频流。
3.2.6 拉取其他用户的音视频
房间内有其他用户加入时，SDK 会触发 roomStreamUpdate 回调，通知房间内有流新增，基于此可获取其他用户的 "streamID"。此时，调用 startPlayingStream 接口根据传入的其他用户的 "streamID"，拉取远端已推送到 ZEGO 服务器的音视频画面。若需要从 CDN 拉流，可参考 使用 CDN 直播。
至此，您已经成功实现了简单的音视频通话功能，您可在浏览器中打开index.html，体验实时音视频功能。
4、场景化音视频配置
创建并初始化一个 ZegoExpressEngine 的实例， ZegoOptions 参数中的 scenario 字段需要指定一个场景（ZegoScenario），您可以根据实际音视频业务场景进行选择。
目前SDK支持以下场景
|----------------------|-----|----------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| 场景（支持版本：2.21.0 及以上） | 场景值 | 场景描述 | 关键配置说明 |
| Default | 3 | 默认（通用）场景，如果上述场景枚举均不符合开发者的实际应用场景，可以使用此默认场景。 | 分辨率：480p。帧率：15 fps。 |
| StandardVideoCall | 4 | 标准音视频通话场景，适用于 1v1 视频或语音通话场景。 | 分辨率：360p。帧率：15 fps。音频编码器兼容：仅可用于 RTC 推流，转推 CDN 时需要服务端转码。 |
| HighQualityVideoCall | 5 | 高品质音视频通话场景，与 StandardVideoCall（4）场景类似，但该场景默认采用了比 StandardVideoCall（4）场景更高的视频配置，适用于对画质要求较高的视频通话场景。 | 分辨率：540p。帧率：25 fps。 |
| StandardChatroom | 6 | 标准语聊房场景，适用于多人纯语音通话，节省流量。此场景中，默认不开启摄像头。建议存在音乐的语聊房场景选择高品质语聊房场景配置。 | ------ |
| HighQualityChatroom | 7 | 高品质语聊房场景，与 StandardChatroom（6）场景类似，但此场景默认采用比 StandardChatroom（6）场景下更高的音频配置，适用于对音质要求较高的多人纯语音通话场景。此场景中，默认不开启摄像头。此场景枚举，在 2.26.0 及以上的 SDK 版本才支持。 | ------ |
| Broadcast | 8 | 直播场景，适用于秀场、游戏、电商、教育大班课等一对多直播的场景中，对音画质量、流畅度、兼容性等进行了优化。直播场景中，SDK 没有业务上的 "角色" 之分（例如主播、观众），房间内的所有用户均可推拉流。 | 分辨率：540p。帧率：20 fps。音频编码器兼容：与 iOS、Android、Windows 或 macOS 平台的 SDK 互通时，需要通过服务端转码。 |
| Karaoke | 9 | 卡拉 OK (KTV) 场景，适用于实时合唱、在线 K 歌场景，保障了多人合唱时精准对齐和超低时延。此场景枚举，在 3.10.0 及以上的 SDK 版本才支持 | 音频编码器兼容：仅可用于 RTC 推流，转推 CDN 时需要服务端转码。 |
ZEGO RTC------让远程互动更自然
Web 端一对一视频通话的核心是"还原面对面互动的真实感"。当前，ZEGO RTC 已服务数千家企业，以服务保障客户核心业务的稳定运行。
关注 ZEGO 开发者，更多的实用、有趣高级功能拓展以及应用场景介绍持续更新中，敬请期待！