乐趣区

关于electron:拍乐云Pano-Flutter-SDK-全新发布跨平台音视频开发更easy

jiezi

在过来，每个操作系统的利用需用特定的编程语言来编写，每个客户端都须要独自开发，而当初咱们能够利用多种工具、框架进行跨平台开发。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 开发的具体教程。

退出移动版