Instructions for running sample code

This article describes how to quickly run the sample source code and experience basic audio and video calling services.

Prepare the environment

Ensure that your development environment meets the following requirements:

• Windows: version 7 or later
• macOS: version 11.0 or later
• Web browser: Chrome 58 or later, Firefox 56 or later, Safari 11 or later, Opera 45 or later, QQ Browser 10.1 or later for Windows or 4.4 or later for macOS, or 360 Secure Browser in extreme mode
• Flutter: version 2.0 or later (To install Flutter, refer to Flutter Get Started.)
• iOS: version 12 .0 or later. The iOS device or simulator must support audio and video communication, and you are advised to use a real device.
• Android: version 4.4 or later. The Android device or simulator must support audio and video communication, and you are advised to use a real device with the debugging option enabled.
• Connection established between the device and Internet

Configure the development environment as follows:

• Android Studio: Select Preferences > Plugins, search for the Flutter plug-in, and download it. Then configure the path to the Flutter SDK that has been prepared in the plug-in.
• VS Code: In the app store, search for the Flutter extension and download it.

After configuring the Flutter environment in any of the preceding development environments, run flutter doctor in the CLI (terminal). If any dependencies are not prepared, download them as prompted.

Prerequisites

Go to ZEGOCLOUD Admin Console to create a new project, and get the AppID and AppSign of your project.

Directory structure of sample code

The following figure shows the file structure in the flutter_dart subdirectory. File paths mentioned in this topic are relative to this subdirectory.

.
├─ README.md
├─ README_zh.md
├─ VERSION.txt
├─ android
├─ ios
├─ lib
│    ├─ home
│    │    ├─ global_setting_page.dart      # Settings page
│    │    └─ home_page.dart                # Home page
│    ├─ main.dart
│    ├─ topics
│    │    ├─ AudioAdvanced                 # Advanced audio features
│    │    ├─ BestPractices                 # Best practices
│    │    ├─ CommonFunctions               # Common features    
│    │    ├─ OtherFunctions                # Other features
│    │    ├─ QuickStart                    # Quick start
│    │    ├─ StreamAdvanced                # Advanced stream publishing and playing features
│    │    └─ VideoAdvanced                 # Advanced video features
│    └─ utils
├─ pubspec.yaml                            # Flutter project file
├─ resources
└─ test

Run sample code

iOS/Android：

• Android Studio

1. Open Android Studio and select Open an existing Android Studio project to open the zego-express-flutter-sdk folder.

2. Connect your Android or iOS device to a computer.

3. Click Run in the upper right corner of Android Studio to run the sample code.

• VS Code

1. Open VS Code and select File > Open to open the zego-express-flutter-sdk folder.

2. In the file manager on the left of VS Code, double-click example/main.dart to open it.

3. Connect your Android or iOS device to a computer.

4. Select Run > Run without Debugging to run the sample code.

In the sample code, the appID and appSign parameters are not set, which are required for SDK initialization. To run the sample code properly, open the lib/utils/zego_config.dart file and set the parameters respectively to the AppID and AppSign obtained in Prerequisites in advance.

Web：

• VS Code

1. Open VS Code and select File > Open to open the zego-express-flutter-sdk folder.

2. In the file manager on the left of VS Code, right-click example to open it on the terminal.

3. Run flutter run -d chrome --web-renderer html on the terminal to run the sample code.

In the sample code, the appID, userID, userName, and token parameters are not set, which are required for SDK initialization. To run the sample code properly, open the lib/utils/zego_config.dart file, set userID and userName based on your requirements, and set appID and token respectively to the AppID and Token mentioned in the Prerequisites.

Temporary Token Acquisition Method

For the convenience of developers' debugging, ZEGOCLOUD Console provides the function of generating temporary tokens. Developers can directly obtain temporary tokens for use. For details, please refer to the "Project Information" section in How to view project information. However, in the developer's own online environment, it is necessary to generate tokens through their own server.

class ZegoConfig {

  static final ZegoConfig instance = ZegoConfig._internal();
  ZegoConfig._internal();

  // ----- Persistence params -----
  // Developers can get appID from admin console.
  // https://console.zego.im/dashboard
  // for example:
  //     int appID = 123456789;
  int appID = 0;

  ZegoScenario scenario = ZegoScenario.General;

  bool enablePlatformView = false;

  // Developers should customize a user ID.
  // for example:
  //     String userID = "zego_benjamin";
  String userID = "";

  String userName = "";

  // Developers can get token from admin console.
  // https://console.zego.im/dashboard
  // Note: The user ID used to generate the token needs to be the same as the userID filled in above!
  // for example:
  //     String token = "04AAAAAxxxxxxxxxxxxxx";
  String token = "";

}

Precautions

Use your own Apple development certificate when running the sample code on a real iOS device

1. Open Xcode and open example/ios/Runner.xcworkspace in your project directory.

2. Log in with your Apple ID.

   Open Xcode, select Xcode > Preference in the upper left corner, select Accounts, and click + in the lower left corner. In the dialog that appears, select Apple ID and click Continue.

   

   Enter your Apple ID and password to log in.

   

3. Change the value of Bundle Identifier and developer certificate.

   Open Xcode and select Runner on the left.

   

   On the General tab, change the value of Bundle Identifier.

   

   On the Signing & Capabilities tab, select your own developer certificate in the Team drop-down list.

   

Test out real-time audio and video features

We recommend you run your project on a real device. If your app runs successfully, you should hear the sound and see the video captured locally from your device.

To test out the real-time audio and video features, visit the ZEGO Express Web Demo, and enter the same AppID, Server and RoomID to join the same room. If it runs successfully, you should be able to view the video from both the local side and the remote side, and hear the sound from both sides as well.