Pano Flutter SDK 全新发布，跨平台音视频开发更easy

在过去，每个操作系统的应用需用特定的编程语言来编写，每个客户端都需要单独开发，而现在我们可以利用多种工具、框架进行跨平台开发。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;...@overridevoid 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;
...
@override
Widget 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 相关链接：

下载 - 拍乐云Pano_高清实时音视频通信云www.pano.video

关注拍乐云Pano的CSDN号，我们将为大家分享更多关于 Flutter 的开发经验，以及基于 Pano Flutter SDK 开发的详细教程。