agora-uikit

A web library (non-react projects) for easy integration of Agora video calling feature. It's a thin wrapper over the agora-react-uikit package.

Installation

Package manager

Using npm

npm install agora-ui-kit

Using yarn

yarn add agora-ui-kit

Using pnpm

pnpm add agora-ui-kit

After installation, the package can be imported using import or require

import AgoraUIKit from "agora-ui-kit";

const AgoraUIKit = require("agora-ui-kit");

CDN

Unpkg

<script src="https://unpkg.com/agora-ui-kit/dist/agora-ui-kit.min.js"></script>

JSDelivr

<script src="https://cdn.jsdelivr.net/gh/nfmshow/agora-ui-kit/dist/agora-ui-kit.min.js"></script>

Usage Example

AgoraUIKit.start({
  appId: "xxxxxx", // Your agora app id
  channel: "my-channel", // Agora channel name
  token: "xxxxxx", // Token 
  uid: 165, // User id - (Integer)
  viewport: document.getElementById("agora-container"), // Optional, HTML Element
  layout: 1, // Optional, 1 for "grid", 0 for "pin". (Default: 1)
  enableAudio: true, // Optional, (Default: true)
  enableVideo: true, // Optional, (Default: true)
  onUserJoin: () => { // Optional
    console.log("User joined");
  }, 
  onUserLeft: () => { // Optional
    console.log("User left");
  }, 
  onCallEnd: () => { // Optional
    console.log("Call ended");
  }, 
});

To leave the call programmatically

await AgoraUIKit.end();

If you are working on a react project, use the main library instead.