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.
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:
In order to follow the procedure in this page, you must have:
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
.The following section shows how to use the Agora Video SDK for Web to add Video Call into your Web app step by step.
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"
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>
To implement the client logic of Video Call, we need to do the following things:
createClient
to create an AgoraRTCClient
object.join
to join an RTC channel with the App ID, user ID, token, and channel name. 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.client.on("user-published")
event. When the SDK triggers this event, get an AgoraRTCRemoteUser
object from this event.subscribe
to subscribe to the AgoraRTCRemoteUser
object and get the RemoteAudioTrack
and RemoteVideoTrack
objects of the remote user.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();
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.
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.
Agora also provides an open-source sample project on GitHub for your reference.
In addition to integrating the Agora Web SDK into your project through npm, you can also choose either of the following methods to integrate the Agora Web SDK into your project:
Through the CDN: Add the following code to the line before <style>
in the index.html
file of your project.
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.12.1.js"></script>
Manually download the latest Agora Web SDK 4.x, copy the .js
file to the directory of your project files, and add the following code to the line before the <style>
tag in your project.
<script src="./AgoraRTC_N-4.12.1.js"></script>
AgoraRTC
object. You can visit the AgoraRTC
object to operate the Web SDK.