Running Example Source Code

This guide introduces how to quickly run the example source code and experience the basic Video Call service.

Prepare Environment

Before starting to integrate ZEGO Express SDK, please install a browser according to the following compatibility requirements:

Prerequisites

You have created a project in the ZEGOCLOUD Console, applied for a valid AppID, and obtained the Server URL for accessing the server.

Warning

• If using SDK version 3.7.0 or above, the server parameter can be filled with the Server URL obtained from the console or directly filled with an empty string.
• The Server URL is not the ServerSecret. You can refer to the following image to obtain the Server URL in the ZEGOCLOUD Console.

Get Example Source Code

Example Source Code Directory Structure

The following directory structure shows the file structure of the express-demo-web subdirectory. All file paths mentioned below are relative to this directory.

.
├── README.md
...
└── src  # Source code folder
    ├── Examples  # Example code
    │   ├── AdvancedAudioProcessing   # Advanced audio features
    │   ├── AdvancedStreaming         # Advanced stream publishing and playing
    │   ├── AdvancedVideoProcessing   # Advanced video features
    │   ├── CommonFeatures            # Common features
    │   ├── DebugAndConfig            # Debugging and configuration
    │   ├── Framework                 # Best practices/framework related
    │   ├── Others                    # Other features
    │   ├── QuickStart                # Quick Start
    │   └── Scenes                    # Best practices/scenario related
    ├── assets    # Resource folder, storing project shared resource files, including SDK, various dependency libraries, translation related configuration files, etc.
    └── KeyCenter.js  # Configuration related file, can fill in the applied AppID, server URL, etc.

.
├── README.md
...
└── src  # Source code folder
    ├── Examples  # Example code
    │   ├── AdvancedAudioProcessing   # Advanced audio features
    │   ├── AdvancedStreaming         # Advanced stream publishing and playing
    │   ├── AdvancedVideoProcessing   # Advanced video features
    │   ├── CommonFeatures            # Common features
    │   ├── DebugAndConfig            # Debugging and configuration
    │   ├── Framework                 # Best practices/framework related
    │   ├── Others                    # Other features
    │   ├── QuickStart                # Quick Start
    │   └── Scenes                    # Best practices/scenario related
    ├── assets    # Resource folder, storing project shared resource files, including SDK, various dependency libraries, translation related configuration files, etc.
    └── KeyCenter.js  # Configuration related file, can fill in the applied AppID, server URL, etc.

Run Example Source Code

1. In the downloaded example source code, use a supported browser to open the "./src/Examples/DebugAndConfig/InitSettings/index.html" file, enter the AppID and Server URL obtained in Prerequisites (not ServerSecret), and click "Settings".

   

2. After the settings are completed, you can start experiencing Demo features. You can use a supported browser to open the HTML files of various scenario features under the "./src/Examples" folder. For example, open "index.html" under the "QuickStart/CommonUsage" folder.

Experience Video Call Features

Run the project on a real device. After running successfully, you can see the local video.

For convenience of experience, ZEGO provides a Web platform for debugging. On this page, enter the same AppID and RoomID, enter different UserIDs, and the corresponding Token, you can join the same Room to communicate with real device. When the Video Call starts successfully, you can hear the remote audio and see the remote video.