如今，无论是电商带货、娱乐直播，还是在线教育、远程医疗、体育赛事等需要触达大规模用户的直播场景，不少开发者都会选择云直播SDK的接入方式。

即构超低延迟直播具有超低延迟、超强同步、抗极端若望、超低卡顿、超清画质、首帧秒开的优势，有效解决 CDN 的延迟高、同步性差、弱网播放不稳定等痛点，助力业务指标增长。

本文将介绍如何通过即构超低延迟直播 SDK快速集成Web端云直播。接下来我们看看完整的实现流程。

跑通示例源码

1.1 准备环境

在开始集成 ZEGO Express SDK 前，请按照以下兼容性要求，安装浏览器：

浏览器 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 版本的操作系统的华为浏览器

注意：仅支持 SSL 的 Web 服务器（HTTPS）。本地调试工具的 Web 服务域名可使用 localhost 或 127.0.0.1。

1.2 前提条件

已在 ZEGO 控制台 创建项目，申请有效的 AppID，以及获取到接入服务器的 “Server 地址”，详情请参考 控制台 - 项目管理 中的“项目信息”。

注意：Server 地址并非 ServerSecret，您可以参考下图在 ZEGO 控制台获取 Server 地址

1.3 示例源码目录结构

以下目录结构为 express-demo-web 子目录的文件结构，下文所涉及的文件路径均为相对于此目录的路径。

.
├── README.md
...
└── src  # 源码文件夹
    ├── Examples  # 示例代码
    │   ├── AdvancedAudioProcessing   # 音频进阶功能
    │   ├── AdvancedStreaming         # 推拉流进阶
    │   ├── AdvancedVideoProcessing   # 视频进阶功能
    │   ├── CommonFeatures            # 常用功能
    │   ├── DebugAndConfig            # 调试与配置
    │   ├── Framework                 # 最佳实践/框架相关
    │   ├── Others                    # 其他功能
    │   ├── QuickStart                # 快速开始
    │   └── Scenes                    # 最佳实践/场景相关
    ├── assets    # 资源文件夹，存放项目共用的资源文件，包括sdk、各类依赖库、翻译相关的配置文件等
    └── KeyCenter.js  # 配置相关文件，可以填写申请的appID、server地址等

1.4 运行示例源码

  1. 在下载的示例源码中，使用支持的浏览器，打开 “./src/Examples/DebugAndConfig/InitSettings/index.html” 文件，输入 前提条件 中获取的 AppID 和 Server 地址（不是 ServerSecret）后，单击“设置”。

  1. 设置完成后，可以开始体验 Demo 功能，即可使用支持的浏览器，打开 “./src/Examples” 文件夹下各场景功能的 HTML 文件。例如打开 “QuickStart/CommonUsage” 文件夹下的 “index.html”。

1.5 体验实时音视频功能

在真机中运行项目，运行成功后，可以看到本端视频画面。

为方便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输入相同的 AppID、RoomID，输入不同的 UserID、以及对应的 Token，即可加入同一房间与真机设备互通。当成功开始音视频通话时，可以听到远端的音频，看到远端的视频画面。

集成SDK

2.1 准备环境

在开始集成 ZEGO Express SDK 前，请确保开发环境满足以下要求：

  • Windows 或 macOS 开发电脑已经连接到 Internet。

  • 满足 Express Web SDK 兼容性的浏览器（具体请参考 浏览器兼容性和已知问题），推荐使用最新版本的 Google Chrome 浏览器。

2.2 集成 SDK

开发者可通过以下任意一种方式集成 SDK。

方式 1：使用包管理器自动集成（推荐）

  1. 下载并安装Node.js。

  2. 新建项目

新建文件夹 创建index.html , index.js

├── index.html ├── index.js

在命令行中执行

npm create vue@latest

选择默认选项即可

> npx
> create-vue
Vue.js - The Progressive JavaScript Framework
✔ 请输入项目名称： … zego_web_vue_demo
✔ 是否使用 TypeScript 语法？ … [否] / 是
✔ 是否启用 JSX 支持？ … [否] / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … [否] / 是
✔ 是否引入 Pinia 用于状态管理？ … [否] / 是
✔ 是否引入 Vitest 用于单元测试？ … [否] / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ › 否
正在初始化项目 /xxx/zego_web_vue_demo...
项目初始化完成，可执行以下命令：
 cd zego_web_vue_demo
 npm install
 npm run dev

在命令行中执行

npm create vite@latest zego_web_react_demo --  --template react
> npx
> create-vite zego_web_react_demo --template react
Scaffolding project in /xxx/zego_web_react_demo...
Done. Now run:
 cd zego_web_react_demo
 npm install
 npm run dev

  1. 通过包管理器 安装 SDK。

在项目的根目录下执行以下命令安装依赖。

npm install zego-express-engine-webrtc
yarn add zego-express-engine-webrtc
pnpm add zego-express-engine-webrtc

说明：

  • 安装的依赖包支持 typescript 语言。

  • 如果在 macOS 或 Linux 系统中执行安装命令失败，提示 “permission denied”，请在SDK安装命令前加上 sudo 重新执行即可。

  1. 在项目中文件中引入SDK，示例代码如下：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Zego Web Demo</title>
</head>
<body>
 <h1>Zego Web Demo</h1>
 <script src="index.js" type="module"></script>
</body>
</html>

完整引入和按需引入 SDK。

完整集成SDK

如果您需要完整集成 ZEGO Web SDK，请参考如下代码，在 “index.js” 文件中引入完整的 SDK。

import {ZegoExpressEngine} from 'zego-express-engine-webrtc'

单独集成功能模块

请注意，在创建 ZegoExpressEngine 实例时，开发者必须通过 import { ZegoExpressEngine } from "zego-express-engine-webrtc/esm" 引入某个功能模块，才能实现按需集成的效果。 请根据您业务需要，选择需要使用的功能，通过 zego-express-engine-webrtc/esm 路径引入。

import { ZegoExpressEngine } from "zego-express-engine-webrtc/esm"
// 引入 CDN 模块
import { StreamCDN } from "zego-express-engine-webrtc/esm/stream-cdn"
// 引入 混音 模块
import { AudioMix } from "zego-express-engine-webrtc/esm/audio-mix"
// 引入 混流 模块
import { MixStream }  from "zego-express-engine-webrtc/esm/mix-stream"
// 引入 范围语音 模块
import { RangeAudio } from 'zego-express-engine-webrtc/esm/range-audio';
// 引入 美颜 模块
import { BeautyEffect } from 'zego-express-engine-webrtc/esm/beauty-effect';
ZegoExpressEngine.use(StreamCDN);
ZegoExpressEngine.use(AudioMix);
ZegoExpressEngine.use(MixStream);
ZegoExpressEngine.use(RangeAudio);
ZegoExpressEngine.use(BeautyEffect);

方式2：从官网下载 SDK，手动集成

  1. 下载最新版本的 SDK 并解压到项目文件夹，我们可以在 “dist_js/” 下找到 “ZegoExpressWebRTC-x.x.x.js” 文件。

  2. 在 VSCode中打开项目文件夹并新建 “index.html” 文件。

  1. 在 “index.html” 文件中编写界面代码，并在文件的 head 标签内使用 script 标签引入 “ZegoExpressWebRTC-x.x.x.js”。其中，“x.x.x” 为 SDK 的版本号，请参考第 1 步压缩包解压后的文件名修改。

index.html 代码示例如下：

<html>
 <head>
   <meta charset="UTF-8">
   <title>Zego RTC Web Demo</title>
   <script src="./dist_js/ZegoExpressWebRTC-x.x.x.js"></script>
 </head>
 <body>
   <h1>
     Zego RTC Web Demo
   </h1>
 </body>
 <script>
   (async () => {
     // 此处添加后续的代码...
   })();
 </script>
</html>

至此，通过即构超低延迟直播 SDK 快速集成Web端云直播的开发部分已完成！集成过程碰到问题可进入ZEGO即构科技 - 帮助全球企业即刻构建语音视频通讯能力即构官网查看

# 前端 # 实时音视频 # webrtc
Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

cover

RTC、直播、点播技术对比｜腾讯云/即构/声网如何选型 — 2025 版

avatar 即构开发者社区
cover

如何用即构ZEGO SDK和uni-app开发一款直播带货应用？

avatar 即构开发者社区

企业如何选对 AI 对话技术方案？一文读懂关键决策要点

实时音视频通信（RTC）正与AI技术深度融合，向智能化交互演进。AI情感陪伴、语言练习、智能客服等场景成为典型应用，AI可实时理解用户情绪并提供个性化服务。选型需关注三大要素：交互体验（延迟与识别准确性）、功能丰富度（多轮对话、数字人等模块）、成本结构（计费模式与扩展性）。主流厂商中，ZEGO在延迟控制和准确率表现突出，声网适合全球化需求，火山引擎侧重视觉内容，阿里云满足高合规要求，腾讯在多模态语

avatar 即构开发者社区