

Video Call

Console Agora.io Community Submit ticket





Start a Video Call (Web SDK 4.x)

Last updated 2022/06/23 06:13:28

The Agora Video SDK for Web makes it easy to embed real-time Video Call into web apps. It enables you to develop rapidly and easily to enhance your social, work, education and IoT apps with face-to-face interaction.

This page shows you the minimum code you need to add Video Call into your Web app by using the Agora Video SDK for Web.

Understand the tech

The following figure shows the workflow to integrate into your app in order to add Video Call functionality.

As shown in the figure, the workflow for adding Video Call in your project is as follows:

Retrieve a token
A token is the credential that authenticates a user when your app client joins a channel. In a test or production environment, your app client retrieves tokens from a server in your security infrastructure.
Join a channel
Call joinChannel to create and join a channel. App clients that pass the same channel name join the same channel.
Publish and subscribe to audio and video in the channel

You can use the LocalTrack and RemoteTrack objects to publish and subscirbe to audio and video tracks in the channel.

For an app client to join a channel, you need the following information:

The App ID: A randomly generated string provided by Agora for identifying your app. You can get the App ID from Agora Console.
The user ID: The unique identifier of a user. You need to specify the user ID yourself, and ensure that it is unique in the channel.
A token: In a test or production environment, your app client retrieves tokens from a server in your security infrastructure. For this page, you use a temporary token with a validity period of 24 hours that you retrieve from Agora Console.
The channel name: A string that identifies the channel for the video call.

Prerequisites

In order to follow the procedure in this page, you must have:

A valid Agora account
An Agora project with an App ID and a temp token
A Windows or macOS computer meets the following requirements:
- Access to the Internet. If your network has a firewall, follow the instructions in Firewall Requirements to access Agora services.
- A browser that matches the supported browser list. Agora highly recommends using the latest version of Google Chrome.
- Physical audio and video input devices
- An Intel 2.2GHz Core i3/i5/i7 processor (2nd generation) or equivalent
Node.js and npm

Create a Web project

Create a new directory named agora_web_quickstart. For a minimal Web app client, create the following files in the directory :

index.html: The visual interface with the user.
basicVideoCall.js: The programmable interface with AgoraRTCClient to implement the client logic.
package.json: Install and manage the dependencies of your project. To create the package.json file, you can navigate to the agora_web_quickstart directory on the command line and run npm init.

Implement a client for Video Call

The following section shows how to use the Agora Video SDK for Web to add Video Call into your Web app step by step.

1. Integrate the SDK

Integrate the Agora Video SDK for Web into your project through npm, as follows:

In package.json, add agora-rtc-sdk-ng and its version number to the dependencies field:

{
   "name": "agora_web_quickstart",
   "version": "1.0.0",
   "description": "",
   "main": "basicVideoCall.js",
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
       "agora-rtc-sdk-ng": "latest"
   },
   "author": "",
   "license": "ISC"
}

To import the AgoraRTC module in your project, copy the following code into basicVideoCall.js.
```
import AgoraRTC from "agora-rtc-sdk-ng"
```

2. Implement the user interface

To implement the user interface, copy the following code into index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Agora Video Web SDK Quickstart</title>
        <!--
        This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
        -->
        <script src="./dist/bundle.js"></script>
    </head>
    <body>
        <h2 class="left-align">Agora Video Web SDK Quickstart</h2>
        <div class="row">
            <div>
                <button type="button" id="join">JOIN</button>
                <button type="button" id="leave">LEAVE</button>
            </div>
        </div>
    </body>
</html>

3. Implement the client logic

To implement the client logic of Video Call, we need to do the following things:

Call createClient to create an AgoraRTCClient object.
Call join to join an RTC channel with the App ID, user ID, token, and channel name.
Call createMicrophoneAudioTrack to create a local audio track from the audio sampled by a microphone, call createCameraVideoTrack to create a local video track from the video captured by a camera, and then call publish to publish the local audio and video tracks to the channel.
When a remote user joins the channel and publishes tracks:
1. Listen for the client.on("user-published") event. When the SDK triggers this event, get an AgoraRTCRemoteUser object from this event.
2. Call subscribe to subscribe to the AgoraRTCRemoteUser object and get the RemoteAudioTrack and RemoteVideoTrack objects of the remote user.
3. Call play to play the remote tracks.

The following figure shows the API call sequence of the basic one-to-one Video Call.

Copy the following code into basicVideoCall.js and then replace appID and token with values from your Agora project.

import AgoraRTC from "agora-rtc-sdk-ng";

let rtc = {
    localAudioTrack: null,
    localVideoTrack: null,
    client: null,
};

let options = {
    // Pass your App ID here.
    appId: "Your App ID",
    // Set the channel name.
    channel: "test",
    // Pass your temp token here.
    token: "Your temp token",
    // Set the user ID.
    uid: 123456,
};

async function startBasicCall() {
    // Create an AgoraRTCClient object.
    rtc.client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});

    // Listen for the "user-published" event, from which you can get an AgoraRTCRemoteUser object.
    rtc.client.on("user-published", async (user, mediaType) => {
        // Subscribe to the remote user when the SDK triggers the "user-published" event
        await rtc.client.subscribe(user, mediaType);
        console.log("subscribe success");

        // If the remote user publishes a video track.
        if (mediaType === "video") {
            // Get the RemoteVideoTrack object in the AgoraRTCRemoteUser object.
            const remoteVideoTrack = user.videoTrack;
            // Dynamically create a container in the form of a DIV element for playing the remote video track.
            const remotePlayerContainer = document.createElement("div");
            // Specify the ID of the DIV container. You can use the uid of the remote user.
            remotePlayerContainer.id = user.uid.toString();
            remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
            remotePlayerContainer.style.width = "640px";
            remotePlayerContainer.style.height = "480px";
            document.body.append(remotePlayerContainer);

            // Play the remote video track.
            // Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
            remoteVideoTrack.play(remotePlayerContainer);
        }

        // If the remote user publishes an audio track.
        if (mediaType === "audio") {
            // Get the RemoteAudioTrack object in the AgoraRTCRemoteUser object.
            const remoteAudioTrack = user.audioTrack;
            // Play the remote audio track. No need to pass any DOM element.
            remoteAudioTrack.play();
        }

        // Listen for the "user-unpublished" event
        rtc.client.on("user-unpublished", user => {
            // Get the dynamically created DIV container.
            const remotePlayerContainer = document.getElementById(user.uid);
            // Destroy the container.
            remotePlayerContainer.remove();
        });
    });

    window.onload = function () {
        document.getElementById("join").onclick = async function () {
            // Join an RTC channel.
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);
            // Create a local audio track from the audio sampled by a microphone.
            rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
            // Create a local video track from the video captured by a camera.
            rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
            // Publish the local audio and video tracks to the RTC channel.
            await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
            // Dynamically create a container in the form of a DIV element for playing the local video track.
            const localPlayerContainer = document.createElement("div");
            // Specify the ID of the DIV container. You can use the uid of the local user.
            localPlayerContainer.id = options.uid;
            localPlayerContainer.textContent = "Local user " + options.uid;
            localPlayerContainer.style.width = "640px";
            localPlayerContainer.style.height = "480px";
            document.body.append(localPlayerContainer);

            // Play the local video track.
            // Pass the DIV container and the SDK dynamically creates a player in the container for playing the local video track.
            rtc.localVideoTrack.play(localPlayerContainer);
            console.log("publish success!");
        };

        document.getElementById("leave").onclick = async function () {
            // Destroy the local audio and video tracks.
            rtc.localAudioTrack.close();
            rtc.localVideoTrack.close();

            // Traverse all remote users.
            rtc.client.remoteUsers.forEach(user => {
                // Destroy the dynamically created DIV containers.
                const playerContainer = document.getElementById(user.uid);
                playerContainer && playerContainer.remove();
            });

            // Leave the channel.
            await rtc.client.leave();
        };
    };
}

startBasicCall();

Test your app

This quickstart uses webpack to package the project and webpack-dev-server to run your project.

In package.json, add webpack, webpack-cli, and webpack-dev-server to the dependencies field, and the build and start:dev commands to the scripts field.

{
   "name": "agora_web_quickstart",
   "version": "1.0.0",
   "description": "",
   "main": "basicVideoCall.js",
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "build": "webpack --config webpack.config.js",
       "start:dev": "webpack serve --open --config webpack.config.js"
   },
   "dependencies": {
       "agora-rtc-sdk-ng": "latest",
       "webpack": "5.28.0",
       "webpack-dev-server": "3.11.2",
       "webpack-cli": "4.5.0"
   },
   "author": "",
   "license": "ISC"
}

Create a file named webpack.config.js in the project directory to configure webpack, with the following code:

const path = require("path");

module.exports = {
    entry: "./basicVideoCall.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist"),
    },
    devServer: {
        compress: true,
        port: 9000,
    },
};

To install dependencies, run the following command:
```
npm install
```
To build and run the project using webpack, run the following command:
```
# Use webpack to package the project
npm run build
```
Use webpack-dev-server to run the project:
```
npm run start:dev
```

A local web server automatically opens in your browser. You see the following page:

Click JOIN to start a video call. However, being in a call on your own is no fun. Ask a friend to join the same video call with you on the demo app.

Running the web app through a local server (localhost) is for testing purposes only. In production, ensure that you use the HTTPS protocol when deploying your project.

Due to security limits on HTTP addresses except 127.0.0.1, the Web SDK only supports HTTPS or http://localhost (http://127.0.0.1). If you deploy your project over HTTP, you can only visit your project at http://localhost (http://127.0.0.1).

Next steps

Generating a token by hand is not helpful in a production context. Authenticate Your Users with Tokens shows you how to start a video call with a token that you retrieve from your server.