准备工作
-
拍乐云开发者账户（通过拍乐云官网注册：https://www.pano.video/） -
Flutter 开发环境(SDK 版本 >= 1.20.0)
开始接入
获取一个 App ID 和临时 Token
在应用中集成 Pano Flutter SDK
pano_rtc 到你的 pubspec.yaml 文件中：
dependencies:
...
pano_rtc: ">=0.9.0"
flutter packages get
main.dart 中添加如下代码导入 pano_rtc：
import 'package:pano_rtc/pano_rtc.dart';
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);
}
}
加入频道，开启音视频通话
_engine.setEventHandler(RtcEngineEventHandler(
onChannelJoinConfirm: (ResultCode result) {
//加入Channel成功
},
...
});
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);
flutter run
设备权限
摄像头 和 麦克风 权限来开始视频通话。
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列中添加描述。
PlatformView，你需要设置 io.flutter.embedded_views_preview 为 YES 在你的 info.plist 中。
结语
