Integrate an extension

Extensions are add-ons designed to rapidly extend the functionality of your app. Extensions Marketplace is home to extensions that make your app more fun. Extensions provide features such as Audio effects and voice changing, Face filters and background removal, and Live transcription and captioning.

In the Agora Extensions Marketplace:

• Vendors create and publish extensions to provide functionality such as audio and video processing.
• App developers use extensions to quickly implement fun and interactive functionality.

This page shows you how to integrate an extension from Agora Extensions Marketplace into your app. There can be specific guidance for each extension.

An extension accesses voice and video data when it is captured from the user's local device, modifies it, then plays the updated data to local and remote video channels.

A typical transmission pipeline consists of a chain of procedures, including capture, pre-processing, encoding, transmitting, decoding, post-processing, and play. Audio or video extensions are inserted into either the pre-processing or post-processing procedure, in order to modify the voice or video data in the transmission pipeline.

To test the code used in this page you need to have:

• Implemented either of the following:
  • UI Kit quickstart
  • SDK quickstart

• A supported browser.

• Physical media input devices, such as a camera and a microphone.

• A JavaScript package manager such as npm.

• An Agora account and project.

• A computer with Internet access.

  Ensure that no firewall is blocking your network communication.

In order to integrate an extension into your project:

1. Activate an extension

   1. Log in to Agora Console.

   2. In the left navigation panel, click Extension Marketplace, then click the extension you want to activate.

      You are now on the extension detail page.

   3. Select a pricing plan and click Buy and Activate.

      • If you have already created an Agora project:

        The Projects section appears and lists all of your projects.

      • If you have not created an Agora project:

        Create a new project, the project appears in the Projects section.

   4. Under Projects on the extension detail page, find the project in which you want to use the extension, then turn on the switch in the Action column.

2. Get the apiKey and apiSecret for the extension

   If required for the extension, to get the extension apiKey and apiSecret, in the Projects extension detail page, click View in the Secret column.

3. Download the extension

   In the extension detail page, click Download, you are taken to the npm page for the extension.

4. Install the extension in your project

   1. In the extension npm page, copy the Install command.

   2. In the root of your project, install the extension package. For example, for AI Noise Suppression:

      npm i agora-extension-ai-denoiser
      

You are now ready to integrate the extension in your app.

To use an extension in your Agora project:

• The implementation procedure varies according to extensions. Each extension vendor provides their own implementation guides, which is validated by Agora before the official release of the extension.

• To implement the extension in your project, go to the detail page of the extension on Extensions Marketplace, click Implementation guides, and follow the steps on the page.

To learn how to use a Web extension, see AI Noise Suppression.

To ensure that you have integrated the extension in your app:

1. Generate a temporary token in Agora Console.

2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

3. In main.js, update appID, channel and token with your values.

4. Start the dev server

   Execute the following command in the terminal:

   npm run dev
   

   Use the URL displayed in the terminal to open the app in your browser.

5. Try out the extension that you have integrated.

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

• AgoraRTC.registerExtensions