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 desktop browsers: Chrome, Firefox, Edge (80+), and Safari (12.1+)
- 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
anchorIn this guide, we'll create a Node.js project with the Browser SDK and make a Webex Teams meeting.
Requirements
- Node.js LTS 10.x and later, npm 6.x and later
- Optionally: nvm to manage Node.js versions
- Supported Desktop Browsers: Chrome (latest), Firefox (latest), Edge (latest), and Safari (latest)
- Supported Mobile Browsers: Chrome for Android and Safari for iOS
Step 1: Create the New Project
Create the project directory and change directories into it, as shown below:
Step 2: Create HTML for the 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 in the root of the project directory with the following contents:
Step 3: Access the JavaScript SDK
A UMD bundle version of the SDK is available on unpkg. All we have to do is add a tag in our that points to it. Looking at the code in step 2, we've already done so with the line:
New versions of the JavaScript SDK are released daily, using as the version will give you access to the latest version of the JavaScript SDK while avoiding major breaking changes.
The code for our app will be loaded in our file with . We'll create this file in the next step.
Notice that the tag for the SDK bundle must come before our , otherwise the contents of the SDK will not be available to our script.
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 file and add this code to authenticate with Webex Teams, replacing with your development 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, .
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 file:
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:
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.
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 button is clicked:
Now, when we click , we'll use the SDK's and methods to create and join the meeting.
Final index.js file
Your file should look like this when completed:
Step 6: Load the Web App
Let's serve the web app with a simple HTTP server and start a meeting in the browser!
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 button. Congratulations, you've made your first meeting in the browser using the Webex Browser SDK! 🎉
Most browsers require an HTTPS connection to access certain browser features such as cameras and microphones. To use HTTPS while developing your application, see using http-server with TLS/SSL. Ensure that your production application is deployed using HTTPS.
anchorSamples
anchorWe'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:
anchorUpgrading
anchorThe plugin is deprecated and replaced with . 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
anchorLimitations
anchor- Sharing from iOS and Android browsers is currently not supported due to OS limitations
anchorTroubleshooting
anchorIf 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 10.x and later
- npm 6.x and later
- Optionally: nvm to manage Node.js versions
- Supported Desktop Browsers: Chrome (latest), Firefox (latest), and Safari (latest)
- Supported Mobile Browsers: Chrome for Android and Safari for iOS
- 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
When you initialize the JavaScript SDK, you can set the log level to to see more logging to help troubleshoot the issue:
To see even more logging, set the log level to .
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.
-