EnterpriseFeatures/videoconf/web

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search

Contents

QuickBlox Multiparty Video Conferencing SDK for Javascript

The QuickBlox Multiparty Video Conferencing SDK provides a JavaScript library to access the QuickBlox Multiparty Video Conferencing API.

Version

0.2.0

Dependencies for browser

For the library to work, you need to include adapter.js in your html before quickblox-multiparty-video-conferencing-client.min.js, like so:

<script src="adapter.js"></script>
<script src="quickblox-multiparty-video-conferencing-client-0.2.1.min.js"></script>

Integration

Initialize framework

var client;
 
$(function() {
  var config = {"server": "wss://...:8989"};
  client = new QBVideoConferencingClient(config);
});

Possible configs:

'server' - Janus server endpoint

'debug' - Enable internal debug logs: true/false.

'iceServers' - a list of ICE servers

'video.quality' - Video quality. Possible values: 'lowres' (320x240), 'hires' (640x480). Default is 'hires'.

'video.frameRate' - Video framerate: Range: 15-29. Default is 29.

Create session

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

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

Once created, you can interact with a Video Conferencing API in several different ways.

Attach Video Conferencing plugin

Next, the most important step is obviously attach Video Conferencing plugin, as it's what will allow you to exploit the features of a plugin to manipulate the media sent and/or received by a PeerConnection in your web page. This method will create a plugin handle internally, for which you can configure callbacks.

You also have to attach 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(){
 
    }
});

Join video room

To jump into video chat with users you should join it:

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

To check curently joined video room use the following property:

client.currentDialogId

List online participants

To list online users in a video chat:

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

Callbacks

There are 4 callbacks you can listen for. You can use method 'on' 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 audio

You can mute/unmute your own audio:

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

Mute remote user's audio

You also can mute/unmute remote user's audio:

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

Mute video

You can mute/unmute your own video:

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

Mute remote user's video

You also can mute/unmute 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 video bitrate of remote user. The following string will be shown in element - '180 kbits/sec' and will be refreshed each 1 second.

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

List video input devices (cameras)

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

Switch video input device (camera)

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

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

Leave video room

To leave current joined video room:

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

Detach Video Conferencing plugin

When job is done you should detach Video Conferencing plugin - the following method detaches from the plugin and destroys the handle, tearing down the related PeerConnection if it exists:

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

Destroy session

And the final step to fully close/cleanup everything is to destroy session:

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