实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web : JavaScript
  • 小程序
  • Flutter
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos2D
  • 产品简介
  • 下载
  • 体验 App
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 场景化音视频配置
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题
示例源码
GitHub下载
说明
功能体验
GitHub地址

示例源码运行指引

ZEGO 已统一环境概念,不再有正式/测试之分,2021-11-16 及之前在 ZEGO 控制台 创建项目的用户,请参考 测试环境废弃说明 进行 SDK 升级和调整相关代码。

本文介绍如何快速跑通示例源码,体验基础的音视频通话服务。

1 准备环境

在开始集成 ZEGO Express SDK 前,请安装浏览器,满足以下兼容性要求:

浏览器 Windows Mac Android iOS
Chrome 58 或以上 ✔️ ✔️ ✔️
FireFox 56 或以上 ✔️ ✔️ ✔️
Safari 11 或以上 - ✔️ - ✔️
Opera 45 或以上 ✔️ ✔️ 部分支持
QQ 浏览器最新版 ✔️ ✔️ 部分支持
360 安全浏览器极速模式 ✔️ ✔️
微信浏览器 - - ✔️
  • iOS 14.3 或以上版本,并且微信版本为 6.5 或以上时,支持推拉流
  • iOS 14.3 以下版本仅支持拉流
WebView - - ✔️
  • iOS 14.3 或以上版本支持推拉流
  • iOS 14.3 以下版本仅支持拉流

只支持 SSL 的 Web 服务器(https),localhost127.0.0.1 等同于 https

2 前提条件

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

3 示例源码目录结构

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

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

4 运行示例源码

  1. 下载的示例源码中缺少 SDK 初始化所需的 AppID 和 Server 地址,请使用支持的浏览器,打开 “./src/Examples/DebugAndConfig/InitSettings/index.html” 文件,输入前提条件中获取的 AppID 和 Server 地址后,点击“设置”。

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

Token 临时获取方式

为方便开发者调试,ZEGO 控制台 提供生成临时 Token 的功能,开发者可直接获取临时 Token 来使用,详情请参考 控制台 - 开发辅助。但是在开发者自己的线上环境中,一定要通过自己的服务端生成 Token。

/Pics/Web/ExpressSDK/SampleRunningGuide/UI_interface.png

如果页面存放的本地路径中带有中文字符,打开页面时,部分浏览器加载 CSS 等样式文件可能会失败,页面将显示异常。建议开发者将源码文件的路径名称全部设置为“英文字符”。

5 体验实时音视频功能

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

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