Actual combat of flutter - fast implementation of audio and video call application

CSDN Abstract ： This article will guide you on how to use ZEGO Flutter SDK Quickly and easily build a cross platform audio and video chat application , Reduce development costs .

Preface

This article will guide you on how to use ZEGO Flutter SDK Quickly and easily build a cross platform audio and video chat application , Greatly reduce development costs , Suitable for developers who want to quickly complete multi terminal shared audio and video projects ;

1 Prepare the environment

Start integration at ZEGO Express SDK front , Make sure the development environment meets the following requirements ：

• Flutter 1.12 Or above .
• iOS 7.0 Or above , And support audio and video iOS Device or simulator （ It is recommended to use the real machine ）.
• Android 4.4 Or above , And support audio and video Android Device or simulator （ It is recommended to use the real machine ）. If it's a real machine , Please turn on “ Allow debugging ” Options .
• iOS / Android The device is connected to Internet.

Please configure the development environment as follows ：

• Android Studio：“Preferences > Plugins”, Search for “Flutter” Plug in to download , And configure the downloaded... In the plug-in Flutter Of SDK route .
• VS Code: Search the app store for “Flutter” Expand and download .

Configure with any development environment Flutter After environment , Execute at the terminal  flutter doctor, Complete the relevant undelivered dependencies according to the prompts .

2 Project preparation

2.1 Create project

Get into The official website （ZEGO Administrative console ）, stay 【ZEGO Console 】（ZEGO Administrative console ） Create project , And apply for a valid AppID, This step is crucial ,appid Is the unique identification of the application , Such as ID card No , Is the identity of the application , Used to identify your project and organization .zego The services provided are also based on APP ID;

App ID The way to get is very simple , just 3～5 minute , stay The official website - My project - establish that will do . Created Project information Can be used for SDK Integration and configuration of ;

2.2 Token authentication

• When logging into a room, you must   Use Token authentication  , May refer to  Token Authentication tutorial  
• In order to facilitate debugging in the development stage , Developers can go directly to ZEGO Console get temporary Token（ Valid for 24 Hours ） To use , Please refer to   Console （ new edition ） - project management   Medium “ Project information ”.

3 Integrate

3.1 Project settings

Before starting Integration , Please refer to  Flutter file - Get Started  Create a Flutter project .

If there are existing projects , This step can be ignored ;

Next, we need to make a simple configuration for the project , Easy to import and use ZEGO Flutter SDK.

3.2 Import SDK

1. open “pubspec.yaml” file , add to “zego_express_engine” rely on , There are two forms ：

• With “pub” Formal dependence （ recommend ）：

dependencies:
flutter:
sdk: flutter

zego_express_engine: ^2.0.0

• With “git” Formal dependence ：

dependencies:
flutter:
sdk: flutter


zego_express_engine:
  git:
    url: git://github.com/zegoim/zego-express-flutter-sdk.git
    ref: master

1. After adding and saving the file , Execute at the terminal  flutter pub get.

4 Set the permissions

The integration of the above steps has been completed , To guarantee SDK Better operation , It needs to be applied according to the actual application needs , Set the permissions required for the application . Steps are as follows ：

4.1 Android Add permissions

Get into “app/src/main” Catalog , open “AndroidManifest.xml” file , Add permissions .

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />


<!-- Permissions required by the Demo App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />


<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

because Android 6.0 In some important permissions, it is required to apply for dynamic permissions , You can't just go through “AndroidMainfest.xml” File requests static permissions . Please be there. Android The native layer reference executes the following code , among “requestPermissions” yes “Activity” Methods .

String[] permissionNeeded = {
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"};


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.CAMERA") != PackageManager.PERMISSION_GRANTED ||
        ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
}

The specific permissions are as follows ：

The need for	jurisdiction	Permission specification	The reason for applying
Necessary permissions	INTERNET	Access to the network .	SDK The basic functions can only be used under the condition of networking .
	ACCESS_WIFI_STATE	Get current WiFi State permissions .	SDK It will perform different operations according to the change of network state . For example, when the network reconnects ,SDK The internal will restore the state when the network is disconnected , The user does not need to do additional operations .
	ACCESS_NETWORK_STATE	Get current network status permission .
	CAMERA	Access camera permissions .	You need to use this permission when previewing and sending videos .
	RECORD_AUDIO	Record audio permission .	You need to use this permission when sending audio .
	BLUETOOTH	Connect Bluetooth device permission .	This permission is required when connecting Bluetooth devices .
	MODIFY_AUDIO_SETTINGS	Modify audio configuration permissions .	This permission is required when modifying the audio device configuration .
	WRITE_EXTERNAL_STORAGE	built-in SDK Write permissions .	SDK The log and related configuration files will be saved in the built-in file SDK Inside .
Unnecessary authority	READ_PHONE_STATE	Allow read-only access to phone status , Including the current call status .	SDK According to the current call status , Start and stop audio equipment . If the supervisor hears that it is currently in call status , be SDK Will automatically stop using the audio device , Until the end of the call .

4.2 iOS Add permissions

Open the project , Menu selection “TARGETS > Info > Custom iOS Target Properties”.

single click “+” Button , Add camera and microphone permissions .

• Privacy - Camera Usage Description
• Privacy - Microphone Usage Description

After the permission is added , As shown in the figure ：

5 Implementation process

As shown in the following flow chart , user A And B adopt ZEGO Express SDK Make a video call , To the user A Pull users B For example ：

In order to ensure the call quality of real-time audio and video , The key process of push-pull flow needs to follow API The correct call timing , The complete sequence is shown in the figure below ：

5.1 Create the engine

1. introduce SDK

Introduce in the project SDK.

1import 'package:zego_express_engine/zego_express_engine.dart';

2. Create the engine

2. Create the engine

call createEngineWithProfile Interface , Will apply to AppID Pass in the parameter “appID”.

ZegoEngineProfile profile = ZegoEngineProfile(
    appID, //  Please register for , The format is ：1234567890
    ZegoScenario.General, //  Universal scene access 
    enablePlatformView: true);
//  Create the engine 
ZegoExpressEngine.createEngineWithProfile(profile);

5.2 Log in to the room

1. Sign in

Incoming users ID Parameters “userID” establish ZegoUser After the user object , call loginRoom Interface , Into the room ID Parameters “roomID” And user parameters “user”, Log in to the room .

The same AppID Inside , To be guaranteed “roomID” Global uniqueness of information .
The same AppID Inside , To be guaranteed “userID” Globally unique , It is recommended that developers set it to a meaningful value , Can be “userID” Associate with your own business account system .
“ZegoUser” Construction method of ZegoUser.id Will “userName” Set as the parameter transmitted with “userID” equally .“userID” And “userName” Not for “null”, Otherwise, you will fail to log in to the room .

//  Create user objects 
ZegoUser user = ZegoUser.id('user1');
//  Only incoming  “isUserStatusNotify”  The parameter value is  “true”  Of  ZegoRoomConfig, To receive  onRoomUserUpdate  Callback .
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.isUserStatusNotify = true;
// token  Generated by the user's own server , In order to run through the process faster , You can also obtain temporary audio and video through the instant console  token
config.token = "xxxx";
//  Start logging into the room 
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

2. Listen to the event callback after logging in to the room

According to the needs of practical application , After logging into the room, listen to the event notification you want to pay attention to , For example, room status update 、 User status update 、 Stream status update, etc .

onRoomStateUpdate： Room status update callback . After logging into the room , When the room connection status changes （ In case of room disconnection , Login authentication failure, etc ）,SDK Will be notified through this callback . onRoomUserUpdate： User status update callback . After logging into the room , When a user is added or deleted in the room ,SDK Will be notified through this callback .
Only a call loginRoom Interface is passed in when logging in the room ZegoRoomConfig To configure , And “isUserStatusNotify” The parameter value is “true” when , Users can receive onRoomUserUpdate Callback .
onRoomStreamUpdate： Stream status update callback . After logging into the room , When a user pushes or deletes a new audio and video stream in the room ,SDK Will be notified through this callback . 

//  The following are common room related callbacks 
//  Room status update callback 
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    //  Implement event callback as needed 
};

//  User status update 
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    //  Implement event callback as needed 
};

//  Stream status update 
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    //  Implement event callback as needed 
};

5.3 Push flow

1. Start pushing

call startPublishingStream Interface , Incoming flow ID Parameters “streamID”, Send the local audio and video stream to the remote user .
The same AppID Inside , To be guaranteed “streamID” Globally unique . If the same AppID Inside , Different users pushed one “streamID” The same flow , It will lead to the failure of users who push back the stream .

// Start pushing
ZegoExpressEngine.instance.startPublishingStream("streamID");
1
2
2. Enable local rendering and preview
If you want to see the picture at this end , You can render the picture , call startPreview Interface to start local preview .
Flutter There are two ways to render ：PlatformView And TextureRenderer. And TextureRenderer comparison ,PlatformView It takes up a little more resources , And the stability is low , But as the Flutter Version of the iteration , The robustness is continuously improved . Developers can realize rendering in any way according to the actual situation .

Use TextureRenderer Mode rendering

Turn on TextureRenderer after , Before destroying the engine , Only use TextureRenderer They can't be used PlatformView.
（1） Create preview “TextureRenderer”（ External texture ）. 

void createPreviewRenderer() {
    ZegoExpressEngine.instance.createTextureRenderer(widget.screenWidthPx, widget.screenHeightPx).then((textureID) {

        _previewViewID = textureID;

        setState(() {
            // Create a Texture Widget
            Widget previewViewWidget = Texture(textureId: textureID);
            //  Put this  Widget  Add to the rendering tree of the page to display the preview screen 
            _previewViewWidget = previewViewWidget;
        });

        // Start preview using texture renderer
        _startPreview(textureID);
    });
}

（2） Use TextureRenderer Of “textureID” As “viewID” Create a ZegoCanvas object , Start Preview . 

  // Set the preview canvas
    ZegoCanvas previewCanvas = ZegoCanvas.view(viewID);

    // Start preview
    ZegoExpressEngine.instance.startPreview(canvas: previewCanvas);
}

3. Listen for event callback after streaming

According to the needs of practical application , Listen for the event notification you want to pay attention to after streaming , Such as streaming status update, etc .
onPublisherStateUpdate： Push stream status update callback . After calling the streaming interface successfully , Push flow occurs when the state changes （ Such as abnormal streaming caused by network interruption ）,SDK While retrying streaming , Will be notified through this callback .

//  Common push stream related callbacks 
//  Push stream status update callback 
ZegoExpressEngine.onPublisherStateUpdate = (String streamID, ZegoPublisherState state, int errorCode, Map<String, dynamic> extendedData) {
    //  Implement event callback as needed 
};

5.4 Pull flow

call startPlayingStream Interface , According to the incoming stream ID Parameters “streamID”, Pull the audio and video stream pushed by the far end , And render the streaming picture as needed .

If you only need to pull the audio stream , There is no need to display the pull flow screen , Directly callable startPlayingStream Interface .
ZegoExpressEngine.instance.startPlayingStream(streamID);
If necessary, while pulling the flow , Render the streaming picture ,Flutter There are two ways to render ：PlatformView And TextureRenderer. And TextureRenderer comparison ,PlatformView It takes up a little more resources , And the stability is low , But as the Flutter Version of the iteration , The robustness is continuously improved . Developers can realize rendering in any way according to the actual situation .
Use TextureRenderer Mode rendering

（1） Create preview “TextureRenderer”（ External texture ）.

ZegoExpressEngine.instance.createTextureRenderer(width.toInt(), height.toInt()).then((viewID) {
    _playViewID = viewID;
    //  What will be obtained  Widget  Add to the rendering tree of the page to display the streaming screen 
    setState(() => _playViewWidget = Texture(textureId: viewID));
    _startPlayingStream(viewID, streamID);
});

（2） Use TextureRenderer Of “textureID” As “viewID” Create a ZegoCanvas object , Start streaming and render the streaming picture .

void _startPlayingStream(int viewID, String streamID) {
    ZegoCanvas canvas = ZegoCanvas.view(viewID);
    ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: canvas);
}

5.5 Experience real-time audio and video functions

Run project in real machine , After successful operation , You can see the local video screen .
For the convenience of experience ,ZEGO Provides a Web End debugging example , Under this page , Type the same AppID、RoomID、Server Address and Token, You can join the same room and communicate with real equipment . When the audio and video call is successfully started , You can hear the remote audio , See the remote video screen .

5.6 Stop the push-pull flow

1. Stop pushing / preview / Rendering
call stopPublishingStream The interface stops sending local audio and video streams to remote users .

//  Stop pushing 
ZegoExpressEngine.instance.stopPublishingStream();

If local preview is enabled , call stopPreview Interface stop preview .

// Stop previewing
ZegoExpressEngine.instance.stopPreview();
1
2
If... Is created during preview TextureRenderer, Need to call destroyTextureRenderer Interface destruction TextureRenderer.

// _previewViewID Call for createTextureRenderer When you get viewID
ZegoExpressEngine.instance.destroyTextureRenderer(_previewViewID);
1
2
If... Is created during preview PlatformView, Need to call destroyPlatformView Interface destruction PlatformView.

// _previewViewID  Call for  [createPlatformView]  When you get  viewID
ZegoExpressEngine.instance.destroyPlatformView(_previewViewID);
 

2. Stop pulling / Rendering

call stopPlayingStream The interface stops pulling the audio and video stream pushed by the far end .

// Stop pulling
ZegoExpressEngine.instance.stopPlayingStream(streamID, canvas: _playCanvas);
1
2
If... Is created when pulling the flow TextureRenderer, Need to call destroyTextureRenderer Interface destruction TextureRenderer.

// _playViewID Call for [createTextureRenderer] When you get viewID
ZegoExpressEngine.instance.destroyTextureRenderer(_playViewID);
 
If... Is created when pulling the flow PlatformView, Need to call destroyPlatformView Interface destruction PlatformView.

// _playViewID  Call for  [createPlatformView]  When you get  viewID
ZegoExpressEngine.instance.destroyPlatformView(_playViewID);

5.7 Exit the room

call logoutRoom Interface exit room .

// Exit the room
ZegoExpressEngine.instance.logoutRoom('room1');

5.8 Destroy engine

call destroyEngine Interface destruction engine , For release SDK Resources used .

//  Destroy engine 
ZegoExpressEngine.destroyEngine();

ending
 

Congratulations , You have passed ZEGO Flutter SDK Completed its own real-time audio and video call application ,Flutter Bring innovation to application development , With the attitude of learning and communication , Hope to learn and apply Flutter My classmates are helpful .

• Get the of this article Demo、 Developing documents 、 Technical support , Click to get ;（Flutter Dart Real time audio and video implementation process - Developer center - ZEGO That is, technology ）
• Get business activities 、 Hot products , Information can be submitted to contact the business department ：（ZEGO That is, technology - Provide stable and high-quality real-time audio and video cloud services for the world ）

Registration constitutes ZEGO Developer account number , Quick start .（ZEGO Administrative console ）