In the past, each operating system application needs to be written in a specific programming language, each client needs to be developed separately, but now we can use a variety of tools, frameworks for cross-platform development. Flutter is one of the hottest, and is essential to the development of online education, social entertainment, online finance and other industry scenarios.

Flutter is a Google mobile framework that allows you to quickly build cross-platform, high-quality client applications using Flutter. Pano provides voice call, video call, interactive whiteboard, interactive live broadcast, and cloud recording capabilities on iOS, Android, Windows, macOS, Electron, and Web platforms. Now, The Pano SDK has added support for Flutter, allowing developers to easily integrate real-time interactive audio and video, interactive whiteboards, and other capabilities on both iOS and Android platforms with one set of code.

The Pano Flutter SDK is a Flutter Plugin packaged by the Pano SDK. It is completely open source, and the names of most of the Flutter interfaces are the same as those of the Native SDK in order to provide developers with a similar development experience when using the Native SDK. This article will show you how to quickly access the Pano Flutter SDK.

The preparatory work

  • Pai Leyun developer account. (Registered through paileyun official website)
  • Flutter Development Environment (SDK version >= 1.20.0)

To access

Get an App ID and a temporary Token

First we need to log in to the Pano console using the developer account, create the App, and obtain the App ID and temporary Token, which will be used later. (Creating an Application To obtain a temporary Token, refer to the document: Creating the First Application.)

Integrate the Pano Flutter SDK with your application

To use this plug-in, add pano_rTC to your pubspec.yaml file:

dependencies:
  .
  pano_rtc: "> = 0.9.0"
Copy the code

Run packages get in the project directory:

flutter packages get
Copy the code

Dart add the following code to import pano_rTC:

import 'package:pano_rtc/pano_rtc.dart';
Copy the code

Initialize the RtcEngineKit with the App ID obtained above:

class _MyAppState extends State<MyApp> {... RtcEngineKit _engine; .@override
    void initState() {
        super.initState();
        var config = RtcEngineConfig(appId, 'api.pano.video'); // Create an App ID using the Pano console
        _engine = awaitRtcEngineKit.engine(config); }}Copy the code

Add a channel to enable audio and video calls

Set EventHandler to receive event callbacks required by the application:

_engine.setEventHandler(RtcEngineEventHandler(
    onChannelJoinConfirm: (ResultCode result) {
        // Succeeded in joining Channel},... });Copy the code

The temporary Token obtained above is required to join the channel. After successfully initializing RtcEngineKit:

var token = ' '; // Enter temporary Token
var channelId = ' '; // Enter a custom channel ID
var userId = ; // Enter a custom User ID
var config = RtcChannelConfig();
config.mode = ChannelMode.Meeting, // Channel mode: OneOnOne one-on-one mode, Meeting multiplayer mode
config.serviceFlags = const {
    ChannelService.Media
}; // serviceFlags Channel flags: Media audio and video, Whiteboard
config.subscribeAudioAll = true.// Automatically subscribe to audio, which can be set to false to actively subscribe to audio
config.userName = ' '; // Enter User Name
_engine.joinChannel(token, channelId, userId, config: config);
Copy the code

Update the Build method to add the RtcSurfaceView Widget and save the RtcSurfaceViewModel object:

RtcSurfaceViewModel _viewModel; .@override
Widget build(BuildContext context) {
    return MaterialApp(
        ...
        RtcSurfaceView(onViewCreated: ((viewModel) {
            setState(() {
                _viewModel = viewModel;
            });
        })),
        ...
    );
}
Copy the code

After joining the channel successfully, open audio and video:

_engine.startAudio();
_engine.startVideo(_viewModel);
Copy the code

Run the run command to start the application.

flutter run
Copy the code

Equipment permissions

The Pano SDK requires camera and microphone permissions to initiate a video call.

Android

Open the androidmanifest.xml file and add the necessary permissions to it.

<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>
Copy the code

iOS

Open the info.plist file and add:

  • Privacy - Microphone Usage DescriptionAnd, inValueColumn to add a description.
  • Privacy - Camera Usage DescriptionAnd, inValueColumn to add a description.

The application can run audio and video calls in the background, provided that the background mode is enabled. Select your App target in Xcode, click the Capabilities TAB, enable Background Modes, and check Voice over IP.

Our SDK uses PlatformView and you need to set IO. Flutter. Embedded_views_preview to YES in your info.plist.

conclusion

The above SDK source code is open source, you can download and experience in our official website. Flutter SDK relevant link: www.pano.video/download.ht…

Follow the Zhihu account of Pano to share more about Flutter development experience and detailed tutorials based on the Pano Flutter SDK.