拍乐云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;
  ...
   @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;
...
@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 相关链接：
https://www.pano.video/downlo...

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