Running Demo Source Code

Prepare Environment

Please ensure the development environment meets the following requirements:

• Use Cocos Creator v3.6.0 or above (it is recommended to download the latest version through Cocos Dashboard).

• Ensure the corresponding development environment and devices for the platform to be run.

  • Android: Android 5.0 or above with Android device or emulator that supports audio and video (using real device is recommended). If using a real device, please enable the Allow Debugging option.
  • iOS: Xcode 15.0 or above, iOS 12.0 or above with iOS device or emulator that supports audio and video (using real device is recommended).
  • macOS: macOS 10.13 or above with macOS device that supports audio and video.
  • Windows: Windows 7 or above with Windows device that supports audio and video; and install Visual Studio 2019 or above.
  • Browser that meets Express Web SDK compatibility (for details, please refer to Browser Compatibility and Known Issues), it is recommended to use the latest version of Google Chrome browser.

• Ensure the running device is connected to the Internet.

Prerequisites

You have created a project in the ZEGO Console and applied for a valid AppID and AppSign.

Get Demo Source Code

Demo Source Code Directory Structure

The following structure is the file structure of the project directory. All file paths mentioned below are relative to this directory.

cocos_creator
├── VERSION.txt
└── ZegoExpressExample
    ├── assets
    │   ├── HomeScene.scene # Main scene
    │   ├── HomeScene.ts # Script for main scene
    │   ├── KeyCenter.ts # Fill in the applied AppID and AppSign
    │   ├── resources # Resource files
    │   ├── topics # Demo topics
    │   └── utils # Utility classes
    ├── native
    │   └── engine # Native project configuration
    ├── package.json
    .
    .

cocos_creator
├── VERSION.txt
└── ZegoExpressExample
    ├── assets
    │   ├── HomeScene.scene # Main scene
    │   ├── HomeScene.ts # Script for main scene
    │   ├── KeyCenter.ts # Fill in the applied AppID and AppSign
    │   ├── resources # Resource files
    │   ├── topics # Demo topics
    │   └── utils # Utility classes
    ├── native
    │   └── engine # Native project configuration
    ├── package.json
    .
    .

Running Demo Source Code

1. Unzip the downloaded demo source code package and open "CocosDashboard".
2. In CocosDashboard, click the Project sidebar, then click the "Add" button to import the ZegoExpressExample directory where the demo project source code is located.
3. Open the demo project (it is recommended to use the Cocos Creator Editor version specified by the demo project to open the project).

4. After loading the demo project, the console will report a large number of errors because the downloaded demo source code lacks the SDK. Therefore, you need to first download the SDK package (no need to unzip).
5. After the SDK package is downloaded, in the Cocos Creator menu bar, select "Extensions > Extensions Manager".
6. Click "Project" and click the + sign to import the downloaded SDK package.

7. The demo source code lacks the AppID and AppSign required for SDK initialization. Please use VS Code to open the demo source code project and modify the assets/KeyCenter.ts file. Please correctly fill in the AppID and AppSign obtained in the Prerequisites of this article, otherwise the demo source code cannot run normally.

8. Return to Cocos Creator to check if the console still has errors. If there are errors, reopen the "Extension Editor", find the SDK extension, try to disable the SDK extension first (click the "Switch" button), and open "File Explorer/Finder", then return to Cocos Creator to let it refresh resources, then re-enable the SDK extension. Then open "File Explorer/Finder" again, and return to Cocos Creator until there are no errors in the console. If errors still occur, you may need to restart Cocos Creator multiple times and repeat the above steps.

9. After opening the project, click "Assets" in the lower left corner, and in the assets directory, double-click the "HomeScene" scene file to see the scene of the demo source code homepage (the homepage is a 2D scene).

10. In the menu bar, select "Project > Build". First, configure the development environment according to the Cocos Creator Install and Configure Native Development Environment documentation, and then build the native platform project according to the Publish to Native Platforms documentation and actual situation.

11. Start running.

    • Run to Android device:

      1. In the menu bar, select "Project > Build", create a new build task, select "Android" as the platform, fill in the information, click "Build", and finally click "Make" to start compiling (this step takes a long time).
      2. After completing the above operations, connect the Android device and click "Run". Or use Android Studio to open the native project directory "build/android/proj" for operations.

• Run to iOS device:

  1. In the menu bar, select "Project > Build", create a new build task, select "iOS" as the platform, fill in the information, click "Build", and finally click "Make" to start compiling (this step takes a long time).
  2. After completing the above operations, use Xcode to open the "build/ios/proj/ZegoExpressExample.xcodeproj" native project, then connect the iOS real device, select the "ZegoExpressExample-mobile" target, select the real device, and click the "Run" button to run.

• Run to macOS device:

  1. In the menu bar, select "Project > Build", create a new build task, select "macOS" as the platform, fill in the information, click "Build", and finally click "Make" to start compiling (this step takes quite a long time).
  2. After completing the above operations, click "Run", or use Xcode to open the "build/mac/proj/ZegoExpressExample.xcodeproj" native project for operations.

• Run to Windows device:

  1. In the menu bar, select "Project > Build", create a new build task, select "Windows" as the platform, fill in the information, click "Build", and finally click "Make" to start compiling (this step takes quite a long time).
  2. After completing the above operations, click "Run", or use Visual Studio to open the "build\windows\proj\ZegoExpressExample.sln" native project for operations.
  

Experience Real-time Audio/Video Functions

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

For convenience, ZEGO provides a Web platform for debugging. On this page, enter the same AppID and RoomID, enter different UserID, and the corresponding Token, to join the same room and interoperate with the real device. When the audio/video call starts successfully, you can hear the remote audio and see the remote video screen.

FAQ

1. How to handle the error The editor version does not exist reported by CocosDashboard when opening the demo project?

• Method 1: The specified Cocos Creator version for the demo project is not installed locally. Please click the Editor tab in the CocosDashboard sidebar and click Download in the lower right corner to download the specified Cocos Creator version.
• Method 2: Click the Editor Version dropdown box of the demo project to modify the editor version used by the demo project, but this may cause compatibility issues that need to be resolved by yourself.