Browser SDK

anchorFeatures
anchor
  • Create and join audio and/or video meetings
  • Create by email address, SIP address, or PSTN number
  • Meeting and event controls
  • Audio and video meeting control
  • Maximum bandwidth controls
  • View shared content
  • Share screen/application from Chrome and Firefox
  • Device Controls (get device list, send PIN, pair)
  • Device Search
  • Personal Meeting Room support
  • Move Media
  • Moderator Controls

If you're interested in interfacing with Webex Teams from your backend Node.js applications, check out the Node.js SDK.

anchorGetting Started
anchor

In this guide, we'll create a Node.js project with the Browser SDK and make a Webex Teams meeting.

To more easily follow along with this guide, the codebase is available on GitHub: https://github.com/WebexSamples/webex-meetings-quick-start

Requirements
  • Node.js LTS 6.x and later, npm 3.x and later
  • Optionally: nvm to manage Node.js versions
  • Supported Desktop Browsers: Chrome (latest), Firefox (latest), and Safari (latest)
Step 1: Create the New Project & Install the SDK
  1. First, create the project directory and change directories into it, as shown below:

     mkdir webex-meetings
     cd webex-meetings
  2. Next, create a new project by using the node package manager (npm) to create a package.json file for your project:

     npm init -y
  3. Install webex and save it to your package.json file, as shown below:

     npm install --save webex
Step 2: Create HTML for App

For this app, we'll create a very simple HTML file to load the SDK, provide a form to specify the meeting destination, and buttons to join and hangup. We'll wire up this form in JavaScript to create and join a meeting!

Create a file called index.html in the root of the project directory with the following contents:

<!DOCTYPE html>
<html>
  <title>Webex Teams Meetings Quick Start</title>
  <body>
    <h1>Meetings Quick Start</h1>
    <p>This sample demonstrates how to start a meeting using Webex JS-SDK in the browser.</p>

    <form id="destination">
      <input
        id="invitee"
        name="invitee"
        placeholder="Person ID or Email Address or SIP URI or Room ID"
        type="text">
        <input title="join" type="submit" value="join">
    </form>

    <div style="display: flex">
      <video style="width:50%" id="self-view" muted autoplay></video>
      <div style="width:50%">
        <audio id="remote-view-audio" autoplay></audio>
        <video id="remote-view-video" autoplay></video>
      </div>
    </div>

    <button id="hangup" title="hangup" type="button">cancel/hangup</button>

    <script src="./index.js"></script>
  </body>
</html>
Step 3: Bundle/Compile the SDK JavaScript

In this example we'll use Parcel to build and serve our web app, including the SDK.

You'll see that our JavaScript file is being loaded in our index.html file with <script src="./index.js"></script>. We'll create this file in the next step.

Let's add Parcel to our project:

npm install --save-dev parcel-bundler
Step 4: Authenticate App with Webex Teams

For this example, we'll use your personal access token which can be found in Getting Started if you're logged in. This token provides access to your account for testing purposes, and shouldn't be used for anything other than testing. If you don't already have a Webex Teams account, click Sign Up at the top of this page to create a new account.

Authenticate with Webex Teams

Create the index.js file and add this code to authenticate with Webex Teams, replacing YOUR_ACCESS_TOKEN with your development token:

// index.js
const Webex = require('webex');

const webex = Webex.init({
  credentials: {
    access_token: `YOUR_ACCESS_TOKEN`
  }
});
Step 5: Add Meeting Capabilities to our JavaScript

All of the meeting functionality for this app will live in our app's main JavaScript file, index.js.

Register with Webex Teams Cloud

We'll need to register and connect with the Webex Teams Cloud before attempting to join a meeting. Add the following code to your app.js file:

webex.meetings.register()
  .catch((err) => {
    console.error(err);
    alert(err);
    throw err;
  });
Set up Event Listeners for Meeting Events

When we make a meeting, the SDK will generate several events to keep us informed about the meeting's progress such as media stream changes, hangups, etc. Let's watch for these events by adding this code:

function bindMeetingEvents(meeting) {
  meeting.on('error', (err) => {
    console.error(err);
  });

  // Handle media streams changes to ready state
  meeting.on('media:ready', (media) => {
    if (!media) {
      return;
    }
    if (media.type === 'local') {
      document.getElementById('self-view').srcObject = media.stream;
    }
    if (media.type === 'remoteVideo') {
      document.getElementById('remote-view-video').srcObject = media.stream;
    }
    if (media.type === 'remoteAudio') {
      document.getElementById('remote-view-audio').srcObject = media.stream;
    }
  });

  // Handle media streams stopping
  meeting.on('media:stopped', (media) => {
    // Remove media streams
    if (media.type === 'local') {
      document.getElementById('self-view').srcObject = null;
    }
    if (media.type === 'remoteVideo') {
      document.getElementById('remote-view-video').srcObject = null;
    }
    if (media.type === 'remoteAudio') {
      document.getElementById('remote-view-audio').srcObject = null;
    }
  });

  // Of course, we'd also like to be able to leave the meeting:
  document.getElementById('hangup').addEventListener('click', () => {
    meeting.leave();
  });
}
Set up Join Meeting handler

When our meeting is created, we are not automatically joined into it. Let's create a helper function that will join the meeting for us.

// Join the meeting and add media
function joinMeeting(meeting) {

  return meeting.join().then(() => {
    const mediaSettings = {
      receiveVideo: true,
      receiveAudio: true,
      receiveShare: false,
      sendVideo: true,
      sendAudio: true,
      sendShare: false
    };

    // Get our local media stream and add it to the meeting
    return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {
      const [localStream, localShare] = mediaStreams;

      meeting.addMedia({
        localShare,
        localStream,
        mediaSettings
      });
    });
  });
}
Set up Event Listener for the Join Button

In our simple HTML page, we added a form with a few buttons to start and end the meeting. Let's add an event listener to initiate the meeting when the join button is clicked:

document.getElementById('destination').addEventListener('submit', (event) => {
  // again, we don't want to reload when we try to join
  event.preventDefault();

  const destination = document.getElementById('invitee').value;

  return webex.meetings.create(destination).then((meeting) => {
    // Call our helper function for binding events to meetings
    bindMeetingEvents(meeting);

    return joinMeeting(meeting);
  })
  .catch((error) => {
    // Report the error
    console.error(error);
  });
});

Now, when we click join, we'll use the SDK's meetings.create and meeting.join methods to create and join the meeting.

Final index.js file

Your index.js file should look like this when completed:

const Webex = require('webex');

const myAccessToken = 'YOUR_ACCESS_TOKEN';

if (myAccessToken === 'YOUR_ACCESS_TOKEN') {
  alert('Make sure to update your access token in the index.js file!');
  return;
}

webex = Webex.init({
  credentials: {
    access_token: myAccessToken
  }
});

webex.meetings.register()
  .catch((err) => {
    console.error(err);
    alert(err);
    throw err;
  });

function bindMeetingEvents(meeting) {
  meeting.on('error', (err) => {
    console.error(err);
  });

  // Handle media streams changes to ready state
  meeting.on('media:ready', (media) => {
    if (!media) {
      return;
    }
    if (media.type === 'local') {
      document.getElementById('self-view').srcObject = media.stream;
    }
    if (media.type === 'remoteVideo') {
      document.getElementById('remote-view-video').srcObject = media.stream;
    }
    if (media.type === 'remoteAudio') {
      document.getElementById('remote-view-audio').srcObject = media.stream;
    }
  });

  // Handle media streams stopping
  meeting.on('media:stopped', (media) => {
    // Remove media streams
    if (media.type === 'local') {
      document.getElementById('self-view').srcObject = null;
    }
    if (media.type === 'remoteVideo') {
      document.getElementById('remote-view-video').srcObject = null;
    }
    if (media.type === 'remoteAudio') {
      document.getElementById('remote-view-audio').srcObject = null;
    }
  });

  // Of course, we'd also like to be able to leave the meeting:
  document.getElementById('hangup').addEventListener('click', () => {
    meeting.leave();
  });
}

// Join the meeting and add media
function joinMeeting(meeting) {

  return meeting.join().then(() => {
    const mediaSettings = {
      receiveVideo: true,
      receiveAudio: true,
      receiveShare: false,
      sendVideo: true,
      sendAudio: true,
      sendShare: false
    };

    // Get our local media stream and add it to the meeting
    return meeting.getMediaStreams(mediaSettings).then((mediaStreams) => {
      const [localStream, localShare] = mediaStreams;

      meeting.addMedia({
        localShare,
        localStream,
        mediaSettings
      });
    });
  });
}

document.getElementById('destination').addEventListener('submit', (event) => {
  // again, we don't want to reload when we try to join
  event.preventDefault();

  const destination = document.getElementById('invitee').value;

  return webex.meetings.create(destination).then((meeting) => {
    // Call our helper function for binding events to meetings
    bindMeetingEvents(meeting);

    return joinMeeting(meeting);
  })
  .catch((error) => {
    // Report the error
    console.error(error);
  });
});
Step 6: Load the Web App

Let's serve the web app with Parcel and start a meeting in the browser!

./node_modules/.bin/parcel index.html

Open the app (http://localhost:1234) in your browser to use your new web app! Enter the Person ID or email address of who you want to start a meeting with and click the start meeting button. Congratulations, you've made your first meeting in the browser using the Webex Browser SDK!

anchorSamples
anchor

We've put together several samples of the Browser SDK in action. All of the sample code is available in GitHub. Take the SDK for a spin with a live demo and check out the sample code:

SampleDescriptionLive DemoSample Code
Single Party CallMake or receive 1:1 video calls with another Webex Teams userDemoJS | HTML
Single Party Call with MuteMake or receive 1:1 video calls with another Webex Teams user, with the option to mute your audio and/or video streamsDemoJS | HTML
Multi Party CallStart or join a Webex Teams video call with multiple participantsDemoJS | HTML
Call with Content SharingMake or receive video calls with the ability to share your screen or an application (Firefox only)DemoJS | HTML
Authentication - Implicit Grant FlowAuthenticate as a Webex Teams user with the Implicit Grant FlowDemoJS | HTML
Authentication - Guest IssuerAuthenticate as a Webex Teams guest user with a Guest Issuer tokenDemoJS | HTML
Browser - Read StatusDiscover and update the read status for Webex Teams spacesDemoJS | HTML
Browser - SocketReceive Webex Teams webhook events via SDK SocketDemoJS | HTML
Browser - Advanced MeetingsCreate, join, and control Webex Meetings with the Browser SDKDemoJS | HTML
anchorSDK API Reference
anchor

In-depth API reference information for the Browser SDK API can be found here:

https://webex.github.io/webex-js-sdk/api/

anchorUpgrading
anchor

The plugin-phone plugin is deprecated and replaced with plugin-meetings. With this change comes significant code changes in upgrading to the meetings plugin. The meetings plugin is much more feature rich and maintained than the phone plugin.

For users of the phone plugin, one of the main changes from plugin-phone is the idea of having a meeting object that we are performing actions on. Instead of just "calling" a destination, a meeting object must be "created" and then "joined".

For more detailed information, please see the upgrade guide

anchorTroubleshooting
anchor

If you're having trouble with the Browser SDK, here's some more information to help troubleshoot the issue.

SDK Requirements

Review the following SDK requirements to make sure you're using the correct minimum versions of Node.js, npm, etc.:

  • Node.js LTS 6.x and later
  • npm 3.x and later
  • Optionally: nvm to manage Node.js versions
  • Supported Desktop Browsers: Chrome (latest), Firefox (latest), and Safari (latest)
  • A Webex Teams account and an integration with the necessary scopes
Additional Logging

You can add additional logging to your application to help narrow down any issues with the SDK.

Change the Log Level Within Your App

Set the log level to info to see more logging to help troubleshoot the issue:

webex.config.logger.level = `info`;

To see even more logging, set the log level to debug.

Firewall Ports

The Browser SDK makes use of several network protocols and ports. If you're encountering connection or connectivity issues, make sure there aren't any firewalls blocking or preventing communication with any Webex Teams endpoints. For more information about the network and web security requirements for Webex Teams services, please see Network Requirements for Webex Teams Services.

Getting Support

If you're stumped, contact the Webex Developer Support team for more help with the SDK.

Last updated: October 16, 2019