在过去，每个操作系统的应用需用特定的编程语言来编写，每个客户端都需要单独开发，而现在我们可以利用多种工具、框架进行跨平台开发。Flutter 就是其中最热门的一个，也是在线教育、社交泛娱乐、在线金融等行业场景中开发必不可少的。
Flutter 是 Google推出的移动框架，使用 Flutter 可以快速构建跨平台、高质量的客户端应用。Pano 提供的语音通话、视频通话、互动白板、互动直播、云端录制能力，覆盖了 iOS、Android、Windows、macOS、Electron、Web 等多个平台。如今，Pano SDK 再添新成员，正式支持 Flutter，开发者通过一套代码即可轻松集成 iOS、Android 双平台实时互动音视频、互动白板等能力。
Pano Flutter SDK 是基于 Pano SDK 封装的 Flutter Plugin，完全开源，并且为了让开发者在使用时拥有与使用 Native SDK 相似的开发体验，大部分接口的名称与 Native SDK 保持了一致。本文将给大家介绍一下如何快速接入 Pano Flutter SDK。
准备工作
拍乐云开发者账户（通过拍乐云官网注册：https://www.pano.video/）
Flutter 开发环境(SDK 版本 >= 1.20.0)
开始接入
获取一个 App ID 和临时 Token
首先我们需要使用开发者账户登陆Pano控制台，创建应用，获取 App ID 和临时 Token，后面将会用到。（创建应用获取临时Token请参考文档：创建第一个应用：https://developer.pano.video/getting-started/firstapp/）
在应用中集成 Pano Flutter SDK
为了使用此插件, 添加 pano_rtc 到你的 pubspec.yaml 文件中：
dependencies:...pano_rtc: ">=0.9.0"
在项目目录中运行 packages get 命令:
flutter packages get
在 main.dart 中添加如下代码导入 pano_rtc：
import'package:pano_rtc/pano_rtc.dart';
使用上面获取的 App ID 初始化 RtcEngineKit：
class_MyAppStateextendsState<MyApp>{...RtcEngineKit_engine;...@overridevoidinitState(){super.initState();varconfig=RtcEngineConfig(appId,'api.pano.video');//使用 Pano 控制台创建应用 App ID_engine=awaitRtcEngineKit.engine(config);}}
加入频道，开启音视频通话
设置 EventHandler 接收应用需要的事件回调：
_engine.setEventHandler(RtcEngineEventHandler(onChannelJoinConfirm:(ResultCoderesult){//加入Channel成功},...});
加入频道需要上面获取的临时 Token，在初始化 RtcEngineKit 成功后：
vartoken='';// 输入临时 TokenvarchannelId='';// 输入自定义频道 IDvaruserId=;// 输入自定义 User IDvarconfig=RtcChannelConfig();config.mode=ChannelMode.Meeting,// 频道模式：OneOnOne 一对一模式，Meeting 多人模式config.serviceFlags=const{ChannelService.Media};// serviceFlags 频道标志：Media 音视频, Whiteboard 白板config.subscribeAudioAll=true,// 自动订阅音频，可以配置为 false 来主动订阅音频config.userName='';//输入 User Name_engine.joinChannel(token,channelId,userId,config:config);
更新 build 方法，添加 RtcSurfaceView Widget，并保存 RtcSurfaceViewModel 对象：
RtcSurfaceViewModel_viewModel;...@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(...RtcSurfaceView(onViewCreated:((viewModel){setState((){_viewModel=viewModel;});})),...);}
加入频道成功后，开启音视频：
_engine.startAudio();_engine.startVideo(_viewModel);
执行 run 命令启动应用程序。
flutter run
设备权限
Pano SDK 需要 摄像头 和 麦克风 权限来开始视频通话。
Android
打开 AndroidManifest.xml 文件并且添加必备的权限到此文件中.
<manifest>...<uses-permissionandroid:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permissionandroid:name="android.permission.ACCESS_WIFI_STATE"/><uses-permissionandroid:name="android.permission.CAMERA"/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.MODIFY_AUDIO_SETTINGS"/><uses-permissionandroid:name="android.permission.BLUETOOTH"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-featureandroid:name="android.hardware.camera"/><uses-featureandroid:name="android.hardware.camera.autofocus"/>...</manifest>
iOS
打开 info.plist 文件并且添加：
Privacy - Microphone Usage Description，并且在 Value 列中添加描述。
Privacy - Camera Usage Description, 并且在 Value 列中添加描述。
应用可以在后台运行音视频通话，前提是你开启了后台模式。在 Xcode 中选择你的 app target，点击 Capabilities 标签，开启 Background Modes，并且勾选 Voice over IP。我们的 SDK 使用 PlatformView，你需要设置 io.flutter.embedded_views_preview 为 YES 在你的 info.plist 中。
结语
以上 SDK 源代码均开源，你可以在我们官方网页进行下载和体验。Flutter SDK 相关链接：
下载 - 拍乐云Pano_高清实时音视频通信云www.pano.video
关注拍乐云Pano的简书号，我们将为大家分享更多关于 Flutter 的开发经验，以及基于 Pano Flutter SDK 开发的详细教程。
网友评论