The Bluejeans Web Embed SDK allows a 3rd party to embed a fully functional BlueJeans WebRTC Client within another webpage with very minimal efforts.
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.
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.
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.
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
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'
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
.
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 joinpasscode
: 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!
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:
BJNEmbedSDK
to observe, as a string.For a practical example, see the next section.
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
}
})
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.
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.
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.
For issues with this SDK, please contact BlueJeans Support: https://support.bluejeans.com/s/contactsupport
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!
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.