Implement a basic video call

Introduction

This guide describes how to implement basic audio and video functions with the ZEGO Express SDK.

Basic concepts:

• ZEGO Express SDK: The real-time audio and video SDK developed by ZEGOCLOUD to help you quickly build high-quality, low-latency, and smooth real-time audio and video communications into your apps across different platforms, with support for massive concurrency.

• Stream publishing: The process of the client app capturing and transmitting audio and video streams to the ZEGOCLOUD Real-Time Audio and Video Cloud.

• Stream playing: The process of the client app receiving and playing audio and video streams from the ZEGOCLOUD Real-Time Audio and Video Cloud.

• Room: The service for organizing groups of users, allowing users in the same room to send and receive real-time audio, video, and messages to each other.

  1. Logging in to a room is required to perform stream publishing and playing.
  2. Users can only receive notifications about changes in the room they are in (such as new users joining the room, existing users leaving the room, new audio and video streams being published, etc.).

For more basic concepts, refer to the Glossary.

2. Prerequisites

Before you begin, make sure you complete the following steps:

• Create a project in ZEGOCLOUD Console, and get the AppID and AppSign of your project.
• The ZEGO Express SDK has been integrated into the project. For details, see How to view project information.

3 Implementation process

The following diagram shows the basic process of User A playing a stream published by User B:

The API call sequence of the entire stream publishing and playing process is as follows:

3.1 Create an engine

1. Create the UI（Optional）

Add interface elements

Before getting started, it is recommended for developers to add the following interface elements to facilitate the implementation of basic real-time audio and video functionality.

• A view for local preview
• A view for remote video
• A Stop button

2. Import SDK

Import the SDK into the project.

import 'package:zego_express_engine/zego_express_engine.dart';

3. Create an engine

Call the createEngineWithProfile interface to create a singleton engine object by passing the obtained AppID and AppSign as the parameters "appID" and "appSign".

If callback methods need to be registered, developers can implement certain methods in ZegoEventListener according to their needs. After creating the engine, callbacks can be set by calling the on interface.

// Using a common scenario const profile = { appID: xxx, // AppSign only meets simple authentication requirements. If you need to upgrade to a more secure authentication method, please refer to How to upgrade from AppSign authentication to Token authentication // AppSign can be obtained from the console, in the format @"39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" appSign: '39011cbxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', scenario: 0 };

ZegoExpressEngine.createEngineWithProfile(profile)

3.2 Login to room

1. Login

Create a ZegoUser object by passing the user ID parameter "userID", then call the loginRoom interface with the room ID parameter "roomID" and the user parameter "user" to login to the room. If the room does not exist, it will be created and logged into when calling this interface.

• Within the same AppID, ensure that the "roomID" information is globally unique.
• Within the same AppID, ensure that the "userID" is globally unique. It is recommended for developers to set it as a meaningful value and associate it with their own business account system.

let roomConfig = new ZegoRoomConfig();
// If you use appsign for authentication, the token parameter does not need to be filled in; if you need to use a more secure authentication method: token authentication, please refer to [How to upgrade from AppSign authentication to Token authentication](https://doc-en.zego.im/faq/token_upgrade?product=ExpressVideo&platform=all)
// roomConfig.token = "xxxx";
// Only ZegoRoomConfig with the "isUserStatusNotify" parameter set to "true" can receive the onRoomUserUpdate callback.
roomConfig.isUserStatusNotify = true;
// Login to the room
// Start logging into the room
ZegoExpressEngine.instance().loginRoom('room1', {'userID': 'id1', 'userName': 'user1'}, roomConfig);

2. Listen for event callbacks after logging into the room

Based on the specific requirements of your application, you can listen for the desired event notifications after logging into the room, such as updates to the room state, user state, and stream state.

• roomStateUpdate: Callback for room state updates. After logging into the room, if there are changes in the room connection state (such as room disconnection or login authentication failure), the SDK will notify through this callback.

• roomUserUpdate: Callback for user state updates. After logging into the room, if there are new users added or removed in the room, the SDK will notify through this callback.

  Only when calling the loginRoom interface and passing the ZegoRoomConfig configuration with the “isUserStatusNotify” parameter set to “true”, users will receive the roomUserUpdate callback.

• roomStreamUpdate: Callback for stream state updates. After logging into the room, if there are new audio or video streams added or removed by users in the room, the SDK will notify through this callback.

// The following are commonly used callbacks related to rooms

ZegoExpressEngine.instance().on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
  // Room state update callback. After logging into the room, when the room connection state changes (such as room disconnection, login authentication failure, etc.), the SDK will notify through this callback.
}); ;


ZegoExpressEngine.instance().on('roomUserUpdate', (roomID, updateType, userList) => {
  // User state update. After logging into the room, when there are new users added or deleted in the room, the SDK will notify through this callback.
});

ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => {
  // Stream state update. After logging into the room, when there are new audio/video streams pushed or deleted by users in the room, the SDK will notify through this callback.
});

3.3 Stream publishing

1. Start stream publishing

Call the startPublishingStream interface with the "streamID" parameter allows you to send your local audio and video stream to remote users.

//  Start stream publishing
ZegoExpressEngine.instance().startPublishingStream("streamID");

2. Enable local rendering and preview (optional)

import { findNodeHandle } from 'react-native';

// Get a react ref
let localViewRef = findNodeHandle(this.refs.zego_preview_view);

// Start local preview
ZegoExpressEngine.instance().startPreview({
    'reactTag': localViewRef,
    'viewMode': 0,
    'backgroundColor': 0
});

// React render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_preview_view'/>
        </view>
    )
}

3. Listen to event callbacks after publishing

According to the actual needs of the application, listen to the desired event notifications after publishing, such as publishing state updates.

publisherStateUpdate: Callback for publishing state updates. After calling the publishing interface successfully, when the publishing state changes, such as network interruption causing publishing exceptions, the SDK will notify through this callback while retrying to publish.

ZegoExpressEngine.instance().on("publisherStateUpdate", (streamID, state, errorCode, extendedData) => {
    // After calling the publishing interface successfully, when the publisher state changes, such as network interruption causing publishing exceptions, the SDK will notify through this callback while retrying to publish
    //....
});

3.4 Playing Stream

1. Start playing stream

Call the startPlayingStream interface to pull the audio and video stream pushed by the remote end according to the stream ID parameter "streamID".

import { findNodeHandle } from 'react-native';

// Get a react ref
let remoteViewRef = findNodeHandle(this.refs.zego_play_view);

// Start playing stream
ZegoExpressEngine.instance().startPlayingStream("streamID", {
    'reactTag': remoteViewRef,
    'viewMode': 0,
    'backgroundColor': 0
});

// React render
render() {
    return (
        <View>
            <ZegoTextureView ref='zego_play_view'/>
        </view>
    )
}

2. Listen to event callbacks after playing

According to the actual needs of the application, listen to the desired event notifications after playing, such as playing state updates.

playerStateUpdate: Callback for playing state updates. After calling the playing interface successfully, when the playing state changes, such as network interruption causing playing exceptions, the SDK will notify through this callback while retrying to play.

ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
    /** After calling the playing interface successfully, when the player state changes, such as network interruption causing playing exceptions, the SDK will notify through this callback while retrying to play */
    //....
});

3.5 Experience Real-time Audio and Video Functions

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.

3.6 Stop stream publishing and playing

1. Stop stream publishing and playing

Call the stopPublishingStream interface to stop sending local audio and video streams and end the call.

/** Stop publishing stream */
ZegoExpressEngine.instance().stopPublishingStream();

If local preview is enabled, developers can call the stopPreview interface to stop previewing according to business needs after stopping publishing.

// Stop local preview
ZegoExpressEngine.instance().stopPreview();

2. Stop stream playing/rendering

Call the stopPlayingStream interface to stop pulling remote audio and video streams.

// Stop playing stream
ZegoExpressEngine.instance().stopPlayingStream("streamID");

3. Exit the room

Call the logoutRoom interface to log out of the room. The local end will receive the roomStateUpdate callback to notify the result of the call and stop all publishing and playing streams as well as local preview.

// Logout room
ZegoExpressEngine.instance().logoutRoom('room1');

3.7 Destroy the engine

Call the destroyEngine interface to destroy the engine and release the resources used by the SDK.

ZegoExpressEngine.destroyEngine();