Integrate Agora Audio and Video Call: Complete Guide

Agora drives over 50 billion minutes of video each month, providing under 400ms latency and secure token-based connections for global, scalable real-time communication apps.

Key Points

Agora supports over 200 countries, ensuring smooth worldwide video connection for diverse users.
Over 1.7 billion devices use Agora SDKs for dependable, real-time engagement solutions worldwide.
Agora reaches latency under 400ms, providing smooth, interactive video experiences across networks.

Overview

Today’s users expect seamless, real-time communication within their apps and websites. From telehealth platforms to online education and customer support systems, video calling has become an essential feature for engaging users and providing high-value services.

For businesses investing in a mobile app or website, adding video calling can greatly improve user experience and keep you ahead of competitors. One of the top solutions in this field is Agora—a reliable platform offering real-time video, voice, and interactive streaming.

In this article, we’ll show you how to integrate Agora’s video calling functionality into your web application, covering both backend and frontend implementation. Whether you’re an app development company building scalable solutions for clients or a business owner exploring digital upgrades, this guide will help you get started.

Get Your Agora Credentials

The first step is to set up your Agora project and obtain the credentials required for integration.

Steps:

Log in to the Agora Console.
Create a new project or select an existing one.
Copy your App ID and App Certificate.

These credentials will be essential for authenticating users and securing your video calls—an important aspect of any secure custom web app development project.

Import Agora SDK into Your Web App

To enable Agora’s video features in your frontend, add their SDK script to your HTML file:

                                        <script 
src="https://download.agora.io/sdk/release/AgoraRTC_N-4.20.2.js">
</script>

This ensures that your web app has access to Agora’s APIs for creating and managing video calls—a crucial step for delivering advanced website development services.

3. Create a Secure Token on Your Server

Agora uses tokens to authenticate users and manage access to video channels. Generating tokens server-side prevents exposing sensitive credentials in frontend code.

If you’re using PHP/Laravel on the backend—a popular choice among app development companies—you can use the following approach:

Install a Token Library

Run:

                                        composer require boogiefromzk/agora-token

Create a Token-Generation Endpoint

Add this to your Laravel controller:

                                        use BoogieFromZk\AgoraToken\RtcTokenBuilder2;

function generateToken(Request $request) {
    $appID = "YOUR_APP_ID";
    $appCertificate = "YOUR_APP_CERTIFICATE";
    $channelName = $request->channelName;
    $uid = null;
    $expireTimeInSeconds = 3600;
    $role = RtcTokenBuilder2::ROLE_PUBLISHER;

    $token = RtcTokenBuilder2::buildTokenWithUid(
        $appID,
        $appCertificate,
        $channelName,
        $uid,
        $role,
        $expireTimeInSeconds
    );

    return response()->json(['token' => $token]);
}

Replace YOUR_APP_ID and YOUR_APP_CERTIFICATE with your credentials from the Agora Console.

4. Fetch the Token from the Frontend

Your frontend will need to request the token from your backend before joining a channel. Here’s how to do it using JavaScript’s fetch API:

                                        async function getToken(channelName) {
  const response = await fetch('https://yourdomain.com/api/get-agora-token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ channelName }),
  });

  const data = await response.json();
  return data.token;
}

This separation of concerns—handling security on the backend and video logic on the frontend—is a hallmark of quality custom web app development.

5. Initialize the Agora Client and Join a Channel

Once you have the token, you can join a video channel:

                                        const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

async function joinChannel(appID, channelName, token) {
  await client.join(appID, channelName, token, null);
  console.log("Joined Agora channel:", channelName);
}

Joining a channel is the foundation for building interactive experiences, often a requirement in modern website development services.

6. Create Local Audio and Video Tracks

After joining the channel, capture your user’s camera and microphone:

                                        localTracks = await AgoraRTC.createMicrophoneAndCameraTracks();

localTracks[0]: microphone audio
localTracks[1]: camera video

7. Display the Local Video Stream

To show your video feed:

                                        const localVideoContainer = document.getElementById('waiting-user-placeholder');
localTracks[1].play(localVideoContainer.id);

8. Publish Local Tracks

Now make your video and audio visible to others:

                                        await client.publish(localTracks);
console.log("Local tracks published.");

Publishing streams is essential for collaborative features—something clients often seek in custom web app development projects.

9. Subscribe to Remote Users’ Streams

Whenever another user joins the same channel, Agora triggers the user-published event. You need to subscribe to their video or audio:

                                        client.on("user-published", async (user, mediaType) => {
  await client.subscribe(user, mediaType);

  if (mediaType === 'video') {
    const remoteVideoTrack = user.videoTrack;
    const videoElement = document.createElement('video');
    videoElement.autoplay = true;
    videoElement.id = `remote-video-${user.uid}`;
    videoElement.className = 'join-user-style';

    const parentDiv = document.getElementById('local-video');
    parentDiv.appendChild(videoElement);

    remoteVideoTrack.play(videoElement);
    console.log(`Remote video playing for user: ${user.uid}`);
  }

  if (mediaType === 'audio' && user.audioTrack) {
    user.audioTrack.play();
  }
});

10. Toggle Microphone On or Off

Allow users to mute or unmute their microphone:

                                        document.getElementById('toggleMic').addEventListener('click', () => {
  let micIcon = document.getElementById('mic-fun-change');

  if (micIcon.classList.contains('bi-mic')) {
    micIcon.classList.remove("bi-mic");
    micIcon.classList.add('bi-mic-mute');
  } else {
    micIcon.classList.remove("bi-mic-mute");
    micIcon.classList.add('bi-mic');
  }

  if (localTracks && localTracks[0]) {
    const audioTrack = localTracks[0];
    audioTrack.setMuted(!audioTrack.muted);
    console.log(audioTrack.muted ? "Microphone muted" : "Microphone unmuted");
  }
});

Such controls improve user experience, a critical goal for any app development company.

11. Toggle Camera On or Off

Similarly, add functionality to turn the camera on or off:

                                        document.getElementById('toggleCamera').addEventListener('click', () => {
  if (localTracks && localTracks[1]) {
    const videoTrack = localTracks[1];
    videoTrack.setMuted(!videoTrack.muted);
    console.log(videoTrack.muted ? "Camera disabled" : "Camera enabled");
  }
});

12. End the Call

Gracefully leave the call and clean up resources:

                                        async function endCall() {
  document.getElementById('stored_time_video_call').value = "";
  document.getElementById('mic-fun-change').classList.add('bi-mic');

  if (localTracks) {
    localTracks.forEach(track => {
      track.stop();
      track.close();
    });
  }

  await client.leave();

  document.getElementById('app2').style.display = "none";
  console.log("Call ended and all local tracks closed.");
}

Example HTML Layout

Below is a simple HTML template to support your video call UI:

                                        <html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.20.2.js"></script>
</head>
<body>
  <div id="app">
    <div id="remote-video-container">
      <div id="waiting-user-placeholder" class="waiting-user"></div>
    </div>
    <div class="local-video-al">
      <button id="toggleMic">
        <i id="mic-fun-change" class="bi bi-mic"></i>
      </button>
      <button id="toggleCamera">
        <i class="bi bi-camera-video-fill"></i>
      </button>
      <button class="accept-button endCallButton" id="accept">
        <i class="bi bi-telephone-fill"></i>
      </button>
    </div>
    <div id="local-video" class="local-video-end"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Why Agora for Web App Development?

Integrating Agora offers several advantages:

Scalability — Supports millions of concurrent users
Low Latency — Smooth video and audio in real-time
Cross-platform — Works on web, mobile, and desktop
Security — Token-based authentication

For businesses seeking innovative website development services or engaging an experienced app development company, Agora provides a powerful toolkit for modern communication features.

Final Words

Building a video call feature used to be a complex, costly endeavour. Thanks to platforms like Agora and modern development frameworks, it’s now practical and accessible for businesses of all sizes.

Whether you’re working on a large enterprise solution or a niche app, integrating real-time video is a great way to elevate your product and keep users engaged. If you’re looking to take your project further, partnering with a skilled app development company can help ensure seamless integration and robust performance.