By following the sequential flow of this document and integrating the provided code snippets, you'll be able to authenticate your application and create and manage your first meetings. Whether you're new to Webex's Meeting SDK or looking to brush up on the basics, this guide ensures a streamlined experience to get you up and running in no time. Let's dive in!

anchorImport the Meetings SDK

To install the latest stable version of the Meetings SDK use either NPM or CDN.

NPM

The Meetings SDK is available as a nodejs module via NPM. You can install it using either yarn or npm utilities:

 yarn add webex

or

npm install webex

CDN

A minified version of the Meeting SDK is also provided via the unpkg or jsdelivr Content Delivery Networks (CDN). To include the CDN Meeting SDK:

 <!-- unpkg -->
 <script crossorigin src="https://unpkg.com/webex/umd/webex.min.js"></script>
 <!-- jsdelivr -->
 <script crossorigin src="https://cdn.jsdelivr.net/npm/webex/umd/webex.min.js"></script>

If you're already using a bundler like Webpack or Rollup) you can simply import or require the package and use the above snippet, assigning the initialized webex variable to window.webex.

We also provide a meetings specific SDK via unpkg. Access by including the following code:

 <script crossorigin src="https://unpkg.com/webex/umd/meetings.min.js"></script>

anchorInitialize the SDK

If you don't already have a Cisco Webex account, visit the Webex Developer Portal to create your account and retrieve your access token from the following page: Getting and Using your Personal Access Token.

To create a new Webex object, replace <AUTHORIZATION/BOT TOKEN> below with your Personal Access Token from the Developer Portal:

const Webex = import(`webex`);
const webex = Webex.init({
  credentials: {
    access_token: `<AUTHORIZATION/BOT TOKEN>`
  }
});

You can only create rooms or meetings once the Webex object is ready. You'll want to attach a listener for the Webex object's ready event and proceed only after that event has fired. Here's a complete workflow:

1. Listen for the ready event and log a message.
2. Create a room titled "My First Room".
3. Add Alice and then Bob to the new room.
4. Send a "Hi Everyone" message to all the participants in the room.

// Listen for the ready event
webex.once('ready', () => {
    console.log('Authentication#initWebex() :: Webex Ready');
  });

webex.rooms.create({ title: `My First Room` }).then(room => {
  return Promise.all([
    webex.memberships.create({
      roomId: room.id,
      personEmail: `alice@example.com`
    }),
    webex.memberships.create({
      roomId: room.id,
      personEmail: `bob@example.com`
    })
  ]).then(() =>
    webex.messages.create({
      markdown: `**Hi Everyone**`,
      roomId: room.id
    })
  );
});

anchorWebex Object Attribute Reference

The following tables cover all of the available configuration attributes for the webex object.

Default Attributes

Credentials

Storage

Meetings

Other Attributes

Here's a complete example Webex object:

{
  appPlatform: 'testClient',
  fedRamp: true,
  credentials: {
    access_token: 'your_webex_access_token',
    clientType: 'confidential',
    client_id: 'id',
    client_secret: 'secret',
    scope: 'spark:all spark:kms',
    redirect_uri,
  },
  logger: {
    level: 'debug',
    historyLength: 1000,
  },
  appName: 'sdk-samples',
  storage: {
    boundedAdapter: new StorageAdapterLocalStorage('webex'),
    unboundedAdapter: new LocalForageStoreAdapter('web-client-internal'),
  },
  meetings: {
    mediaSettings: {
      pstn: false,
    },
    reconnection: {
      enabled: false,
      autoRejoin: true,
    },
    metrics: {
      clientName: 'WEBEX_JS_SDK',
      clientType: 'WEBEX_SDK',
    },
    logging: {
      enable: true,
      verboseEvents: true,
    },
    resolution: {
      maxWidth: 1280,
      maxHeight: 720,
      idealWidth: 1280,
      idealHeight: 720,
    },
    screenResolution: {
      maxWidth: 1920,
      maxHeight: 1080,
      idealWidth: 1920,
      idealHeight: 1080,
    },
    bandwidth: {
      audio: 64000,
      video: 4000000,
      startBitrate: 2000,
    },
    videoShareFrameRate: 30,
    aspectRatio: 1.7695852534562213,
    autoUploadLogs: true,
    enableRtx: true,
    receiveTranscription: false,
    enableExtmap: false,
    experimental: {
      enableMediaNegotiatedEvent: false,
      enableUnifiedMeetings: false,
      enableAdhocMeetings: false,
      enableTurnDiscovery: true,
    },
  },
};

anchorUse a Proxy Agent to Open a WebSocket Connection

For consumers who are not using the SDK via the browser, it may be necessary to configure a proxy agent to connect with Mercury and open a WebSocket in a proxy environment. This can be done by configuring an agent as part of a DefaultMercuryOptions config object. The agent object will then be injected into the SDK and used in the Mercury plug-in during WebSocket construction as an option property, allowing a connection to be established via the specified proxy URL:

const webex = require(`webex`);
const HttpsProxyAgent = require('https-proxy-agent');

let httpsProxyAgent = new HttpsProxyAgent(url.parse(proxyUrl));

webex.init({
  config: {
    defaultMercuryOptions: {
      agent: httpsProxyAgent
    }
  }
});