Options
All
  • Public
  • Public/Protected
  • All
Menu

BlueJeans Web Embed SDK - v2.2.0

BlueJeans Web Embed SDK

N|Solid

 

Introduction

The Bluejeans Web Embed SDK allows a 3rd party to embed a fully functional BlueJeans WebRTC Client within another webpage with very minimal efforts.

Supported Features

  • Extremely Simple: If no customization is required, you can embed a fully featured client with just a few lines of JavaScript.
  • Fully Functional User Interface: A fully functional user interface, virtually identical to the normal BlueJeans WebRTC experience, is provided out of the box with no additional coding required.
  • Access Client State: You can access current information about the client, such as the participant's name, their mute state, whether they have successfully connected, etc.
  • Modify Client State: You can also modify aspects of the client's state, such as changing their name, muting or unmuting them, or disconnecting the call entirely.
  • Limited Customization: The look and feel of the interface can be customized in a limited fashion. Additionally, some user interface elements or features may be hidden entirely if desired.

Alternative: BlueJeans Web Client SDK

The BlueJeans Web Client SDK is an alternative option to this SDK. Overall, the BlueJeans Web Client SDK offers significantly more opportunities for customization, but does not provide any user interface - you must build it yourself. As a result, significantly more code is required.

For advanced users looking to build a completely custom user experience that diverges heavily from the stock BlueJeans WebRTC experience, the BlueJeans Web Client SDK may be a better choice than the BlueJeans Web Embed SDK.

 

Before You Get Started

BlueJeans Account

While this SDK itself does not require a BlueJeans account, in order to create a meeting, you will need an account. If you are already a BlueJeans customer, you should already have an account. If you are not, you can sign up for a free trial at https://www.bluejeans.com/trial/.

The SDK also assumes you have general understanding of basic BlueJeans concepts, such as audio and video mute, screen sharing, etc. If you do not understand these concepts, please consult BlueJeans documentation first.

Enable Embedding

For security reasons, BlueJeans accounts do not permit embedding by default. You will need have the domain of your parent page enabled for embedding. Please contact the BlueJeans support team at https://support.bluejeans.com/s/contactsupport to make this request.

 

Installation

The best way to install the BlueJeans Web Embed SDK is through NPM or Yarn:

npm install bluejeans-webrtc-embed-sdk

Alternatively, you can download it directly here: https://bluejeans-embed-sdk.s3.us-west-2.amazonaws.com/releases/2.2.0/dist/BJNEmbedSDK.js

 

Getting Started

Including BJNEmbedSDK

The simplest way is to simply include BJNEmbedSDK.js in a <script> tag in your webpage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/4.5.2/mobx.umd.js"></script>
<script src="./BJNEmbedSDK.js">

Note that the path may be different depending on where you downloaded the file. When using a <script> tag, the SDK will be available as a global variable, BJN.BJNEmbedSDK.

However, for larger projects, you will likely be using a build system such as Webpack. In this case, simply require or import in your existing JavaScript as follows:

const BJN = require('bluejeans-webrtc-embed-sdk')
let BJNEmbedSDK = BJN.BJNEmbedSDK
Or import it as a named import

import { BJNEmbedSDK } from 'bluejeans-webrtc-embed-sdk'

Setting Up Your Page For Embedding

Your application will need to have a block-level element (likely a <div> element) that the BlueJeans interface will be embedded in. You are responsible for sizing this element accordingly - the BlueJeans interface will adjust itself to the size of this element. You must give this element a unique DOM id.

Joining a Meeting Using the SDK

To join a meeting, you need to call the joinMeeting() method on the BJNEmbedSDK object. This method accepts a single object as a parameter, which has three fields you must specify:

  • meetingInfo: A sub-object that describes the meetin to join. It has two required fields:
    • meetingId: The BlueJeans meeting ID to join
    • passcode: The moderator or participant passcode of the meeting to join. If no passcode is required, pass an empty string.
  • iFrameProps: A sub-object that tells the SDK where to embed itself on your page. It has one required field:
    • selectorId: The DOM id of the element that will hold the embedded interface.
  • uiProps: A sub-object allowing customization of the user interface. None of the fields are required, so to start, simply pass an empty object. See the documentation for full list of options.

Here is an example invocation. Note please add your meetingID, passcode and selectorId before trying:

BJNEmbedSDK.joinMeeting({
    meetingInfo: {
        meetingId: "<MEETING_ID>",
        passcode: "<PASSCODE>"
    },
    iFrameProps: {
        selectorId: '#bluejeans_holder'
    },
    uiProps: {}
})

If you do all of the above correctly, you should see a BlueJeans meeting interface appear in the location you have designated!

Concept: Observing Variables

The SDK exposes many variables which let you know the current state of the meeting. All of these variables are _observable_, meaning you can register to receive a notification when they change. This is a core concept that you will use repeatedly when interacting with the SDK.

To observe a value, call the observe() method on the BJNEmbedSDK object. This method takes two parameters:

  • The name of the variable property of BJNEmbedSDK to observe, as a string.
  • A function/lambda, which accepts no arguments. This function will be called whenever the value of this property changes. It will also be called immediately as well with the current value at the time of observation.

For a practical example, see the next section.

Waiting for SDK to Initialize

Once you join a meeting, the SDK will need to initialize asynchronously. This happens very quickly, but is slow enough that you cannot immediately issue commands to the SDK right after joining. To safely wait until this happens, use the isSDKInitComplete property:

BJNEmbedSDK.observe('isSDKInitComplete', ()=> {
    if(BJNEmbedSDK.isSDKInitComplete) {
        // proceed
    }
})

Getting Meeting State

Once you join a meeting and have waited for initialization, you are now able to query for various meeting states. For example, you might want to know if the user has muted or not. To do this, simply access BJNEmbedSDK.audioMuted. The following code will print whether the user is audio muted or not:

  console.log("User is muted: " + BJNEmbedSDK.audioMuted)

It is also powerful to know whenever such a value changes. Using observable variables, you can do this easily. The following code will print the user's mute state any time they change it:

BJNEmbedSDK.observe('audioMuted', ()=> {
    console.log("User is muted: " + BJNEmbedSDK.audioMuted)
})

There are several different variables you can access to get current meeting state. For a full list, consult the documentation.

Changing Meeting State

You may also want to change meeting state from your parent page. For example, you might want to set the user's mute state. To do this, simply call the BJNEmbedSDK.setAudioMuted() method. The following code will mute the user's microphone:

BJNEmbedSDK.setAudioMuted(true)

Under the hood, such requests are applied asychronously. This is usually not important, but if you attempt to read a value immediately after having written to it, you may not see the result you expect.

Advanced: MobX Integration

Internally, this SDK uses MobX to provide observable values. The SDK provides the BJNEmbedSDK.observe() method so that you do not need to understand MobX. However, if you are already using MobX in your project, you can gain additional benefits!

Each property of the BJNEmbedSDK object is actually a MobX @observable. This means you can avoid using BJNEmbedSDK.observe() and instead use regular MobX primitives like autorun() and @computed when accessing these values, and they will act exactly as you expect.

 

Support

For issues with this SDK, please contact BlueJeans Support: https://support.bluejeans.com/s/contactsupport

 

Contributing

The BlueJeans Web Embed SDK is closed source and proprietary. As a result, we cannot accept pull requests.

However, we enthusiastically welcome feedback on how to make our SDK better! If you think you have found a bug, or have an improvement or feature request, please file a GitHub issue or reach out to our support team at https://support.bluejeans.com/s/contactsupport and we will get back to you.

Thanks in advance for your help!

 

License

Copyright © 2023 BlueJeans Network. Refer to LICENSE.txt and LICENSE-3RD-PARTY.txt.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.