QuickBlox Documentation

QuickBlox provides powerful Chat API and SDK to add real-time messaging and video calls to your web and mobile apps. Learn how to integrate QuickBlox across multiple platforms and devices. Check out our detailed guides to make integration easy and fast.

Video Conference

Learn how to add video conference calls to your app.

🚧

This feature is available for customers on the Enterprise plan only. Take advantage of Enterprise features to unlock new value and opportunities for users. For more information and if you want to request a Demo, please contact us by mail: [email protected].

QuickBlox provides Multiparty Video Conferencing solution allowing to set up a video conference between 10-12 people. It is built on top of WebRTC SFU technologies.

Features supported:

- Video/Audio Conference with 10-12 people.
- Join/Rejoin video room functionality (like Skype).
- Mute/Unmute audio/video stream (own and opponents).
- Display bitrate.
- Switch video input device (camera).

Initialize

In order to start working with Multiparty Video Conferencing API, you need to initialize a client.

var MULTIPARTY_SERVER_ENDPOINT = "wss://...:8989";
var config = {
   server: MULTIPARTY_SERVER_ENDPOINT,
   iceServers: [{urls: "stun:stun.l.google.com:19302"}]
   // video: {quality: 'stdres'} // Possible values: 'lowres' (320x240), 'stdres' (640x480), 'hdres' (1280x720), 'fhdres' (1920x1080). Default is 'stdres'.
};
var client = new QBVideoConferencingClient(config);

📘

Note

Default multiparty server endpoint is not shared. To request the endpoint for you, contact us at https://quickblox.com/contact/.

Create session

Once the library has been initialized, you can start creating a session. Normally, each browser tab will need a single session with the server.

client.createSession({
  success: function() {},
  error: function(error) {},
  destroyed: function() {},
  timeoutSessionCallback: function() {}
});

Once the session is created, you can interact with a Video Conferencing API.

Attach video conferencing plugin

Video conferencing allows you to exploit the features of the plugin to manipulate the media sent and/or received by peer connection on your web page. This method will create a plugin handle internally for which you can configure callbacks. You also have to attach the plugin to each remote user.

var isRemote = "...";
var userId = "...";

client.attachVideoConferencingPlugin(isRemote, userId, {
  success: function() {},
  error: function(error) {},
  consentDialog: function(on) {},
  webrtcState: function(on) {},
  mediaState: function(medium, on) {},
  iceState: function(iceConnectionState) {},
  slowLink: function(uplink, nacks) {},
  oncleanup: function() {}
});

📘

Note

To attach the plugin to a local user plugin, set userId to null and isRemote to false.

Join video room

To jump into a video chat, join it using the join() method.

var chatDialogId = "...";
var currentUserId = "...";
var isAudioCallOnly = false;

client.join(chatDialogId, currentUserId, isAudioCallOnly, {
  success: function() {},
  error: function(error) {}
});

To check the current joined video room, use the following property.

client.currentDialogId

List online participants

To list online users in a video chat, use the listOnlineParticipants() method.

client.listOnlineParticipants(chatDialogId, {
  success: function(participants) {},
  error: function(error) {}
});

Callbacks

There are 4 callbacks you can listen for: participantjoined, participantleft, localstream, and remotestream . You can use the on() method to add them.

client.on("participantjoined", function(userId, userDisplayName) {});
client.on("participantleft", function(userId, userDisplayName) {});
client.on("localstream", function(stream) {
  QBVideoConferencingClient.attachMediaStream($("#myvideo").get(0), stream);
});
client.on("remotestream", function(stream, userId) {
  // do not add stream if it's already here
  if (feedViewIsAlreadyAdded(userId)) {
    return;
  }
  addFeedView(userId, false);
  QBVideoConferencingClient.attachMediaStream(
    $("#remotevideo" + userId).get(0),
    stream
  );
});

To remove all listeners the following code can be applied:

client.removeAllListeners("participantjoined");
client.removeAllListeners("participantleft");
client.removeAllListeners("localstream");
client.removeAllListeners("remotestream");

Mute local audio

You can mute/unmute your own audio.

var muted = client.toggleAudioMute();
console.info("Now audio is muted=" + muted);

Mute remote audio

You also can mute/unmute a remote user's audio.

var muted = client.toggleRemoteAudioMute(userId);
console.info("Now remote audio is muted=" + muted);

Disable local video

You can enable/disable your own video.

var muted = client.toggleVideoMute();
console.info("Now video is muted=" + muted);

Disable remote video

You also can enable/disable a remote user's video.

var muted = client.toggleRemoteVideoMute(userId);
console.info("Now remote video is muted=" + muted);

Display bitrate

There is a way to show the video bitrate of a remote user. The following string will be shown in element - 180 kbits/sec and will be refreshed each one second.

var userId = "...";
client.showBitrate(userId, $("#curbitrate" + userId));
var userId = "...";
client.hideBitrate(userId, $("#curbitrate" + userId));

List video input devices

To get the list of all video input devices (cameras), use the following code snippet.

QBVideoConferencingClient.listVideoinputDevices(function(videoinputDevices) {
  for (var i = 0; i !== videoinputDevices.length; ++i) {
    var deviceInfo = videoinputDevices[i];
    //deviceInfo.label
    //deviceInfo.deviceId
    if(deviceInfo.deviceId == client.currentMidiaDeviceId){
      //selected
    }
  }
});

Switch video input device

In order to switch video camera, you have to obtain a list of currently plugged video cameras with the QBVideoConferencingClient.listVideoinputDevices() method.

var deviceId = "...";
client.switchVideoinput(deviceId, {
  error: function(error) {},
  success: function() {}
});

Leave video room

To leave the video room, use the leave() method.

client.leave({
  success: function() {},
  error: function(error) {}
});

Detach video conferencing plugin

When the job is done, you should detach the video conferencing plugin. The detachVideoConferencingPlugin() method detaches the plugin and destroys the handle tearing down to the related peer connection if it exists.

client.detachVideoConferencingPlugin({
  success: function() {},
  error: function(error) {}
});

Destroy session

To destroy a session, use the destroySession() method.

client.destroySession({
  success: function() {},
  error: function(error) {}
});

Camera resolution

A camera resolution is a video stream encoding parameter. Yo can set video resolution via video property.

var config = {
  server: MULTIPARTY_SERVER,
  iceServers: ["..."],
  video: { quality: "hires" },
};
client = new QBVideoConferencingClient(config);
ParametersDescription
videoVideo property. The possible values are lowres (320x240) and hires (640x480). Default: hires.

Updated 23 days ago


What's Next

Content

Video Conference


Learn how to add video conference calls to your app.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.