Test Environment. You are currently using the Webex for Developers test environment. Apps created here will not be available for use with Webex Teams. Please visit Webex for Developers to manage your apps.

New Webex SDK Updates & Advanced Meeting Demo

September 16, 2020
Philip Bellanti
Philip BellantiTechnical Marketing Engineer at Cisco
New Webex SDK Updates & Advanced Meeting Demo

New Webex SDK Updates and Demos

Remote meetings and video conferencing have only become more critical in today’s world. Customers are now expecting to have video calls options in their banking, healthcare, and retail apps. With the uptick in demand, our engineers have been hard at work to make Webex extensibility even more flexible. As part of that, there’s been a lot of recent updates to our SDKs for developers to quickly customize and embed video conferencing in their own applications. Most of these changes happened under the covers, with various bug fixes and optimizations to the user experience.

Some of the new enhancements can be found in the meetings plugin of the Webex Browser (JS) SDK. To help get you get hands-on right away, we released a wonderful demo application, which allows you to test all of the advanced actions in Webex Meetings and familiarize yourself with the corresponding methods that are used in the meetings plugin for the JS SDK. Let’s do a brief walkthrough of how the demo works and highlight some of the features you can test.

First, to initialize the demo, in the “Authentication” section you’ll need to input your Webex access token under “Credentials”, which you can copy from the Getting Started documentation on the Webex for Developer portal (note this token is not long lasting, and will expire in 12 hours; it is only for testing purposes). Once the access token is entered, click the webex.init() button. As you can see, the buttons are all labeled by the method used in the meeting plugin of the SDK. In this method (to authenticate the access token), webex is the object and init() is the function.

Once it’s authenticated, it then must be registered as a device, which is done by clicking the webex.meetings.register() button. You should see the status change from “Not Registered” to “Registered”. The demo is now initialized, and the SDK functionality is available to test.

Authentication

Next, under the Meetings Management section, we’ll need to create a meeting. The simplest way to do this, especially if you’re testing by yourself, is to use an auto-answer endpoint in the “Destination” entry, preferably that sends video and audio. While we can't recommend one over another, a simple Google search like 'sip video test site' should provide several options.

Once you enter the destination, click the webex.meetings.create() button to activate the meeting. If you’re testing a real destination (with a human answering), you can optionally add a PIN code for them to join the meeting.

Once you create the meeting, it will show in the “Active Meetings List”. You can also use the webex.meetings.syncMeetings() button to list all of your currently active meetings. From the active list, click the meeting.join() button next to the meeting you want to enter. You will now see your meeting destination appear under the “Currently Joined Meetings”.

MeetingsManagement

Now that the destination joined the meeting, click the meeting.addMedia() button to receive the remote media streams (audio/video/screenshare). Next, let’s try adding media streams from your local machine to the meeting. Scroll down to the “Meeting Controls” section. Under “Get Media Devices”, click the meeting.getMediaStreams() button, which will prompt for permission to your microphone and camera the first time you run this demo. After the browser gets permission to access your devices, you can use meeting.getDevices() button to invoke the browser to list all of the available devices (mics, camera, etc) that are available to use.

To confirm you are receiving the streams properly, scroll all the way to bottom of the screen, where each media stream is represented in its own box.

MediaStreams

To highlight some of other features you can test, scroll down a little further in the “Meetings Control” section, under “Participants”. Click the meeting.members.membersCollection button, which represents the method to list all of the participants that joined the meeting, along with their userID. You can also manage or mute each participant individually here, with the action buttons to the left of each userID. The meeting.admit() button is used to allow a user that is waiting in the meeting lobby to enter the meeting.

Participants

A new SDK feature that is now available to test on this demo is the ability to set the meeting quality to a fixed value. Just above “Participants”, under “Toggling Sources”, there is dropdown setting for “LOW”, “MEDIUM”, and “HIGH”. Once you select the quality type, you can either apply it the local video, remote video, or to the entire meeting with the respective action buttons.

There are several other features and actions that can be tested in this demo and we encourage you to try them all. Beyond what you see in the demo, there are a few other new enhancements to the Webex SDKs that are worth mentioning.

Meeting Participant Grid View

GridView

The first one is the ability to set a “participant grid view”, for different screen layouts of each meeting participant, in the iOS, Android, and Browser SDKs. By using the meeting.changeVideoLayout(layoutType) method, the “layoutType” can be set to one the following values:

  • 'Single' (Only the active speaker is shown in one window)

  • 'Equal' (Up to 25 video attendees are shown in equally sized windows)

  • 'ActivePresence' (The active speaker in shown in one window, with up to 9 participants in thumbnails overlaid on the active speaker window)

  • 'Prominent' (The active speaker is shown in one window with up to 9 participants in thumbnails below the active speaker window)

  • 'OnePlusN' (The active speaker, the largest video, and a maximum of 12 video attendees are shown, which dynamically adapts to the meeting size as more attendees join)

Automatic Meeting Reconnect (JS SDK)

Another new enhancement now available in the Webex JavaScript SDK is the option for applications to automatically reconnect participants that were prematurely disconnected from a meeting (for example, due to network instability) and continue to retry as needed. At this time, the feature is disabled by default. To enable it, you’ll need the latest JavaScript SDK version and pass the following to meeting config in your app:

config reconnection: {enabled:true}

New Changelog (JS SDK)

We also recently introduced a "changelog" for each version of the JavaScript SDK, where you can keep up with all the new enhancements and fixes.

Just remember, if you get stuck or spot something that looks like it may not be working correctly, contact the Webex Developer Support team, who are always eager to assist.