diff --git a/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
index 44f39d110..d6dd5c5cc 100644
--- a/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
+++ b/shared/video-sdk/get-started/get-started-sdk/project-implementation/web.mdx
@@ -4,11 +4,26 @@ import CodeBlock from '@theme/CodeBlock';
The following figure illustrates the essential steps:
-
+
+
+
+The following figure illustrates the essential steps:
+
+
+
+
+The following figure illustrates the essential steps:
+
+
+
+### Complete sample code
-To implement the voice calling logic in your app, copy the following code into `agoraVideoCall.js`:
+To implement the logic in your app, create a file named `agoraLogic.js` in the project folder. This file contains `AgoraRTCClient` code that implements specific application logic.
+Copy the following code into `agoraLogic.js`:
+
+
Complete sample code for real-time
@@ -106,7 +121,13 @@ async function startBasicCall() {
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
- // Traverse all remote users.
+ // Remove the container for the local video track.
+ const localPlayerContainer = document.getElementById(options.uid);
+ if (localPlayerContainer) {
+ localPlayerContainer.remove();
+ }
+
+ // Traverse all remote users to remove remote containers
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
@@ -125,11 +146,6 @@ startBasicCall();`}
-The following figure illustrates the essential steps:
-
-
-
-To implement the voice calling logic in your app, copy the following code into `agoraVideoCall.js` :
Complete sample code for
@@ -207,15 +223,12 @@ startBasicCall();`}
-The following figure illustrates the essential steps:
-
-
-To implement these steps in your project, add the following code to `basicEngagement.js`:
-Complete sample code for >
+Complete sample code for
{`import AgoraRTC from "agora-rtc-sdk-ng";
+import { AudienceLatencyLevelType } from "agora-rtc-sdk-ng";
let rtc = {
// For the local audio and video tracks.
@@ -315,7 +328,14 @@ async function startBasicLiveStreaming() {
// Close all the local tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
- // Traverse all remote users.
+
+ // Remove the container for the local video track.
+ const localPlayerContainer = document.getElementById(options.uid);
+ if (localPlayerContainer) {
+ localPlayerContainer.remove();
+ }
+
+ // Traverse all remote users to remove remote containers
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
@@ -333,15 +353,12 @@ startBasicLiveStreaming();`}
-The following figure illustrates the essential steps:
-
-
-To implement these steps in your project, add the following code to `basicEngagement.js`:
-Complete sample code for >
+Complete sample code for
{`import AgoraRTC from "agora-rtc-sdk-ng";
+import { AudienceLatencyLevelType } from "agora-rtc-sdk-ng";
let rtc = {
// For the local audio and video tracks.
@@ -441,7 +458,14 @@ async function startBasicLiveStreaming() {
// Close all the local tracks.
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
- // Traverse all remote users.
+
+ // Remove the container for the local video track.
+ const localPlayerContainer = document.getElementById(options.uid);
+ if (localPlayerContainer) {
+ localPlayerContainer.remove();
+ }
+
+ // Traverse all remote users to remove remote containers
rtc.client.remoteUsers.forEach(user => {
// Destroy the dynamically created DIV containers.
const playerContainer = document.getElementById(user.uid);
@@ -458,10 +482,21 @@ startBasicLiveStreaming();`}
-The following sections explains the logic step-by-step:
+Refer to the steps in the [Test the sample code](#test-the-sample-code) section to run the project.
+
+Review the following implementation steps to understand the core API calls.
+
+### Import the `AgoraRTC` module
+
+Add the following code to `agoraLogic.js`:
+
+```js
+import AgoraRTC from "agora-rtc-sdk-ng";
+```
### Define the required variables
-Add the following variables to `agoraVideoCall.js`:
+
+Add the following variables to `agoraLogic.js`:
```typescript
@@ -507,7 +542,7 @@ let options = {
### Initialize an instance of `AgoraRTCClient`
-To create an `AgoraRTCClient` object, call `createClient` and set `mode` to `rtc` or `live` according to your scenario. Add the following code to `agoraVideoCall.js`:
+To create an `AgoraRTCClient` object, call `createClient` and set `mode` to `rtc` or `live` according to your scenario. Add the following code to `agoraLogic.js`:
```typescript
@@ -542,7 +577,7 @@ To receive notification from the , add the following callbacks:
* `user-published`: Triggered when a user publishes media tracks in the channel.
* `user-unpublished`: Triggered when a user unpublishes media tracks in the channel.
-You use these callbacks to play remote user audio and video tracks. To implement these callbacks, add the following code to `agoraVideoCall.js`:
+You use these callbacks to play remote user audio and video tracks. To implement these callbacks, add the following code to `agoraLogic.js`:
```typescript
// Listen for the "user-published" event
@@ -583,7 +618,7 @@ To receive notification from the , add the following callbacks:
* `user-published`: Triggered when a user publishes audio tracks in the channel.
* `user-unpublished`: Triggered when a user unpublishes audio tracks in the channel.
-You use these callbacks to play remote user audio tracks. To implement these callbacks, add the following code to `agoraVideoCall.js`:
+You use these callbacks to play remote user audio tracks. To implement these callbacks, add the following code to `agoraLogic.js`:
```typescript
// Listen for the "user-published" event, from which you can get an AgoraRTCRemoteUser object.
@@ -610,7 +645,7 @@ rtc.client.on("user-unpublished", async (user) => {
### Join the channel and view the local video
-To join a channel, call the `join` method. Pass the channel name and a temporary token for authentication. Once in the channel, use the `publish` method to share your local audio and video tracks with others. Finally, create a `div` element to display your local video. To implement this logic, add the following code to `agoraVideoCall.js`:
+To join a channel, call the `join` method. Pass the channel name and a temporary token for authentication. Once in the channel, use the `publish` method to share your local audio and video tracks with others. Finally, create a `div` element to display your local video. To implement this logic, add the following code to `agoraLogic.js`:
```typescript
document.getElementById("join").onclick = async function () {
@@ -641,7 +676,7 @@ To join a channel, call the `join` method. Pass the channel name and a temporary
### Join the channel
-To join a channel, use the `join` method. Pass the channel name and a temporary token for authentication. To implement this logic, add the following code to `agoraVideoCall.js`:
+To join a channel, use the `join` method. Pass the channel name and a temporary token for authentication. To implement this logic, add the following code to `agoraLogic.js`:
```typescript
// Join the channel
@@ -653,7 +688,7 @@ async function joinChannel() {
### Leave the channel
-Close the media tracks and `leave` the channel. To implement this logic, add the following code to `agoraVideoCall.js`:
+Close the media tracks and `leave` the channel. To implement this logic, add the following code to `agoraLogic.js`:
```typescript
document.getElementById("leave").onclick = async function () {
@@ -671,7 +706,7 @@ document.getElementById("leave").onclick = async function () {
-To exit the channel, call `leave`. To implement this logic, add the following code to `agoraVideoCall.js`:
+To exit the channel, call `leave`. To implement this logic, add the following code to `agoraLogic.js`:
``` typescript
// Leave the channel
diff --git a/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
index e1a5c1db4..2a5317b1e 100644
--- a/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
+++ b/shared/video-sdk/get-started/get-started-sdk/project-setup/web.mdx
@@ -4,51 +4,57 @@ import CodeBlock from '@theme/CodeBlock';
### Create a project
-To set up your web project, create a folder named `agora_web_quickstart`. In the new project folder, add the following files:
+1. To set up a new web project, create a folder named `agora_web_quickstart`.
-* `index.html`
-: Specifies the user interfaces for web applications.
-* `agoraVideoCall.js`: Contains `AgoraRTCClient` code that implements specific application logic.
-* `package.json`: Used to install and manage project dependencies. Create the file using the command line by going into the `agora_web_quickstart` folder and running the following command:
+1. To initialize a Node.js project, run the following command in the new project folder:
- ```bash
- npm init package.json
+ ```shell
+ npm init -y
```
+ You see a `package.json` file created in the folder that you use to manage and install project dependencies.
+
### Integrate the
Take the following steps to integrate the into your project:
-1. Add the following configuration to `package.json`:
+1. To add project dependencies, the required development tools, and necessary build scripts to your project, open `package.json` and replace the contents with the following:
```json
{
- "name": "agora_web_quickstart",
- "version": "1.0.0",
- "description": "",
- "main": "agoraVideoCall.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "dependencies": {
- "agora-rtc-sdk-ng": "latest"
- },
- "author": "",
- "license": "ISC"
+ "name": "agora_web_quickstart",
+ "version": "1.0.0",
+ "description": "",
+ "main": "agoraLogic.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"
+ },
+ "devDependencies": {
+ "webpack": "5.91.0",
+ "webpack-dev-server": "5.0.4",
+ "webpack-cli": "5.1.4"
+ },
+ "author": "",
+ "license": "ISC"
}
```
-2. To import the `AgoraRTC` module into your project, add the following code to `agoraVideoCall.js`:
+1. To download and install the and `webpack` dependencies, run the the following command in the project folder:
- ```js
- import AgoraRTC from "agora-rtc-sdk-ng";
+ ```
+ npm install
```
### Create a user interface​
-Copy the following code to `index.html` to implement a basic client user interface:
+Create a file `index.html` in the project folder and copy the following code to to implement a basic client user interface:
-
+
Sample code to create the user interface
@@ -59,7 +65,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
Web SDK Video Quickstart
@@ -89,7 +95,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
Web SDK Voice Quickstart
@@ -107,7 +113,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
-
+
Sample code to create the user interface
@@ -117,7 +123,7 @@ Copy the following code to `index.html` to implement a basic client user interfa
Web SDK Video Quickstart
diff --git a/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx b/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx
index 4dab48aee..5cd9d573d 100644
--- a/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx
+++ b/shared/video-sdk/get-started/get-started-sdk/project-test/web.mdx
@@ -1,62 +1,37 @@
-Take the following steps to test the sample code:
+Take the following steps to run and test the sample code:
-1. Update the `scripts` and `dependencies` in `package.json` as follows:
+1. Open `agoraLogic.js` and update the values for `appId`, and `token` with values from . Use the same `channel` name you used to generate the token.
- ```json
- {
- "name": "agora_web_quickstart",
- "version": "1.0.0",
- "description": "",
- "main": "agoraVideoCall.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"
- }
- ```
-
-1. To configure webpack, create a file named `webpack.config.js` in the project folder and copy the following code to the file:
+1. To configure `webpack`, create a file named `webpack.config.js` in the project folder and copy the following code to the file:
```js
const path = require("path");
module.exports = {
- entry: "./agoraVideoCall.js",
+ entry: "./agoraLogic.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
},
devServer: {
+ static: {
+ directory: path.join(__dirname, './'),
+ },
compress: true,
port: 9000,
},
};
```
-1. To install the dependencies, execute the following command:
-
- ```shell
- npm install
- ```
-
-1. To compile the project with webpack, use the following command:
+1. To compile the project with `webpack`, use the following command:
```shell
npm run build
```
-1. To run the project using the webpack-dev-server, execute:
+1. To run the project using the `webpack-dev-server`, execute:
```shell
npm run start:dev
@@ -79,7 +54,7 @@ Take the following steps to test the sample code:
1. Click **Join** to join the channel.
1. Invite a friend to clone this sample project.
- 1. Open the file `src/index.html` in a browser, and enter the same app ID, channel name, and temporary token.
+ 1. Enter the same app ID, channel name, and temporary token.
Once your friend joins the channel, you can hear each other.
@@ -91,10 +66,9 @@ Take the following steps to test the sample code:
1. Click **Join as host** to join the channel as a host.
1. Invite a friend to clone this sample project.
- 1. Open the file `src/index.html` in a browser, and enter the same app ID, channel name, and temporary token.
+ 1. Enter the same app ID, channel name, and temporary token.
If your friend joins the channel as a host, you can see each other and hear each other. If your friend joins as audience, they can see your video and hear your audio.
-
\ No newline at end of file