How to Make an Voice Call with ZEGOCLOUD APIs

In today’s connected world, making an audio call is a simple and efficient way to communicate with others, no matter where they are. Whether through a traditional phone line or a modern voice chat app, the ability to initiate a voice conversation is just a few taps or clicks away. Let’s explore the basics of making an audio call with ZEGOCLOUD, ensuring you can connect seamlessly with friends, family, or colleagues.

What is an Audio Call?

An Audio call is communication between two or more people using a phone system or other real-time communication technology that transmits sound. Audio calls can be made using various devices, including traditional landline phones, mobile phones, and VoIP (Voice over Internet Protocol) systems that use the Internet to transmit calls. Today, an Audio Call also allows for additional features, such as sending text messages or sharing files during the call.

What is a Voice Chat App?

A voice chat app is a software application designed to allow users to communicate with each other through voice calls over the internet. Unlike traditional phone calls that use cellular networks, voice chat apps use VoIP (Voice over Internet Protocol) technology, enabling real-time voice communication between users on various devices, including smartphones, tablets, and computers.

These apps often support additional features such as text messaging, video calls, file sharing, and group chats, making them versatile tools for both personal and professional communication. Popular examples include Skype, WhatsApp, Discord, and Zoom. These apps have gained immense popularity for their convenience, cost-effectiveness, and the ability to connect people across the globe without the need for traditional telephony services.

Key Features Of Voice Chat App

Voice chat apps have become indispensable tools in today’s digital communication landscape, thanks to their comprehensive set of features and functionalities that cater to a wide range of communication needs. Here are some key features and functionalities commonly found in voice chat apps:

Real-time Voice Communication: The core feature of any voice chat app, allows users to make voice calls over the internet to one or multiple participants.
High-Quality Audio: Advanced codecs and noise reduction technologies ensure clear and crisp voice quality, even in noisy environments or over slow internet connections.
Video Calling: In addition to voice calls, many apps offer video calling features, enabling face-to-face communication with one or more participants.
Text Messaging: Integrated text chat allows users to send messages, links, and files, facilitating communication before, during, and after voice or video calls.
Group Calls/Conferencing: Enables multiple users to join in a single voice or video call, making it ideal for team meetings, virtual gatherings, and collaborative projects.
Screen Sharing: This feature allows users to share their screen with call participants, useful for presentations, demonstrations, and collaborative work.
End-to-End Encryption: Many voice chat apps prioritize security by encrypting voice and video calls, as well as messages, to protect users’ privacy and data.
Push Notifications: Notifications alert users to incoming calls, messages, and other important app activities, ensuring they don’t miss important communications.

How to Build an Audio Call App with ZEGOCLOUD

Creating an Audio call using the ZEGOCLOUD Voice Call SDK is straightforward. In fact, it comes with various tools that can be used to implement and set up scalable single and audio conference call functionality.

Voice Call (Express Audio) SDK is a ZEGOCLOUD product offering developers real-time Audio and interactive services. It allows for seamless, high-definition Audio and video services across multiple platforms, with low latency and high concurrency.

With Express Audio, developers can create one-to-many and many-to-many real-time audio interactions for scenarios such as live shows, audio conferences, and more. Additionally, developers can easily access full-speed audio and video services using just four lines of code, enabling them to build products and services with a superior audio experience in just 30 minutes.

Key features of ZEGOCLOUD audio call SDK:

1. Easily add voice call functionality.

One of the main benefits of using ZEGOCLOUD Voice Call SDK is that it allows developers to easily add voice call functionality to their applications without worrying about the underlying technical complexities. The SDK provides a simple and intuitive interface that makes it easy for developers to integrate voice calls into their applications. Whether they are building a mobile app, a web application, or a desktop application, ZEGOCLOUD got you covered.

2. HD audio calls

Another benefit of using Voice SDK is that it provides high-quality voice calls with minimal latency and excellent audio quality. This is important for applications that rely on calls for communication, such as Audio conferencing call services, online tutoring, or customer support. With ZEGOCLOUD Voice Call SDK, users can enjoy clear and reliable voice calls without interference or dropouts.

3. Enterprise-grade security

ZEGOCLOUD Voice Call SDK also offers a range of security features to protect the privacy and security of users. The SDK uses encryption to secure voice calls and protect against unauthorized access, ensuring that users can communicate safely and securely.

4. Use captivating audio effects to increase user engagement.

ZEGOCLOUD’s Express Audio allows you to enhance user engagement by incorporating fascinating audio effects. Using the Express Audio SDK, you can add voice beautification, voice changing, and other exciting voice transformations to create a more engaging experience for users.

Overall, ZEGOCLOUD Voice Call SDK is a valuable tool for developers looking to add voice call functionality to their applications.

How to Make an Audio Call with ZEGOCLOUD

Preparation

To get started, you will need the following:

A ZEGOCLOUD developer account – sign up here
A Windows or macOS device with internet connectivity, Audio, and video support
Familiarity with web development
Check that your browser is compatible with ZEGOCLOUD (check browser compatibility).

Create an audio call project

To create a web project for ZEGOCLOUD Express Audio SDK, you can follow these steps:

1. Install the necessary tools

To create a web project, you will need a text editor or integrated development environment (IDE) to write and edit your code and a web browser to test and view your project. Some popular options include Visual Studio Code, Sublime Text, and WebStorm.

2. Set up your project directory

Create a new directory on your computer to hold your project files. Inside this directory, create a file called index.html another called style.css. These files will have your project’s HTML and CSS code, respectively.

3. Add the ZEGOCLOUD Express Audio SDK

Download the ZEGOCLOUD Express Audio SDK and add it to your project directory. You can then include the SDK in your HTML file by adding a script tag in the head of your HTML file, like this:

<head>
  <script src="/path/to/zegocloud-express-audio-sdk.js"></script>
</head>

4. Write your HTML and CSS code

Use your text editor or IDE to write your project’s HTML and CSS code. Furthermore, add audio functionality to your project, such as playing and pausing Audio or controlling the volume.

This is a sample of how it should look:

<html>

<head>
    <meta charset="UTF-8">
    <title>Zego Express Audio Call</title>
    <style type="text/css">
        * {
            font-family: sans-serif;
        }

        h1,
        h4 {
            text-align: center;
        }

        #local-audio, #remote-audio {
            width: 400px;
            height: 300px;
            border: 1px solid #dfdfdf;
        }

        #local-audio {
            position: relative;
            margin: 0 auto;
            display: block;
        }

        #remote-audio {
            display: flex;
            margin: auto;
            position: relative !important;
        }
    </style>
</head>

<body>
    <h1>
        Zego RTC Audio Call
    </h1>
    <h4>Local audio</h4>
    <div id="local-video"></div>
    <h4>Remote video</h4>
    <div id="remote-audio"></div>
   </body>

</html>

5. Test your project

Open your index.html file in a web browser to test your project. Make sure that the Audio functionality is working as expected.

How to Implement an Introductory Audio Call

1. Create a ZegoExpressEngine instance

To use the ZegoExpressEngine, you will need to create a sample of the class and pass in your AppID and Server URL as parameters. Here is an example of how to do this:

const zego = new ZegoExpressEngine(appID, serverURL);

You can use the loginRoom function on your ZegoExpressEngine model to log in to a room. You must enter the, a, and an object containing your user ID and user name. To receive updates on the current user’s room connection status, you can also pass in an options object with the userUpdate field set to true. As an example, consider the following:

const result = await zego.loginRoom(roomID, token, { userID, userName }, { userUpdate: true });

You can use the roomStateUpdate callback to see the connection status of the room. This Callback receives updates on the quality of the room connection, such as the state, error code, and extended data. Here’s an example of how to put this Callback to use:

// Callback for info on the current user's room connection status.

zego.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
    if (state == 'DISCONNECTED') {
        // Disconnected from the room
    }

    if (state == 'CONNECTING') {
        // Connecting to the room
    }

    if (state == 'CONNECTED') {
        // Connected to the room
    }
});"

roomUserUpdate Is a callback function that receives user updates.

// Callback for info on the status of the users in the room.
zego.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

roomStreamUpdatethe Callback receives updates for streams in a room.

// Callback for info on the status of the streams in the room.
zego.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {

    } else if (updateType == 'DELETE')

    }
});

2. Publish streams

Call the createStream method and pass in an object with the desired Audio and video configuration to create a local audio and video stream. For example, to create a stream with Audio but no video, you could pass in { camera: { audio: true, video: false } } as the argument. The createStream method returns a Promise that resolves with an MediaStream object representing the local Stream. You can then use this Stream to render Audio by assigning it to the srcObject property of an audio element.

// Create a local stream with audio but no video
const localStreamPromise = zego.createStream({ camera: { audio: true, video: false } });

// Wait for the local stream to be returned by the ZEGOCLOUD server
const localStream = await localStreamPromise;

// Get the audio element
const localAudio = document.getElementById('local-audio');

// Render the audio by assigning the local stream to the srcObject property of the audio element
localAudio.srcObject = localStream;

To start publishing a local audio and video stream to remote users, call the startPublishingStream method.

// localStream is the MediaStream object created after calling creatStream method.
zego.startPublishingStream(streamID, localStream)

Use the following callbacks to check a published stream’s status:

publisherStateUpdate the Callback gets Stream publishing status updates.

zego.on('publisherStateUpdate', result => {
    // Callback for info on stream publishing status.
})

publishQualityUpdate Callback reports stream publishing quality.

zego.on('publishQualityUpdate', (streamID, stats) => {
    // Callback for information on stream publishing quality.
})

3. Playing Streams

Call startPlayingStream with the stream ID to play a published Audio stream. Assigning the resulting MediaStream object to an audio element’s srcObject property renders the Audio.

const remoteStreamPromise = zego.startPlayingStream(streamID);
const remoteStream = await remoteStreamPromise;
const remoteAudio = document.getElementById('remote-audio');
remoteAudio.srcObject = remoteStream;

ZEGO SDK supports event handlers for stream status and quality adjustments. You can utilize the playerStateUpdate and playQualityUpdate callbacks to get updates on the Stream’s playback.

zego.on('playerStateUpdate', result => {
  // Callback for info on stream playing status
});

zego.on('playQualityUpdate', (streamID, stats) => {
  // Callback for info on stream quality
});

4. Stop publishing streams

Call stopPublishingStream with the stream ID to stop publishing a local audio/video stream to remote users. This will prevent other users from printing and viewing the Stream.

zego.stopPublishingStream(streamID)

5. Destroy Stream

The destroyStream method destroys a local media stream. This stops the Stream and frees its resources.

// localStream is created when createStream method is called. 

zego.destroyStream(localStream)

6. Stop playing the Stream

Call stopPlayingStream with the stream ID to stop a remote audio/video stream.

zego.stopPlayingStream(streamID)

7. Log out of a room

Call logoutRoom with the room ID to log out.

zego.logoutRoom(roomID)

Run a demo.

Conclusion

The ZEGOCLOUD audio call SDK follows a simple design pattern. Implement the Audio call functionality with ease. Add full-fledged audio conference apps by calling simple methods with low-level programming. Finally, mind implementing business logic instead of worrying about complex codes. Download this article’s sample demo source code to create audio call applications.

If you are looking for low code development, ZEGOCLOUD UIKits are a collection of ready-to-use user interface components designed to streamline the incorporation of audio calls, video calls, and real-time messaging into mobile and web applications. By leveraging these UIKits, developers can significantly reduce the time and effort required to implement robust and high-quality communication functionalities.

Read More