在过来，每个操作系统的利用需用特定的编程语言来编写，每个客户端都须要独自开发，而当初咱们能够利用多种工具、框架进行跨平台开发。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 _MyAppState extends State<MyApp> {  ...   RtcEngineKit _engine;  ...   @override   void initState() {       super.initState();       var config = RtcEngineConfig(appId, 'api.pano.video'); //应用 Pano 控制台创立利用 App ID        _engine = await RtcEngineKit.engine(config);  }}

退出频道，开启音视频通话

设置 EventHandler 接管利用须要的事件回调：

_engine.setEventHandler(RtcEngineEventHandler(   onChannelJoinConfirm: (ResultCode result) {       //退出Channel胜利   },  ...});

退出频道须要下面获取的长期 Token，在初始化 RtcEngineKit 胜利后：

var token = ''; // 输出长期 Token var channelId = ''; // 输出自定义频道 ID var userId = ; // 输出自定义 User ID var config = 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;...@overrideWidget build(BuildContext context) {   return MaterialApp(      ...       RtcSurfaceView(onViewCreated: ((viewModel) {           setState(() {               _viewModel = viewModel;          });      })),      ...  );}

退出频道胜利后，开启音视频：

_engine.startAudio();_engine.startVideo(_viewModel);

执行 run 命令启动应用程序。

flutter run

设施权限

Pano SDK 须要 摄像头 和 麦克风 权限来开始视频通话。

Android

关上 AndroidManifest.xml 文件并且增加必备的权限到此文件中.

<manifest>  ...   <uses-permission android:name="android.permission.INTERNET" />   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />   <uses-permission android:name="android.permission.CAMERA" />   <uses-permission android:name="android.permission.RECORD_AUDIO" />   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />   <uses-permission android:name="android.permission.BLUETOOTH" />   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />   <uses-feature android:name="android.hardware.camera" />   <uses-feature android: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 相干链接：
https://www.pano.video/downlo...

关注拍乐云Pano，咱们将为大家分享更多对于 Flutter 的开发教训，以及基于 Pano Flutter SDK 开发的具体教程。