### Start Development Server

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Use this command to start the development server for the sample application. Ensure you have npm installed.

```shell
npm run dev
```

--------------------------------

### Install Super Clarity Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/super-clarity_web

Run this command in your project root to install the extension package.

```bash
npm install agora-extension-super-clarity
```

--------------------------------

### Install project dependencies

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Navigate to the project directory and install the necessary node modules.

```bash
cd agora_web_quickstart
npm install
```

--------------------------------

### Initialize Agora RtcEngine

Source: https://appbuilder.agora.io/

Configures and initializes the Agora engine to start a video session. Requires a valid App ID and token.

```java
    1RtcEngineConfig config = new RtcEngineConfig();
    2config.mAppId = "Your app ID";
    3RtcEngine agoraEngine = RtcEngine.create (config);
    4agoraEngine.setupLocalVideo(new VideoCanvas(new SurfaceView(getBaseContext(), VideoCanvas.RENDER_MODE_HIDDEN, 0));
    5agoraEngine.enableVideo();
    6agoraEngine.startPreview();
    7agoraEngine.joinChannel("<Your token>", "<Your channel name>", 1, new ChannelMediaOptions());
    8agoraEngine.enableVideo();
```

--------------------------------

### POST /agent/join

Source: https://docs.agora.io/en/conversational-ai/overview/product-overview

Create and start a new Conversational AI agent instance.

```APIDOC
## POST /agent/join

### Description
Create and start a Conversational AI agent instance.

### Method
POST

### Endpoint
/agent/join
```

--------------------------------

### Install Agora RTC SDK

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Add the Agora RTC SDK package to the project via npm.

```bash
npm install agora-rtc-sdk-ng
```

--------------------------------

### IVideoTrackCompositor - start

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Starts the process of merging images and outputting the composed video.

```APIDOC
## POST /start

### Description
Starts merging images. The compositor merges the contents of all input layers and outputs a video.

### Method
POST

### Endpoint
/start

### Request Body
None

### Response
#### Success Response (200)
- **Promise<void>** - A promise that resolves when the composition starts successfully.

### Response Example
```json
{
  "status": "started"
}
```
```

--------------------------------

### Install Video Compositor Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Use npm to add the Video Compositor extension to your project. Ensure you are using Agora Web SDK version 4.12.0 or later.

```bash
npm install agora-extension-video-compositor
```

--------------------------------

### Install Beauty Effect Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Install the Beauty Effect extension using npm. Ensure your project uses Agora Web SDK version 4.12.0 or later.

```typescript
npm install agora-extension-beauty-effect
```

--------------------------------

### Start Video Compositing

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Initiates the process of merging all configured input layers into a single video output. This is an asynchronous operation.

```typescript
start(): Promise<void>;
```

--------------------------------

### GET /agent/history

Source: https://docs.agora.io/en/conversational-ai/overview/product-overview

Get the history of the conversation between the user and the agent.

```APIDOC
## GET /agent/history

### Description
Get the history of the conversation between the user and the agent.

### Method
GET

### Endpoint
/agent/history
```

--------------------------------

### GET /agent/query

Source: https://docs.agora.io/en/conversational-ai/overview/product-overview

Get the current state information of the specified agent instance.

```APIDOC
## GET /agent/query

### Description
Get the current state information of the specified agent instance.

### Method
GET

### Endpoint
/agent/query
```

--------------------------------

### Enable Clarity Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/super-clarity_web

Initializes the processor, sets up event listeners, pipes the video track, and enables the extension.

```typescript
async function onUserPublished(user, mediaType) {
  if (!context.client || mediaType !== "video" || !!context.uid) {
    return;
  }
  context.uid = user.uid;
  context.track = await context.client.subscribe(user, mediaType);
  
  // Create a processor
  context.processor = extension.createProcessor();

  // Listen for processor-related events
  context.processor.on("first-video-frame", (stats) => {
    console.log("Plugin received the first video frame, stats:", stats);
  });
  context.processor.on("error", (msg) => {
    console.error("Plugin error:", msg);
  });

  context.processor.on("stats", (stats) => {
    console.log("Plugin stats:", Date.now(), stats);
  });

  // Connect the pipeline between the processor and the video track
  context.track.pipe(context.processor).pipe(context.track.processorDestination);

  // Enable the extension
  await context.processor.enable();
  context.track.play('any-element-id');
}
```

--------------------------------

### Initialize a Vite project

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Use the Vite CLI to scaffold a new vanilla JavaScript project.

```bash
npm create vite@latest agora_web_quickstart -- --template vanilla
```

--------------------------------

### Initialize Performance Monitoring

Source: https://agora.io/en/join-slack

Sets up performance timing polyfills and global functions for marking and measuring load times, with beaconing support.

```javascript
window.ts_endpoint_url = "https:\/\/slack.com\/beacon\/timing";(function(e) { var n=Date.now?Date.now():+new Date,r=e.performance||{},t=[],a={},i=function(e,n){for(var r=0,a=t.length,i=[];a>r;r++)t[r][e]==n&&i.push(t[r]);return i},o=function(e,n){for(var r,a=t.length;a--;)r=t[a],r.entryType!=e||void 0!==n&&r.name!=n||t.splice(a,1)};r.now||(r.now=r.webkitNow||r.mozNow||r.msNow||function(){return(Date.now?Date.now():+new Date)-n}),r.mark||(r.mark=r.webkitMark||function(e){var n={name:e,entryType:"mark",startTime:r.now(),duration:0};t.push(n),a[e]=n}),r.measure||(r.measure=r.webkitMeasure||function(e,n,r){n=a[n].startTime,r=a[r].startTime,t.push({name:e,entryType:"measure",startTime:n,duration:r-n})}),r.getEntriesByType||(r.getEntriesByType=r.webkitGetEntriesByType||function(e){return i("entryType",e)}),r.getEntriesByName||(r.getEntriesByName=r.webkitGetEntriesByName||function(e){return i("name",e)}),r.clearMarks||(r.clearMarks=r.webkitClearMarks||function(e){o("mark",e)}),r.clearMeasures||(r.clearMeasures=r.webkitClearMeasures||function(e){o("measure",e)}),e.performance=r,"function"==typeof define&&(define.amd||define.ajs)&&define("performance",[],function(){return r}) // eslint-disable-line })(window); (function () { window.TSMark = function (mark_label) { if (!window.performance || !window.performance.mark) return; performance.mark(mark_label); }; window.TSMark('start_load'); window.TSMeasureAndBeacon = function (measure_label, start_mark_label) { if (!window.performance || !window.performance.mark || !window.performance.measure) { return; } performance.mark(start_mark_label + '_end'); try { performance.measure(measure_label, start_mark_label, start_mark_label + '_end'); window.TSBeacon(measure_label, performance.getEntriesByName(measure_label)[0].duration); } catch (e) { } }; if ('sendBeacon' in navigator) { window.TSBeacon = function (label, value) { var endpoint_url = window.ts_endpoint_url || 'https://slack.com/beacon/timing'; navigator.sendBeacon( endpoint_url + '?data=' + encodeURIComponent(label + ':' + value), '', ); }; } else { window.TSBeacon = function (label, value) { var endpoint_url = window.ts_endpoint_url || 'https://slack.com/beacon/timing'; new Image().src = endpoint_url + '?data=' + encodeURIComponent(label + ':' + value); }; } })(); window.TSMark('step_load');
```

--------------------------------

### GET /agent/list

Source: https://docs.agora.io/en/conversational-ai/overview/product-overview

Retrieve a list of agents that meet the specified conditions.

```APIDOC
## GET /agent/list

### Description
Retrieve a list of agents that meet the specified conditions.

### Method
GET

### Endpoint
/agent/list
```

--------------------------------

### Initialize Application Boot Data

Source: https://agora.io/en/join-slack

Sets up the global GA.boot_data object containing environment configuration, geo-location data, and application metadata.

```javascript
window.GA = window.GA || {}; window.GA.boot_data = window.GA.boot_data || {}; GA.boot_data.xhp = true; GA.boot_data.version_uid = "c5c1a12f2435cbac215b2101b347d636b50a1c67"; GA.boot_data.environment = "prod"; GA.boot_data.abs_root_url = "https:\/\/slack.com\/"; GA.boot_data.document_referrer = ""; GA.boot_data.anonymous_visitor = false; GA.boot_data.beacon_timing_url = "https:\/\/slack.com\/beacon\/timing"; GA.boot_data.referral_code = ""; GA.boot_data.auth_cookie_domain = ".slack.com"; GA.boot_data.geo = {"ip":"54.167.22.93","country":"US","is_in_european_union":false,"region":"VA","city":"Ashburn","zip":"20149","lat":39.0469,"lon":-77.4903,"metro":511,"country_label":"United States","region_label":"Virginia","country3":"USA","continent":"NA","isp":"Amazon.com"}; GA.boot_data.geocode = "en-us"; GA.boot_data.intl_prefix = ""; GA.boot_data.request_uri = "\/join\/shared_invite\/zt-pwtdea07-Oq0VrEPxW7ooiGxiuTxopg"; GA.boot_data.canonical_web_url = "https:\/\/slack.com\/join\/shared_invite\/zt-pwtdea07-Oq0VrEPxW7ooiGxiuTxopg"; GA.boot_data.i18n_locale = "en-US"; GA.boot_data.geo_root_url = "https:\/\/slack.com\/"; GA.boot_data.is_usa = true; GA.boot_data.is_spain = false; GA.boot_data.is_germany = false; GA.boot_data.is_france = false; GA.boot_data.is_japan = false; GA.boot_data.is_europe = false; GA.boot_data.is_latam = false; GA.boot_data.is_brazil = false; GA.boot_data.is_india = false; GA.boot_data.is_uk = false; GA.boot_data.is_english = true; GA.boot_data.is_spanish = false;
```

--------------------------------

### Initialize AgoraRTCClient

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Create an instance of the AgoraRTC client with the specified mode and codec.

```javascript
// RTC client instance
let client = null; 

// Initialize the AgoraRTC client
function initializeClient() {
    client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    setupEventListeners();
}
```

--------------------------------

### GET /agent/turns

Source: https://docs.agora.io/en/conversational-ai/overview/product-overview

Query conversation turn information for a conversational AI agent session.

```APIDOC
## GET /agent/turns

### Description
Query conversation turn information for a conversational AI agent session.

### Method
GET

### Endpoint
/agent/turns
```

--------------------------------

### Integrate Beauty Effect Extension in JavaScript

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Initializes the extension, registers it with the SDK, and pipes the video track through the processor.

```javascript
import AgoraRTC from "agora-rtc-sdk-ng";
import BeautyExtension from "agora-extension-beauty-effect";

// Create a Client
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
// Create an instance of BeautyExtension
const extension = new BeautyExtension();
// Register the extension
AgoraRTC.registerExtensions([extension]);
// Create an instance of BeautyProcessor
const processor = extension.createProcessor();

var localTracks = {
  videoTrack: null,
  audioTrack: null
};

async function start() {
  // Create local microphone and camera tracks
  localTracks.audioTrack = localTracks.audioTrack ||
                           await AgoraRTC.createMicrophoneAudioTrack();
  localTracks.videoTrack = localTracks.videoTrack ||
                           await AgoraRTC.createCameraVideoTrack({cameraId: videoSelect.value, encoderConfig: '720p_2'});

  localTracks.videoTrack.play("local-player");

  if (processor && localTracks.videoTrack) {
    // Inject the extension into the SDK's video processing pipeline
    localTracks.videoTrack.pipe(processor).pipe(localTracks.videoTrack.processorDestination);
    // Enable beauty effects
    await processor.enable();
  }
}

// Set beauty parameters
async function setBeautyOptions() {
  processor.setOptions({
    lighteningContrastLevel: 2,
    lighteningLevel: 0.7,
    smoothnessLevel: 0.6,
    sharpnessLevel: 0.5,
    rednessLevel: 0.5
  });
}
```

--------------------------------

### Testing the Sample Code

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Follow these steps to run and test the Agora Web SDK sample code locally.

```APIDOC
## Testing the Sample Code

Take the following steps to run and test the sample code:

1. In your `.js` file, update the values for `appId`, and `token` with values from Agora Console. Use the same `channel` name you used to generate the token.

2. To start the development server, use the following command:
    ```shell
    npm run dev
    ```

3. Open your browser and navigate to the URL displayed in your terminal, for example, `http://localhost:5173`.

    You see the following page:

    ![](https://docs-md.agora.io/images/video-sdk/quickstart-ui-web.png)

4. On a second device, repeat the previous steps to install and launch the app. Alternatively, use the [Web demo](https://webdemo.agora.io/basicVideoCall/index.html) or clone the [sample project on Github](https://github.com/AgoraIO/API-Examples-Web) to join the same channel and test the following use-cases:
    1. Click **Join** to join the channel.
    2. Enter the same app ID, channel name, and temporary token.

        Once your friend joins the channel, you can see and hear each other.

> ℹ️ **Information**
> - Run the web app on a local server (localhost) for testing purposes only. When deploying to a production environment, use the HTTPS protocol.
>  - Due to browser security policies that restrict HTTP addresses to 127.0.0.1, the Agora Web SDK only supports HTTPS protocol and `http://localhost` (`http://127.0.0.1`). Please do not use the HTTP protocol to access your project, except for `http://localhost` (`http://127.0.0.1`).
```

--------------------------------

### Register and Initialize Super Clarity

Source: https://docs.agora.io/en/video-calling/advanced-features/super-clarity_web

Create the extension object and register it with the Agora SDK before joining a channel.

```javascript
// Create a SuperClarityExtension object
const extension = new SuperClarityExtension();

// Register the extension
AgoraRTC.registerExtensions([extension]);

const context = {
  uid: undefined,
  client: undefined,
  track: undefined,
  processor: undefined,
};

async function join(appid, channel) {
  context.client = AgoraRTC.createClient({ mode: "live", codec: "vp8", role: "host" });
  context.client.on("user-published", onUserPublished);
  context.client.on("user-unpublished", onUserUnpublished);

  await context.client.join(appid, channel, null);
}

// Join the channel
join('your-appid', 'your-channel');
```

--------------------------------

### Register Beauty Extension with Agora Client

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Create an AgoraRTC client, instantiate the BeautyExtension, and then register it with AgoraRTC. This makes the extension available for use.

```javascript
// Create Client
var client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});
// Create BeautyExtension instance
const extension = new BeautyExtension();
// Register extension
AgoraRTC.registerExtensions([extension]);
```

--------------------------------

### Start a transcription task with translation configuration

Source: https://docs.agora.io/en/real-time-stt/develop/translation

Use this cURL request to initiate a transcription task with the translateConfig parameter to specify source and target languages.

```bash
curl --location --request POST 'https://api.agora.io/api/speech-to-text/v1/projects/{appid}/join' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: <credentials>' \
--data '{
    "name": "unique-agent-id",
    "languages": [
        "en-US"
    ],
    "maxIdleTime": 50,
    "rtcConfig": {
        "channelName": "<YourChannelName>",
        "subBotUid": "<YourSubscribeUid>",
        "pubBotUid": "<YourPublishUid>",
        "subscribeAudioUids": ["123", "456"]
    },
    "translateConfig": {
        "languages": [
            {
                "source": "en-US",
                "target": [
                    "ar-SA",
                    "id-ID",
                    "fr-FR",
                    "ja-JP"
                ]
            }
        ]
    }
}'
```

--------------------------------

### Create Local Media Tracks

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Initializes microphone and camera tracks for local media streaming.

```javascript
// Declare variables for local tracks
let localAudioTrack = null;
let localVideoTrack = null;

// Create local audio and video tracks
async function createLocalMediaTracks() {
    localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    localVideoTrack = await AgoraRTC.createCameraVideoTrack();
}
```

--------------------------------

### Super Clarity Extension Integration

Source: https://docs.agora.io/en/video-calling/advanced-features/super-clarity_web

This code demonstrates the minimum setup required to integrate the Super Clarity extension into your Agora RTC project. It covers client creation, extension registration, and handling of user publishing and unpublishing events.

```APIDOC
## SuperClarityExtension Integration

### Description
This code snippet shows how to register and use the SuperClarityExtension with AgoraRTC.

### Method
JavaScript

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
const extension = new SuperClarityExtension();
AgoraRTC.registerExtensions([extension]);

const context = {
  uid: undefined,
  client: undefined,
  track: undefined,
  processor: undefined,
};

async function join(appid, channel) {
  context.client = AgoraRTC.createClient({ mode: "live", codec: "vp8", role: "host" });
  client.on("user-published", onUserPublished);
  client.on("user-unpublished", onUserUnpublished);

  await client.join(appid, channel, null);
}

async function onUserPublished(user, mediaType) {
  if (!context.client || mediaType !== "video" || !!context.uid) {
    return;
  }
  context.uid = user.uid;
  context.track = await context.client.subscribe(user, mediaType);
  context.processor = extension.createProcessor();

  context.processor.on("first-video-frame", (stats) => {
    console.log("plugin have first video frame, stats:", stats);
  });
  context.processor.on("error", (msg) => {
    console.log("plugin error:", msg);
  });
  context.processor.on("stats", (stats) => {
    console.log("plugin stats:", Date.now(), stats);
  });
  context.track.pipe(context.processor).pipe(context.track.processorDestination);
  await context.processor.enable();
  context.track.play('any element id')
}

async function onUserUnpublished(user, mediaType) {
  if (!context.client || mediaType !== "video" || context.uid !== user.uid) {
    return;
  }
  context.processor.unpipe();
  context.track.unpipe();
  await context.processor.release();
  context.processor = undefined;
  context.track.stop();
  context.track = undefined;
}

join('your-appid', 'your-channel');
```

### Response
N/A
```

--------------------------------

### Create and Pipe Beauty Processor

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Create a BeautyProcessor instance from the registered extension and pipe the local video track through it. This prepares the video track for beauty effect processing.

```javascript
const processor = extension.createProcessor();
localTracks.videoTrack.pipe(processor).pipe(localTracks.videoTrack.processorDestination);
```

--------------------------------

### Frontend Initialization Data

Source: https://agora.io/en/join-slack

Configuration objects containing emoji sheet URLs, boot data, and CDN path mappings for the application.

```javascript
var inc_js_setup_data = { emoji_sheets: { apple: 'https://a.slack-edge.com/80588/img/emoji_2017_12_06/sheet_apple_64_indexed_256.png', google: 'https://a.slack-edge.com/80588/img/emoji_2017_12_06/sheet_google_64_indexed_256.png', }, }; // common boot_data var boot_data = {"api_url":"\/api\/","app":"web","user_id":null,"team_id":"T00000000","visitor_uid":"65792f73613bd5c2621e3e8e5ade9e1a","no_login":true,"version_ts":1776672759,"version_uid":"c5c1a12f2435cbac215b2101b347d636b50a1c67","cache_version":"v21-nomad","cache_ts_version":"v2-bunny","redir_domain":"slack-redir.net","cdn":{"edges":["https:\/\/a.slack-edge.com\/","https:\/\/b.slack-edge.com\/","https:\/\/a.slack-edge.com\/"],"avatars":"https:\/\/ca.slack-edge.com\/","downloads":"https:\/\/downloads.slack-edge.com\/","files":"https:\/\/slack-files.com\/"},"signin_url":"https:\/\/slack.com\/signin","abs_root_url":"https:\/\/slack.com\/","team_url":"","image_proxy_url":"https:\/\/slack-imgs.com\/","beacon_timing_url":"https:\/\/slack.com\/beacon\/timing","beacon_error_url":"https:\/\/slack.com\/beacon\/error","clog_url":"clog\/track\/","api_token":null,"vvv_paths":{"codemirror":"https:\/\/a.slack-edge.com\/bv1-13\/codemirror.min.01041b214ad5d0ce8596.min.js","codemirror_addon_simple":"https:\/\/a.slack-edge.com\/bv1-13\/codemirror_simple.3d89c2b25af934849031.min.js","codemirror_load":"https:\/\/a.slack-edge.com\/bv1-13\/codemirror_load.6f8ed67367997045b993.min.js","codemirror_files":{"javascript":"https:\/\/a.slack-edge.com\/bv1-13\/codemirror_lang_javascript.49a5fc73cdd3de232000.min.js"}},"notification_sounds":[{"value":"b2.mp3","label":"Ding","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/b2.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/b2.ogg"},{"value":"animal_stick.mp3","label":"Boing","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/animal_stick.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/animal_stick.ogg"},{"value":"been_tree.mp3","label":"Drop","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/been_tree.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/been_tree.ogg"},{"value":"complete_quest_requirement.mp3","label":"Ta-da","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/complete_quest_requirement.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/complete_quest_requirement.ogg"},{"value":"confirm_delivery.mp3","label":"Plink","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/confirm_delivery.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/confirm_delivery.ogg"},{"value":"flitterbug.mp3","label":"Wow","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/flitterbug.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/flitterbug.ogg"},{"value":"here_you_go_lighter.mp3","label":"Here you go","url":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/push\/here_you_go_lighter.mp3","url_ogg":"https:\/\/a.slack-edge.com\/58f5096\/sounds\/pus"
```

--------------------------------

### Real-time Video Calling with Agora.io SDK

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

This JavaScript code demonstrates the basic process of real-time video calling. It includes initializing the AgoraRTC client, setting up event listeners, joining and leaving channels, and managing local and remote video tracks. Ensure you replace placeholder values for appId, channel, and token.

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

// RTC client instance
let client = null;

// Declare variables for the local tracks
let localAudioTrack = null; 
let localVideoTrack = null; 

// Connection parameters
let appId = "<-- Insert app ID -->";
let channel = "<-- Insert channel name -->";
let token = "<-- Insert token -->"; 
let uid = 0; // User ID

// Initialize the AgoraRTC client
function initializeClient() {
    client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    setupEventListeners();
}

// Handle client events
function setupEventListeners() {
    client.on("user-published", async (user, mediaType) => {
        await client.subscribe(user, mediaType);
        console.log("subscribe success");

        if (mediaType === "video") {
            displayRemoteVideo(user);
        }

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

    client.on("user-unpublished", (user) => {
        const remotePlayerContainer = document.getElementById(user.uid);
        remotePlayerContainer && remotePlayerContainer.remove();
    });
}

// Join a channel and publish local media
async function joinChannel() {
    await client.join(appId, channel, token, uid);
    await createLocalTracks();
    await publishLocalTracks();
    displayLocalVideo();
    console.log("Publish success!");
}

// Create local audio and video tracks
async function createLocalTracks() {
    localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    localVideoTrack = await AgoraRTC.createCameraVideoTrack();
}

// Publish local audio and video tracks
async function publishLocalTracks() {
    await client.publish([localAudioTrack, localVideoTrack]);
}

// Display local video
function displayLocalVideo() {
    const localPlayerContainer = document.createElement("div");
    localPlayerContainer.id = uid;
    localPlayerContainer.textContent = `Local user ${uid
}`; 
    localPlayerContainer.style.width = "640px";
    localPlayerContainer.style.height = "480px";
    document.body.append(localPlayerContainer);
    localVideoTrack.play(localPlayerContainer);
}

// Display remote video
function displayRemoteVideo(user) {
    const remoteVideoTrack = user.videoTrack;
    const remotePlayerContainer = document.createElement("div");
    remotePlayerContainer.id = user.uid.toString();
    remotePlayerContainer.textContent = `Remote user ${user.uid
}`; 
    remotePlayerContainer.style.width = "640px";
    remotePlayerContainer.style.height = "480px";
    document.body.append(remotePlayerContainer);
    remoteVideoTrack.play(remotePlayerContainer);
}

// Leave the channel and clean up
async function leaveChannel() {
    // Close local tracks
    localAudioTrack.close();
    localVideoTrack.close();

    // Remove local video container
    const localPlayerContainer = document.getElementById(uid);
    localPlayerContainer && localPlayerContainer.remove();

    // Remove all remote video containers
    client.remoteUsers.forEach((user) => {
        const playerContainer = document.getElementById(user.uid);
        playerContainer && playerContainer.remove();
    });

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

// Set up button click handlers
function setupButtonHandlers() {
    document.getElementById("join").onclick = joinChannel;
    document.getElementById("leave").onclick = leaveChannel;
}

// Start the basic call
function startBasicCall() {
    initializeClient();
    window.onload = setupButtonHandlers;
}

startBasicCall();

```

--------------------------------

### Register Video Compositing Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Initialize the client and register the compositing and virtual background extensions.

```typescript
// Create a Client object
const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
// Create VideoCompositingExtension and VirtualBackgroundExtension objects
const extension = new VideoCompositingExtension();
const vbExtension = new VirtualBackgroundExtension();
// Register extensions
AgoraRTC.registerExtensions([extension, vbExtension]);
// Create a VideoTrackCompositor object
let compositor = extension.createProcessor();
let vbProcessor = null;
```

--------------------------------

### Initialize WebFont and Browser Features

Source: https://appbuilder.agora.io/

Loads Google Fonts and detects touch capability to update the document class.

```javascript
WebFont.load({ google: { families: ["Inter:regular,500,600,700", "Fira Code:regular,600"], }, }); !(function (o, c) { var n = c.documentElement, t = " w-mod-"; (n.className += t + "js"), ("ontouchstart" in o || (o.DocumentTouch && c instanceof DocumentTouch)) && (n.className += t + "touch"); })(window, document);
```

--------------------------------

### IBeautyProcessor.setOptions

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Configures the beauty effect parameters such as lightening, smoothness, and sharpness.

```APIDOC
## setOptions

### Description
Sets the beauty parameters for the video stream.

### Method
Method call

### Parameters
- **options** (BeautyEffectOptions) - Required - An object containing beauty settings like lighteningLevel, smoothnessLevel, etc.
```

--------------------------------

### Create Video Tracks

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Initialize screen sharing, camera, and custom video tracks for the compositing pipeline.

```typescript
// Create a screen sharing video track 
screenShareTrack = await AgoraRTC.createScreenVideoTrack({
  encoderConfig: { frameRate: 15 },
});

// Create a source video track using the video captured by the camera
sourceVideoTrack1 = await AgoraRTC.createCameraVideoTrack({
  cameraId: videoSelect.value,
  encoderConfig: "720p_1",
});

// Create a source video track using a local video file
const width = 1280,
  height = 720;
const videoElement = await createVideoElement(
  width,
  height,
  "./assets/loop-video.mp4"
);
const mediaStream = videoElement.captureStream();
const msTrack = mediaStream.getVideoTracks()[0];
sourceVideoTrack2 = AgoraRTC.createCustomVideoTrack({
  mediaStreamTrack: msTrack,
});
```

--------------------------------

### Include Agora SDK from Local Download

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Add this script tag to your project's HTML file after downloading the Web SDK package and saving the .js files locally. Adjust the path as necessary.

```html
<script src="./AgoraRTC_N-4.23.1.js"></script>
```

--------------------------------

### Set Up SDK Event Listeners

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Registers handlers for user-published and user-unpublished events. It is recommended to set these up before joining a channel.

```javascript
// Handle client events
function setupEventListeners() {
    // Declare event handler for "user-published"
    client.on("user-published", async (user, mediaType) => {
        // Subscribe to media streams
        await client.subscribe(user, mediaType);
        if (mediaType === "video") {
            // Specify the ID of the DOM element or pass a DOM object.
            user.videoTrack.play("<Specify a DOM element>");
        }
        if (mediaType === "audio") {
            user.audioTrack.play();
        }
    });

    // Handle the "user-unpublished" event to unsubscribe from the user's media tracks
    client.on("user-unpublished", async (user) => {
        const remotePlayerContainer = document.getElementById(user.uid);
        remotePlayerContainer && remotePlayerContainer.remove();
    });
}
```

--------------------------------

### IBeautyExtension.createProcessor

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Creates an IBeautyProcessor instance to manage beauty effects.

```APIDOC
## createProcessor

### Description
Creates an IBeautyProcessor object used to apply beauty effects to video tracks.

### Method
Method call

### Parameters
None

### Response
- **IBeautyProcessor** (Object) - The processor instance.
```

--------------------------------

### Create Video Track Compositor

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Initializes a new VideoTrackCompositor instance. This is the entry point for using the video compositing functionality.

```typescript
createProcessor(): VideoTrackCompositor;
```

--------------------------------

### Apply Beauty Effect Parameters

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Set specific beauty effect parameters using the setOptions method on the processor. Adjust levels for lightening, smoothness, sharpness, and redness.

```javascript
processor.setOptions({
  // Contrast
  lighteningContrastLevel: 2,
  // Brightness
  lighteningLevel: 0.7,
  // Smoothness
  smoothnessLevel: 0.6,
  // Sharpness
  sharpnessLevel: 0.5,
  // Redness
  rednessLevel: 0.5
});
```

--------------------------------

### Import Beauty Extension (HTML)

Source: https://docs.agora.io/en/video-calling/advanced-features/beauty-effect_web

Alternatively, import the BeautyExtension using a script tag in your HTML file. The extension will then be available globally as BeautyExtension.

```html
<script src="./agora-extension-beauty-effect.js"></script>
```

--------------------------------

### Import Video Compositor Extension (HTML)

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Include the Video Compositing extension using a script tag in your HTML file. This makes the VideoCompositingExtension object available globally in your JavaScript.

```html
<script src="./agora-extension-video-compositor.js"></script>
```

--------------------------------

### Basic Client User Interface for Agora.io

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

This HTML code implements a basic client user interface for a web application. It includes buttons for joining and leaving a channel and includes the JavaScript file for the Agora.io SDK. This should be placed in the `index.html` file in the project's root folder.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Web SDK Video Quickstart</title>
</head>
<body>
    <h2 class="left-align">Web SDK Video Quickstart</h2>
    <div class="row">
        <div>
            <button type="button" id="join">Join</button>
            <button type="button" id="leave">Leave</button>
        </div>
    </div>
    <!-- Include the JavaScript file -->
    <script type="module" src="/src/main.js"></script>
</body>
</html>

```

--------------------------------

### IVideoCompositingExtension - createProcessor

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Creates a VideoTrackCompositor instance to manage video composition.

```APIDOC
## POST /createProcessor

### Description
Creates a compositor.

### Method
POST

### Endpoint
/createProcessor

### Request Body
None

### Response
#### Success Response (200)
- **VideoTrackCompositor** (object) - The VideoTrackCompositor object corresponding to the compositor.

### Response Example
```json
{
  "compositor": "<VideoTrackCompositor object>"
}
```
```

--------------------------------

### IVideoTrackCompositor - createInputEndpoint

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Creates an input layer for a video track within the compositor.

```APIDOC
## POST /createInputEndpoint

### Description
Creates an input layer for the video track.

### Method
POST

### Endpoint
/createInputEndpoint

### Parameters
#### Request Body
- **option** (object) - Required - Layout options for the video input. See [LayerOption](#layeroption) for details.

### Request Example
```json
{
  "option": {
    "x": 0,
    "y": 0,
    "width": 100,
    "height": 100,
    "zOrder": 0
  }
}
```

### Response
#### Success Response (200)
- **IBaseProcessor** (object) - The IBaseProcessor object corresponding to the video input layer.

### Response Example
```json
{
  "processor": "<IBaseProcessor object>"
}
```
```

--------------------------------

### Display Local Video

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Creates a DOM container and renders the local video track within it.

```javascript
// Display local video
function displayLocalVideo() {
    const localPlayerContainer = document.createElement("div");
    localPlayerContainer.id = uid;
    localPlayerContainer.textContent = `Local user ${uid}`;
    localPlayerContainer.style.width = "640px";
    localPlayerContainer.style.height = "480px";
    document.body.append(localPlayerContainer);
    localVideoTrack.play(localPlayerContainer);
}
```

--------------------------------

### Import Super Clarity Extension

Source: https://docs.agora.io/en/video-calling/advanced-features/super-clarity_web

Methods for importing the extension into your project via JavaScript modules or HTML script tags.

```javascript
import {
  SuperClarityExtension,
  SuperClarityEvents,
  SuperClarityProcessor,
} from 'agora-extension-super-clarity';
```

```html
<script src="./agora-extension-super-clarity.js"></script>
```

--------------------------------

### Configure Compositing Layers

Source: https://docs.agora.io/en/video-calling/advanced-features/video-compositor_web

Define input endpoints and connect video tracks to the compositor pipeline.

```typescript
// Create the input layer for the screen sharing video track
const screenShareEndpoint = processor.createInputEndpoint({
  x: 0,
  y: 0,
  width: 1280,
  height: 720,
  fit: "cover",
});
// Create the input layer of the image
compositor.addImage("./assets/city.jpg", {
  x: 960,
  y: 0,
  width: 320,
  height: 180,
  fit: "cover",
});
compositor.addImage("./assets/space.jpg", {
  x: 0,
  y: 540,
  width: 320,
  height: 180,
  fit: "cover",
});
// Create input layers for source video tracks 1 and 2
const endpoint1 = compositor.createInputEndpoint({
  x: 0,
  y: 0,
  width: 320,
  height: 180,
  fit: "cover",
});
const endpoint2 = compositor.createInputEndpoint({
  x: 960,
  y: 540,
  width: 320,
  height: 180,
  fit: "cover",
});
// Set the virtual background of the source video track 1
if (!vbProcessor) {
  vbProcessor = vbExtension.createProcessor();
  await vbProcessor.init("./assets/wasms");
  vbProcessor.enable();
  vbProcessor.setOptions({ type: "none" });
}
// Connect the pipeline between the video input layer and the video track
screenShareTrack
  .pipe(screenShareEndpoint)
  .pipe(screenShareTrack.processorDestination);
sourceVideoTrack1
  .pipe(vbProcessor)
  .pipe(endpoint1)
  .pipe(sourceVideoTrack1.processorDestination);
sourceVideoTrack2
  .pipe(endpoint2)
  .pipe(sourceVideoTrack2.processorDestination);
```

--------------------------------

### Import AgoraRTC SDK

Source: https://docs.agora.io/en/video-calling/get-started/get-started-sdk_web

Import the AgoraRTC module into the JavaScript file.

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