How to Create a Voice Call App with ZEGOCLOUD API

Introduction

Creating a voice call app with ZEGOCLOUD API and React is a straightforward process. In this article, I will walk you through the steps required to set up and use the API to add voice call functionality to your app.

Step 1: Sign up for ZEGOCLOUD

To use ZEGOCLOUD’s Voice Call API, you first need to sign up for an account on the ZEGOCLOUD website. You can sign up for a free trial to test the API before committing to a paid plan.

After Signup, you will see a dashboard like this.

Step 2: Create an app and get the App ID

After signing up, you will need to create a new app in the ZEGOCLOUD dashboard. This will generate an App ID, which you will need to use to initialize the API in your React app.

Step 3: Add the ZEGOCLOUD Voice Call API to your React project

You can add the ZEGOCLOUD Voice Call API to your React project by using the ZEGOCLOUD JavaScript SDK. You can install the package by using npm and adding it to your package.json file.

Step 4: Initialize the API

In your main.js file, you will need to import the ZEGOCLOUD Voice Call API package and initialize it with your App ID. This can be done by creating an instance of the ZEGOCLOUD class and calling the initialize method, passing in your App ID as a parameter.

import { useRef } from 'react';
import Zego from 'zego-express-engine-webrtc';

const VoiceCallPage = () => {
    const zego = useRef(new Zego()).current;

    useEffect(() => {
        zego.initialize("YOUR_APP_ID", "YOUR_APP_SECRET", Zego.ZegoScenario.General);
        zego.setUserStateUpdate(true);
    }, [])
  
   
    return (
        <div>
           
        </div>
    );
}

Step 5: Implement the voice call functionality

Now that the API is set up, you can start implementing the voice call functionality in your React app. You can use the ZEGOCLOUD Voice Call API to create, join, and manage voice calls. The API provides a range of methods for controlling the audio settings, as well as for managing the call participants.

import { useState, useRef } from 'react';
import Zego from 'zego-express-engine-webrtc';

const VoiceCallPage = () => {
    const [isCalling, setIsCalling] = useState(false);
    const zego = useRef(new Zego()).current;

    useEffect(() => {
        zego.initialize("YOUR_APP_ID", "YOUR_APP_SECRET", Zego.ZegoScenario.General);
        zego.setUserStateUpdate(true);
    }, [])
  
    const startCall = () => {
        zego.startCalling(['user2'], 'audio', true);
        setIsCalling(true);
    }

    const stopCall = () => {
        zego.stopCalling();
        setIsCalling(false);
    }
  
    return (
        <div>
            {!isCalling && 
                <button onClick={startCall}>Start Call</button>
            }
            {isCalling && 
                <button onClick={stopCall}>Stop Call</button>
            }
        </div>
    );
}

In the above code, we first import the Zego package, which is the JavaScript SDK for the ZEGOCLOUD Voice Call API. We use the useState hook to keep track of the isCalling state and use the useRef hook to create a reference to the Zego object.

Then we use useEffect hook to initialize the Zego object with our App ID and App Secret, and set the user state update to true.

In the startCall() function, we call the startCalling() method provided by the SDK to start a voice call with the user2 by passing the user id as an array, passing ‘audio’ as the media type, and passing true to enable the microphone. In the stopCall() function, we call the stopCalling() method provided by the SDK to end the call.

In the return statement, we have two buttons, one for starting the call and one for stopping the call. The buttons are rendered based on the isCalling state. The startCall function is called when the user clicks on the Start Call button, and the stopCall function is called when the user clicks on the Stop Call button.

Step 6: Test and deploy your app

Once you have implemented the voice call functionality, you should test your app to make sure it works as expected. You can then deploy your app to a web server or hosting service.

In this way, you can create a voice call app with ZEGOCLOUD API and React. ZEGOCLOUD provides a comprehensive set of tools for adding voice call functionality to your app, and the API is easy to use with React.

Note: The above steps are just an example and can be different based on the implementation.

For more information visit

1. ZEGOCLOUD: https://www.zegocloud.com
2. Video call with ZEGOCLOUD: https://www.zegocloud.com/product/video-call
3. Flutter video call：https://www.zegocloud.com/blog/flutter-callkit
4. Signup for an account: https://console.zegocloud.com/account/signup
5. Voice call: https://www.zegocloud.com/product/voice-call
6. Video call: https://www.zegocloud.com/product/video-call