拍樂雲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 開發的詳細教程。