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 Interactive Live Streaming 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 Interactive Live Streaming Standard functionality.
As shown in the figure, the workflow for adding Interactive Live Streaming Standard in your project is as follows:
Set the client role and latency level
Each user in an Interactive Live Streaming Standard channel is either a host or an audience member. Hosts publish streams to the channel, and the audience subscribe to the streams. When a user is an audience member, you can control the delay the user receives host streams using ClientRoleOptions
.
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
After joining a channel, app clients with the role of the host can publish audio and video. For an auidence memeber to send audio and video, call setClientRole
to switch the client role.
You can use the LocalTrack
and RemoteTrack
objects to publish and subscirbe to 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.basicLiveStreaming.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 Interactive Live Streaming into your Web app step by step.
Integrate the Agora Web SDK 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": "basicLiveStreaming.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 basicLiveStreaming.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="host-join">Join as host</button>
<button type="button" id="audience-join">Join as audience</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:
AgoraRTCClient
object."host"
or "audience"
.MicrophoneAudioTrack
object and call createCameraVideoTrack to create a CameraVideoTrack
object. And call AgoraRTCClient.publish to publish the local audio and video tracks that you have created to the channel.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 interactive streaming. Note that these methods apply to different objects.
Copy the following code into basicLiveStreaming.js
and then replace appID
and token
with values from your Agora project.
import AgoraRTC from "agora-rtc-sdk-ng";
let rtc = {
// For the local audio and video tracks.
localAudioTrack: null,
localVideoTrack: null,
client: null,
};
let options = {
// Pass your app ID here.
appId: "your_app_id",
// Set the channel name.
channel: "test",
// Use a temp token
token: "your_temp_token",
// Uid
uid: 123456,
};
async function startBasicLiveStreaming() {
rtc.client = AgoraRTC.createClient({mode: "live", codec: "vp8"});
window.onload = function () {
document.getElementById("host-join").onclick = async function () {
rtc.client.setClientRole("host");
await rtc.client.join(options.appId, options.channel, options.token, options.uid);
// Create an audio track from the audio sampled by a microphone.
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// Create a video track from the video captured by a camera.
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
// Publish the local audio and video tracks to the channel.
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
// Dynamically create a container in the form of a DIV element for playing the remote video track.
const localPlayerContainer = document.createElement("div");
// Specify the ID of the DIV container. You can use the `uid` of the remote user.
localPlayerContainer.id = options.uid;
localPlayerContainer.textContent = "Local user " + options.uid;
localPlayerContainer.style.width = "640px";
localPlayerContainer.style.height = "480px";
document.body.append(localPlayerContainer);
rtc.localVideoTrack.play(localPlayerContainer);
console.log("publish success!");
};
document.getElementById("audience-join").onclick = async function () {
rtc.client.setClientRole("audience");
await rtc.client.join(options.appId, options.channel, options.token, options.uid);
rtc.client.on("user-published", async (user, mediaType) => {
// Subscribe to a remote user.
await rtc.client.subscribe(user, mediaType);
console.log("subscribe success");
// If the subscribed track is video.
if (mediaType === "video") {
// Get `RemoteVideoTrack` in the `user` 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 subscribed track is audio.
if (mediaType === "audio") {
// Get `RemoteAudioTrack` in the `user` object.
const remoteAudioTrack = user.audioTrack;
// Play the audio track. No need to pass any DOM element.
remoteAudioTrack.play();
}
});
rtc.client.on("user-unpublished", user => {
// Get the dynamically created DIV container.
const remotePlayerContainer = document.getElementById(user.uid);
// Destroy the container.
remotePlayerContainer.remove();
});
};
document.getElementById("leave").onclick = async function () {
// Close all the local 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();
};
};
}
startBasicLiveStreaming();
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": "basicLiveStreaming.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.10.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: "./basicLiveStreaming.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 join a channel. However, being in a call on your own is no fun. Ask a friend to join the same video streaming 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.14.2.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.14.2.js"></script>
AgoraRTC
object. You can visit the AgoraRTC
object to operate the Web SDK.