Sample source code running guide

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

Prepare the environment

Before you run the sample source code, make sure that the development environment meets the following requirements:

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

• Ensure the corresponding development environment and equipment according to the platform that needs to run.

  • Android: An Android device or emulator with Android 5.0 or above that supports audio and video (recommended to use a real device). If it is a real device, please enable the Allow Debugging option.
  • iOS: Xcode 14.0 or above, iOS 11.0 or above and an iOS device or simulator that supports audio and video (a real device is recommended).
  • macOS: Xcode 14.0 or above, macOS devices with macOS 10.13 or above that support audio and video.
  • Windows: A Windows device with Windows 7 or above that supports audio and video; and Visual Studio 2019 or above installed.

• Make sure the running device is connected to the Internet.

Prerequisites

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

Sample source code directory structure

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

cocos_creator
├── VERSION.txt
└── ZegoExpressExample
    ├── assets
    │   ├── HomeScene.scene # Main scene
    │   ├── HomeScene.ts # Script of the main scene
    │   ├── KeyCenter.ts # Fill in the AppID and AppSign of the application
    │   ├── resources # Resource files
    │   ├── topics # Examples
    │   └── utils # Utilities
    ├── native
    │   └── engine # Native project config
    ├── package.json
    .
    .

Run the sample source code

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

4. After loading the sample project, the editor console will report a lot of errors, because the downloaded sample source code lacks the SDK, so you need to Download the SDK (no need to unzip it).
5. After the SDK package is downloaded, in the Cocos Creator menu bar, click Extension > Extension Manager.
6. Click "Project" and click the + button to import the downloaded SDK compressed package.

7. The sample source code lacks the AppID and AppSign required for SDK initialization. Please use VS Code to open the sample project and modify the assets/KeyCenter.ts file. Please Fill in AppID and AppSign correctly obtained in Prerequisite, otherwise the sample source code cannot run normally.

8. Go back to Cocos Creator and check if there is still an error in the console. If there is an error, reopen the Extension Manager to find the SDK extension, try to disable the SDK extension first (click the switch), and open the File Explorer / Finder, and then return to Cocos Creator to refresh the resources, and then re-enable the SDK extension. Then open the File Explorer / Finder and return to Cocos Creator until the console does not report an error. If the error is still reported, it may be necessary to restart Cocos Creator several times and repeat the above steps.

9. Click Assets in the lower left corner of the Cocos Creator Editor, and under the assets directory, double-click the HomeScene file to see the scene of the sample source home page (the home page is a 2D scene).

10. Click Project > Build in the menu bar, and build native task according to Cocos Creator Publishing to Native Platforms based on documents and actual conditions, a native platform project is constructed.

    If the build fails, please open the build log file to view the error message and correct the issue according to the error prompt. If the error message is related to ZEGO SDK and you can't solve it by yourself, please contact ZEGO technical support.

    

11. Run the demo.

    • Run on Android device:

      1. Click Project > Build Release in the menu bar, create a new build task, select "Android" as the target platform, fill in all the required information, click "Build" to generate native project, and click "Make" to start compiling (this step will take a long time ).

      2. After completing the above operations, connect an Android device and click "Run". Or use Android Studio to open the native project directory build/android/proj for operation.

         If the build fails, please refer to FAQs 1, 2, and 3 in the Integrate the SDK document.

         

    • Run on iOS device:

      1. Click Project > Build Release in the menu bar, create a new build task, select "iOS" as the target platform , fill in all the required information, click "Build" to generate native project, and click "Make" to start compiling (this step will take a long time ).

      2. After completing the above operations, use Xcode to open the build/ios/proj/ZegoExpressExample.xcodeproj native project, then connect an iOS device, select the ZegoExpressExample-mobile target, select the connected device, and click the "Run" button run.

         To run on iOS Simulator, please refer to the additional processing steps for iOS project in the Integrate the SDK document.

         
         

    • Run on macOS device:

      1. Click Project > Build Release in the menu bar, create a new build task, select "Mac" as the target platform , fill in all the required information, click "Build" to generate native project, and click "Make" to start compiling (this step will take a long time ).

      2. After completing the above operations, click the Run button, or use Xcode to open the build/mac/proj/ZegoExpressExample.xcodeproj native project.

         

    • Run on Windows device:

      1. Click Project > Build Release in the menu bar, create a new build task, select "Windows" as the target platform , fill in all the required information, click "Build" to generate native project, and click "Make" to start compiling (this step will take a long time ).

      2. After completing the above operations, click the Run button, or use Visual Studio to open the build\windows\proj\ZegoExpressExample.sln native project.

         

Experience audio and video calling/live streaming function

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.