使用 Flutter 进行跨平台音视频通话开发

Flutter 由 Google 开发，是一个强大的跨平台应用程序开发框架，近年来受到广泛欢迎。

在这篇文章中将简单介绍 Flutter 的概念和优点，重点介绍如何基于 ZEGO Flutter SDK 实现音视频通话功能。

什么是Flutter？

Flutter 是由 Google 设计的跨平台应用程序开发框架。它使开发人员能够为各种平台构建高质量的应用程序，包括 iOS、Android、Windows、MacOS、Linux 和 Web。

Flutter 的灵活性和兼容性不断扩展，即将支持 WebAssembly (WASM) 和 RISC-V。随着最近将 Dart 代码直接编译到 WASM 的进展，Flutter 在网络开发方面的潜力将进一步提高。

Flutter 和 Dart 都是开源的，因此尽管它们目前得到了谷歌的大力支持和投资，但它们并不依赖于谷歌的持续承诺。考虑到谷歌对其产品的跟踪记录，这一点还是很令人欣慰的……

使用 Flutter 的优点

Flutter 建立在三个核心价值之上，这三个价值驱动着它的发展方向：

必须快速
必须对开发人员友好
必须简单易学

必须快速：接近原生的性能

Flutter 可在 iOS 和 Android 等平台上将代码编译为本地机器代码，从而提供接近原生的性能。对于Web应用程序，它使用自己的呈现引擎绕过文档对象模型（DOM），在 HTML5 画布上呈现元素。它能非常高效地计算用户界面的哪些部分已经更新，哪些部分需要重新绘制。

必须对开发人员友好：强大的工具

Flutter 提供了一系列提高开发人员工作效率的功能。它的热重载和热重启功能可在运行的应用程序中快速反映代码变化，从而实现快速开发和实验。此外，Flutter 还提供广泛的工具，包括性能分析、调试和自动测试设施。

必须简单易学：入门门槛低

相比其他跨平台框架，Flutter 相对容易学习和上手。其全面的文档、可运行的示例和直观的语法使其可供所有背景的开发人员使用。Dart 是 Flutter 中使用的编程语言，其设计风格是熟悉的，并提供 C 风格的语法。

大量小组件库

Flutter 提供了大量预构建的 widget，开发人员可以利它们来增强应用程序的功能和外观。这些小组件遵循 Material Design 指南（Google 的设计语言）和 Cupertino 风格（Apple 的设计语言）。

基于 ZEGO SDK 实现 Flutter 音视频通话

ZEGO Flutter SDK 能够为开发者提供便捷接入、高可靠、多平台互通的音视频服务。通过低至 200 ms 的端到端平均时延，业内领先的保障弱网质量的 QoS 策略，并结合强大的 3A 处理能力，完美支持一对多、多对多的实时音视频通话、直播、会议等场景。

1. 前提条件

在实现基本的实时音视频功能之前，请确保：

已在项目中集成 ZEGO Flutter SDK，实现基本的实时音视频功能，详情请参考快速开始 – 集成。
已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 AppSign，详情请参考控制台 – 项目管理中的“项目信息”。

2. 使用步骤

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

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

2.1 创建引擎

1. 引入 SDK

在项目中引入 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);

2.2 登录房间

1. 登录

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

同一个 AppID 内，需保证 “roomID” 信息的全局唯一。
同一个 AppID 内，需保证 “userID” 全局唯一，建议开发者将其设置成一个有意义的值，可将 “userID” 与自己业务账号系统进行关联。
“ZegoUser” 的构造方法 ZegoUser.id 会将 “userName” 设为与传的参数 “userID” 一样。“userID” 与 “userName” 不能为 “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);

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


// 以下为常用的房间相关回调
// 房间状态更新回调
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) {
    // 根据需要实现事件回调
};

2.3 推流

1. 开始推流

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

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

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

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

2.4 拉流

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

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

ZegoExpressEngine.instance.startPlayingStream(streamID);

若需要在拉流的同时，渲染拉流画面

// 将此 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);
});

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

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

2.5 体验实时音视频功能

通过以上步骤即可在真机中运行项目，运行成功后，可以看到本端视频画面。

接下来的停止推拉流、退出房间、销毁引擎等操作，这里不做详细介绍，具体操作步骤和注意问题可以参考详细的开发文档 https://doc-zh.zego.im/article/7634。

总之，通过ZEGO Flutter 实时音视频 SDK，可以快速拥有通信、房间、音频、视频、直播等其他能力。

原创文章，作者：ZEGO即构科技，如若转载，请注明出处：https://market-blogs.zego.im/reports-baike/872/