拍乐云 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 = ''; // 输入临时 Tokenvar channelId = ''; // 输入自定义频道 IDvar userId = ; // 输入自定义 User IDvar 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/download.html#sdk

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