之前的文章发布了ZEGO SDK实现Android端音视频通话应用的开发教程,不少开发者反馈很实用,能不能也出一版Flutter的教程。

有求必应,这不小编来了~

我们封装了ZEGO Flutter SDK,本文将引导你如何使用ZEGO Flutter SDK 快速轻松的构建一个跨平台音视频聊天应用,减少开发成本。

1 准备环境

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

  • Flutter 1.12 或以上版本。
  • iOS 7.0 或以上版本,且支持音视频的 iOS 设备或模拟器(推荐使用真机)。
  • Android4.4 或以上版本,且支持音视频的 Android 设备或模拟器(推荐使用真机)。如果为真机,请开启“允许调试”选项。
  • iOS / Android 设备已经连接到 Internet。

请配置开发环境如下:

  • Android Studio:“Preferences > Plugins”,搜索 “Flutter”插件进行下载,并在插件中配置已经下载好的 Flutter 的 SDK 路径。
  • VS Code: 在应用商店中搜索 “Flutter”扩展并下载。

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

2 项目准备

2.1 创建项目

进入 即构官网,在创建项目,【ZEGO控制台】.并申请有效的 AppID,这一步很关键,appid为应用的唯一标识,如身份证号,是应用的身份证明,用于明确你的项目及组织身份。zego提供的服务也是基于APP ID;

App ID的获取方式很简单,只需3~5分钟,在即构官网-我的项目-创建即可。创建的项目信息可用于SDK的集成和配置;

2.2 Token 鉴权

登录房间时必须 使用Token 鉴权 ,可参考 Token 鉴权 教程 。

为了方便开发阶段的调试,开发者可直接在 ZEGO 控制台获取临时 Token(有效期为 24 小时) 来使用,详情请参考 控制台(新版) - 项目管理 中的 “项目信息”。.

3 集成

3.1 项目设置

开始集成前,请参考 Flutter 文档 - Get Started.创建一个 Flutter 项目。

如已有项目,本步骤可忽略;

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

3.2 导入 SDK

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

  • 以 “pub” 形式依赖(推荐):
dependencies:
flutter:
sdk: flutter zego_express_engine: ^2.0.0
  • 以 “git” 形式依赖:
dependencies:
flutter:
sdk: flutter zego_express_engine:
git:
url: git://github.com/zegoim/zego-express-flutter-sdk.git
ref: master

2.添加完成并保存文件后,在终端执行 flutter pub get。

4 设置权限

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

4.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" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <!-- Permissions required by the Demo App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<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);
}
}

具体的权限说明如下:

4.2 iOS 添加权限

打开项目,选择菜单 “TARGETS > Info > Custom iOS Target Properties”。

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

  • Privacy - Camera Usage Description
  • Privacy - Microphone Usage Description

权限添加完成后,如图所示:

5 实现流程

如以下流程图,用户A与B通过 ZEGO Express SDK 进行视频通话,以用户 A 拉取用户 B 的流为例:

为保证实时音视频的通话质量,推拉流关键流程需按照API的正确调用时序进行,完整时序如下图:

5.1 创建引擎

1. 引入 SDK

在项目中引入 SDK。

1import 'package:zego_express_engine/zego_express_engine.dart';

2. 创建引擎

调用 createEngineWithProfile 接口,将申请到的 AppID 传入参数 “appID”。

ZegoEngineProfile profile = ZegoEngineProfile(
appID, // 请通过官网注册获取,格式为:1234567890
ZegoScenario.General, // 通用场景接入
enablePlatformView: true);
// 创建引擎
ZegoExpressEngine.createEngineWithProfile(profile);
5.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;
// token 由用户自己的服务端生成,为了更快跑通流程,也可以通过即构控制台获取临时的音视频 token
config.token = "xxxx";
// 开始登录房间
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

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

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

  • 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) {
// 根据需要实现事件回调
};
5.3 推流

1. 开始推流

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

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

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

2. 启用本地渲染和预览

如果希望看到本端的画面,可将画面渲染后,调用 startPreview 接口启动本地预览。

Flutter 的渲染方式有两种:PlatformView 与 TextureRenderer。与 TextureRenderer 相比,PlatformView占用资源稍高,且稳定性偏低,但随着 Flutter 版本迭代,鲁棒性不断提高。开发者可根据实际情况通过任意一种方式实现渲染。

使用 TextureRenderer 方式渲染

开启 TextureRenderer 后,在销毁引擎之前,只能使用 TextureRenderer 而不能使用 PlatformView。

(1)创建预览用的 “TextureRenderer”(外接纹理)。

void createPreviewRenderer() {
ZegoExpressEngine.instance.createTextureRenderer(widget.screenWidthPx, widget.screenHeightPx).then((textureID) { _previewViewID = textureID; setState(() {
// Create a Texture Widget
Widget previewViewWidget = Texture(textureId: textureID);
// 将此 Widget 加入到页面的渲染树中以显示预览画面
_previewViewWidget = previewViewWidget;
}); // Start preview using texture renderer
_startPreview(textureID);
});
}

(2)使用 TextureRenderer 的 “textureID” 作为 “viewID” 创建一个 ZegoCanvas 对象,开始预览。

void _startPreview(int viewID) {

  // Set the preview canvas
ZegoCanvas previewCanvas = ZegoCanvas.view(viewID); // Start preview
ZegoExpressEngine.instance.startPreview(canvas: previewCanvas);
}

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

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

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

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

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

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

    ZegoExpressEngine.instance.startPlayingStream(streamID);
  • 若需要在拉流的同时,渲染拉流画面,Flutter 的渲染方式有两种:PlatformView 与 TextureRenderer。与 TextureRenderer 相比,PlatformView占用资源稍高,且稳定性偏低,但随着 Flutter 版本迭代,鲁棒性不断提高。开发者可根据实际情况通过任意一种方式实现渲染。

使用 TextureRenderer 方式渲染

(1)创建预览用的 “TextureRenderer”(外接纹理)。

ZegoExpressEngine.instance.createTextureRenderer(width.toInt(), height.toInt()).then((viewID) {
_playViewID = viewID;
// 将得到的 Widget 加入到页面的渲染树中以显示拉流画面
setState(() => _playViewWidget = Texture(textureId: viewID));
_startPlayingStream(viewID, streamID);
});

(2)使用 TextureRenderer 的 “textureID” 作为 “viewID” 创建一个 ZegoCanvas 对象,开始拉流并渲染拉流画面。

void _startPlayingStream(int viewID, String streamID) {
ZegoCanvas canvas = ZegoCanvas.view(viewID);
ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: canvas);
}
5.5 体验实时音视频功能

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

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

5.6 停止推拉流

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

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

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

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

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

如果预览时创建了 TextureRenderer,需要调用 destroyTextureRenderer 接口销毁 TextureRenderer。

// _previewViewID 为调用 createTextureRenderer 时得到的 viewID
ZegoExpressEngine.instance.destroyTextureRenderer(_previewViewID);

如果预览时创建了 PlatformView,需要调用 destroyPlatformView 接口销毁 PlatformView。

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

2. 停止拉流/渲染

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

// 停止拉流
ZegoExpressEngine.instance.stopPlayingStream(streamID, canvas: _playCanvas);

如果拉流时创建了 TextureRenderer,需要调用 destroyTextureRenderer 接口销毁 TextureRenderer。

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

如果拉流时创建了 PlatformView,需要调用 destroyPlatformView 接口销毁 PlatformView。

// _playViewID 为调用 [createPlatformView] 时得到的 viewID
ZegoExpressEngine.instance.destroyPlatformView(_playViewID);
5.7 退出房间

调用 logoutRoom 接口退出房间。

// 退出房间
ZegoExpressEngine.instance.logoutRoom('room1');
5.8 销毁引擎

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

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

结尾

恭喜,你已经通过ZEGO Flutter SDK完成了自己的实时音视频通话应用,Flutter为应用开发带来了革新,带着学习交流的态度,希望对于想要学习应用Flutter的同学有所帮助。

获取Demo

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

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

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

如何基于 ZEGO SDK 实现 Flutter 一对一音视频聊天应用?的更多相关文章

  1. 如何基于 ZEGO SDK 实现 Windows 一对一音视频聊天应用

    互联网发展至今,实时视频和语音通话越来越被大众所依赖. 今天,我们将会继续介绍如何基于ZEGO SDK实现音视频通话功能,前两篇文章分别介绍了Android,Flutter平台的实现方式,感兴趣的小伙 ...

  2. 如何基于 ZEGO SDK 实现 Android 一对一音视频聊天应用

    疫情期间,很多线下活动转为线上举行,实时音视频的需求剧增,在视频会议,在线教育,电商购物等众多场景成了"生活新常态". 本文将教你如何通过即构ZEGO sdk在Android端搭建 ...

  3. 如何基于ZEGO SDK 实现通话质量监测

    如何基于ZEGO SDK 实现通话质量监测 1 功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 请参考 ...

  4. 基于 WPF和ASP.NET Core 在线音视频聊天项目

    Dimension 基于 .NET 6 的在线音视频聊天项目 WPF和ASP.NET API开发 使用第三方依赖介绍 公用依赖 log4net 日志记录. SignalR 用于服务器与客户端的通讯手段 ...

  5. 如何基于 ZEGO SDK 实现 Android 通话质量监测

    功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 参考 下载示例源码 获取源码. 相关源码请查看 &qu ...

  6. webrtc笔记(5): 基于kurento media server的多人视频聊天示例

    这是kurento tutorial中的一个例子(groupCall),用于多人音视频通话,效果如下: 登录界面: 聊天界面: 运行方法: 1.本地用docker把kurento server跑起来 ...

  7. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  8. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  9. 了不起的WebRTC:生态日趋完善,或将实时音视频技术白菜化

    本文原文由声网WebRTC技术专家毛玉杰分享. 1.前言 有人说 2017 年是 WebRTC 的转折之年,2018 年将是 WebRTC 的爆发之年,这并非没有根据.就在去年(2017年),WebR ...

随机推荐

  1. 【行业Tip】三电是什么

    电动汽车的"三电"是指:电池.电机.电控.

  2. chrome浏览器添加JSON插件

    1.下载JSON-Handel插件 1) http://jsonhandle.sinaapp.com 点击下载会将json-handle 插件(crx)下载本地 2.打开Chrome浏览器地址栏输入: ...

  3. laravel报错 : No application encryption key has been specified.

    创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...

  4. Ubuntu 16.04.3 Server 版安装过程图文详解

    Ubuntu 16.04.3 Server 版安装过程图文详解 首先,我们会进入系统安装的第一个界面,开始系统的安装操作.每一步的操作,左下角都会提示操作方式! 1.选择系统语言-English2.选 ...

  5. 华为交换机ACL如何使用及原则

    华为交换机ACL如何使用及原则 转载自:辣条①号  源链接:https://boke.wsfnk.com/archives/480.html   ACL(访问控制列表)的应用原则:标准ACL,尽量用在 ...

  6. 31 面向对象编程 接口 普通类:只有具体实现 声明类的关键字是class,声明接口关键字是interface 接口的作用

    接口 概念 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法!专业的约束!约束和实现分离:面向接口编程~ 接口就是规范,定义的是一组规则,体现了现实世界中 ...

  7. 07 Java的方法 何谓方法

    Java的方法 1.何谓方法 System.out.println(); 那么它是什么呢? System是系统的类,out是System下的一个输出对象,println()就是一个方法 类.对象.方法 ...

  8. linux mac 命令行 远程连接ssh提示IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY解决

    ➜ ~ ssh adleytales@192.168.1.10 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNIN ...

  9. CentOS 7.5 安装配置tigervnc-server

    系统版本: [root@s10 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 1.安装 Gnome 包 [root@ ...

  10. Map的野路子

    首先有一张user数据表,数据库名称为mybatis,数据如下: 我们使用以下两种方式实现数据更新的操作. 方式一 UserMapper.java如下: /** * @description: 更改用 ...