跨平台开发需求越来越多，Flutter一次开发能多端使用，很多开发者做音视频应用都首选它。ZEGO SDK专门适配了 Flutter，能帮大家快速搞定音视频开发难点，轻松实现跨端通话。

这篇教程不搞复杂操作，只讲核心流程，从环境准备、项目配置到 SDK 集成、功能实现，一步步教你搭好跨端音视频聊天应用，Flutter 新手也能快速上手。

一、开发前准备：基础环境与项目配置

开始集成前，先完成开发环境与ZEGO项目准备，避免后续踩坑。

1.开发环境要求

• Flutter 2.0 或以上版本。

• iOS 12.0 或以上版本，且支持音视频的 iOS 设备或模拟器（推荐使用真机）。

• Android 4.4 或以上版本，且支持音视频的 Android 设备或模拟器（推荐使用真机）。如果为真机，请开启“允许调试”选项。

• Windows 8 或以上版本。

• macOS 10.14 或以上版本。

• Web：Chrome 58 或以上版本、Firefox 56 或以上版本、Safari 11 或以上版本、Opera 45 或以上版本、QQ 浏览器： Windows 10.1 或以上版本/macOS 4.4 或以上版本、360 安全浏览器极速模式。

• Linux：Debian 10 或以上版本、Ubuntu 20.04 LTS、22.04 LTS、24.04 LTS。

• 设备已经连接到 Internet。

请配置开发环境如下：

• Android Studio：“Preferences > Plugins”，搜索 “Flutter” 插件进行下载，并在插件中配置已经下载好的 Flutter 的 SDK 路径。

• VS Code: 在应用商店中搜索 “Flutter” 扩展并下载。

以上任一开发环境配置好 Flutter 环境后，在终端执行 flutter doctor，根据提示内容补全相关未下载的依赖项。
 

2.ZEGO控制台项目创建

• 进入ZEGO 即构官网，注册账号并进入ZEGO 控制台

• 点击「创建项目」，选择实时音视频场景，生成专属AppID（应用唯一标识）

• 获取临时 Token：控制台项目信息页直接领取，有效期 24 小时，仅用于开发调试

二、Flutter项目创建与SDK集成

1. 项目设置

• 开始集成前，请参考Flutter文档 - Get Started.创建一个 Flutter 项目。如已有项目，本步骤可忽略；

• 接下来我们需要对项目做一下简单的配置，便于导入和使用ZEGO Flutter SDK；

2.导入 SDK

打开 “pubspec.yaml” 文件，添加 “zego_express_engine” 依赖，有以下两种形式：

• 以 “pub” 形式依赖（推荐）：

dependencies:
  flutter:
  sdk: flutter
  zego_express_engine: ^3.10.3

• 以 “git” 形式依赖：

dependencies:
flutter:
sdk: flutter
zego_express_engine:
  git:
    url: git://github.com/zegoim/zego-express-flutter-sdk.git
    ref: master

• 添加完成并保存文件后，在终端执行 flutter pub get

3.设置权限

以上步骤集成已完成，为保证SDK运行效果更佳，需要在应用中根据实际应用需要，设置应用所需权限。步骤如下：

3.1 Android 添加权限

• 进入 “app/src/main” 目录，打开 “AndroidManifest.xml” 文件，添加权限。

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

<!-- Permissions required by the Demo App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

因为 Android 6.0 在一些比较重要的权限上要求必须申请动态权限，不能只通过 “AndroidMainfest.xml” 文件申请静态权限。请在 Android 原生层参考执行如下代码，其中 “requestPermissions” 是 “Activity” 的方法。

String[] permissionNeeded = {
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"};

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.CAMERA") != PackageManager.PERMISSION_GRANTED ||
        ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
}

• 具体的权限说明如下：

3.2 iOS 添加权限

• 打开项目，选择 “TARGETS > Info > Custom iOS Target Properties”。
  

• 单击 “+” 按钮，添加摄像头和麦克风权限。

Privacy - Camera Usage Description

Privacy - Microphone Usage Description

• 权限添加完成后，如图所示：
  

4. 实现流程

• 用户通过 ZEGO Express SDK 进行视频通话的基本流程为：

用户 A、B 加入房间，用户 B 预览并将音视频流推送到 ZEGO 云服务（推流），用户 A 收到用户 B 推送音视频流的通知之后，在通知中播放用户 B 的音视频流（拉流）。

• 整个推拉流过程的 API 调用时序如下图：
  

4.1 创建引擎

• 在项目中引入 SDK

import 'package:zego_express_engine/zego_express_engine.dart';

2. 创建引擎

调用 createEngineWithProfile 接口，将申请到的 AppID 和 AppSign 传入参数 “appID” 和 “appSign”。 为防止 “appsign” 暴露，Web 平台请勿传入 “appsign”。

ZegoEngineProfile profile = ZegoEngineProfile(
    appID, // 请通过官网注册获取，格式为：1234567890
    ZegoScenario.General, // 通用场景接入
    appSign: appSign，// 请通过官网注册获取，格式为：'0123456789012345678901234567890123456789012345678901234567890123'（共64个字符），Web 平台无需传入
    enablePlatformView: true); //Web 平台需为true
// 创建引擎
ZegoExpressEngine.createEngineWithProfile(profile);

4.2 登录房间

a.登录 传入用户 ID 参数 “userID” 创建 ZegoUser 用户对象后，调用 loginRoom 接口，传入房间 ID 参数 “roomID” 和用户参数 “user”，登录房间。如果房间不存在，调用该接口时会创建并登录此房间。

• 同一个 AppID 内，需保证 “roomID” 信息的全局唯一。

• 同一个 AppID 内，需保证 “userID” 全局唯一，建议开发者将其设置成一个有意义的值，可将 “userID” 与自己业务账号系统进行关联。

• “ZegoUser” 的构造方法 ZegoUser.id 会将 “userName” 设为与传的参数 “userID” 一样。“userID” 不能为 “null”，否则会导致登录房间失败。

// 创建用户对象
ZegoUser user = ZegoUser.id('user1');
// 只有传入 “isUserStatusNotify” 参数取值为 “true” 的 ZegoRoomConfig，才能收到 onRoomUserUpdate 回调。
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.isUserStatusNotify = true;
// 如果您使用 appsign 的方式鉴权，token 参数不需填写；如果需要使用更加安全的 鉴权方式： token 鉴权，Web 平台仅支持 token 鉴权，请参考[如何从 AppSign 鉴权升级为 Token 鉴权](https://doc-zh.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// config.token = "xxxx";
// 开始登录房间
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

b. 监听登录房间后的事件回调

根据实际应用需要，在登录房间后监听想要关注的事件通知，比如房间状态更新、用户状态更新、流状态更新等。

• onRoomStateUpdate：房间状态更新回调。登录房间后，当房间连接状态发生变更（如出现房间断开，登录认证失败等情况），SDK 会通过该回调通知。

• onRoomUserUpdate：用户状态更新回调。登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调通知。

• 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且 “isUserStatusNotify” 参数取值为 “true” 时，用户才能收到 onRoomUserUpdate 回调。

• onRoomStreamUpdate：流状态更新回调。登录房间后，当房间内有用户新推送或删除音视频流时，SDK 会通过该回调通知。

// 以下为常用的房间相关回调
// 房间状态更新回调
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

// 用户状态更新
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    // 根据需要实现事件回调
};

// 流状态更新
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    // 根据需要实现事件回调
};

4.3 推流

a. 开始推流

调用 startPublishingStream 接口，传入流 ID 参数 “streamID”，向远端用户发送本端的音视频流。

同一个 AppID 内，需保证 “streamID” 全局唯一。如果同一个 AppID 内，不同用户各推了一条 “streamID” 相同的流，会导致后推流的用户推流失败。

// 开始推流
ZegoExpressEngine.instance.startPublishingStream("streamID");

b. 监听推流后的事件回调

根据实际应用需要，在推流后监听想要关注的事件通知，比如推流状态更新等。

onPublisherStateUpdate：推流状态更新回调。调用推流接口成功后，当推流状态发生变更（如出现网络中断导致推流异常等情况），SDK 在重试推流的同时，会通过该回调通知。

// 常用的推流相关回调
// 推流状态更新回调
ZegoExpressEngine.onPublisherStateUpdate = (String streamID, ZegoPublisherState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

4.4 拉流

a.开始拉流 调用 startPlayingStream 接口，根据传入的流 ID 参数 “streamID”，拉取远端推送的音视频流，并根据需要渲染拉流画面。

• 若仅需拉音频流，不需要显示拉流画面，可直接调用 startPlayingStream 接口。

ZegoExpressEngine.instance.startPlayingStream(streamID);

• 若需要在拉流的同时，渲染拉流画面，Flutter 的渲染方式有两种：PlatformView 与 TextureRenderer。

  • Android 和 iOS 可以通过创建引擎时设置 “enablePlatformView” 参数，选择使用 TextureRenderer 还是 PlatformView。

  • Web 平台仅支持 PlatformView 的方式，且不存在资源和稳定性问题。

  • Windows、MacOS 目前仅支持 TextureRenderer 的方式。

createCanvasView接口使用展示

• 接口内部会根据创建引擎时设置的 “enablePlatformView” 参数及平台支持的方式，自动选择使用 TextureRenderer 或者 PlatformView 。

• Android、iOS 及 MacOS 平台会根据创建引擎时设置 “enablePlatformView” 参数，选择使用 TextureRenderer 还是 PlatformView。

• Web、Windows 和 Linux 不会受创建引擎时设置 “enablePlatformView” 参数影响，只使用支持的方式。

获取预览用的 Widget，然后使用 viewID 创建一个 ZegoCanvas 对象，开始预览。

// 将此 Widget 加入到页面的渲染树中以显示预览画面
_playViewWidget = await ZegoExpressEngine.instance.createCanvasView((viewID) {
    _playViewID = viewID;

    // Set the playing canvas
    ZegoCanvas canvas = ZegoCanvas.view(viewID);

    // Start playing
    ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: canvas);
});

b.监听拉流后的事件回调

根据实际应用需要，在拉流后监听想要关注的事件通知，比如拉流状态更新等。

onPlayerStateUpdate：拉流状态更新回调。调用拉流接口成功后，当拉流状态发生变更（如出现网络中断导致推流异常等情况），SDK 在重试拉流的同时，会通过该回调通知。

// 常用的拉流相关回调
// 拉流状态相关回调
ZegoExpressEngine.onPlayerStateUpdate = (String streamID, ZegoPlayerState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根据需要实现事件回调
};

4.5 体验实时音视频功能

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

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

4.6 停止推拉流

a. 停止推流/预览/渲染

调用 stopPublishingStream 接口停止向远端用户发送本端的音视频流。

// 停止推流
ZegoExpressEngine.instance.stopPublishingStream();

如果启用了本地预览，调用 stopPreview 接口停止预览。

// 停止预览
ZegoExpressEngine.instance.stopPreview();

如果预览时使用了 createCanvasView，需要调用 destroyCanvasView 接口销毁。

// _previewViewID 为调用 [createCanvasView] 时得到的 viewID
ZegoExpressEngine.instance.destroyCanvasView(_previewViewID);

b. 停止拉流/渲染

调用 stopPlayingStream 接口停止拉取远端推送的音视频流。

// 停止拉流
ZegoExpressEngine.instance.stopPlayingStream(streamID);

如果拉流时使用了 createCanvasView，需要调用 destroyCanvasView 接口销毁。。

// _playViewID 为调用 [createCanvasView] 时得到的 viewID
ZegoExpressEngine.instance.destroyCanvasView(_playViewID);

5.7 退出房间

调用 logoutRoom 接口退出房间。

// 退出房间
ZegoExpressEngine.instance.logoutRoom('room1');

5.8 销毁引擎

调用 destroyEngine 接口销毁引擎，用于释放 SDK 使用的资源。

// 销毁引擎 ZegoExpressEngine.destroyEngine();

三、总结

本文通过从开发环境准备、ZEGO 项目创建，到 Flutter 项目集成、SDK 导入、权限设置，再到核心 API 流程（创建引擎、登录房间、推流、拉流、销毁资源），完整演示了如何基于 ZEGO SDK 快速实现 Flutter 一对一音视频聊天应用。

整套流程步骤清晰、新手友好，借助 ZEGO 的成熟 SDK，开发者可快速搭建稳定、低延迟的跨平台音视频通话功能，无需从底层编码，直接实现业务落地。

☞获取Demo

获取本文的Demo、开发文档、技术支持。

获取SDK的商务活动、热门产品。

注册即构ZEGO开发者帐号，快速开始。