How to Make an Audio Call

The Audio Call, also known as a Voice call or telephone call, has been a fundamental part of communication for centuries. From the earliest versions of the telephone to modern-day smartphone apps, the Audio call allowed people to connect with each other no matter where they were.

Creating an Audio Call platform using the ZEGOCLOUD Voice Call SDK is simple. In this article, we will learn how to make it!

Definition of an Audio Call

An Audio call is a 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.

Why Create an Audio Call 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.

Features

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 a 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 Express Audio 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.