undefined

Multiparty Video Conferencing feature overview

ConnectyCube provides the Multiparty Video Conferencing solution which allows setting up video conference between 10-12 people. It's built on top of WebRTC SFU technologies.

Multi-conference server is available only for Enterprise plans, with additional fee. For more information and if you want request a Demo please contact us at https://connectycube.com/contact .

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)

Code samples

There are ready-to-go FREE code samples to help you better understand how to integrate multiparty video conferencing capabilities in your apps:

  • Multiparty Video Conferencing code sample for browser src code

Initialization

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,
    debug: false
    // video: {quality: 'stdres'} // Possible values: 'lowres' (320x240), 'stdres' (640x480), 'hdres' (1280x720), 'fhdres' (1920x1080). Default is 'stdres'.
};
var videoConfClient = new ConnectyCube.videochatconference.Client(config);

Default multiparty server endpoint is not shared. Please use above contacts to request the endpoint for you.

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:

videoConfClient.createSession({
    success: function() {

    },
    error: function(error) {

    },
    destroyed: function() {

    }
});

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

Attach Video Conferencing plugin

Next, the most important step is to 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 = ...;

videoConfClient.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(){

    }
});

For local user plugin attachment we should pass userId = null and isRemote = false.

Join video room

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

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

videoConfClient.join(chatDialogId, currentUserId, isAudioCallOnly, {
    success: function(){

    },
    error: function(error){

    }
});

To check current joined video room use the following property:

videoConfClient.currentDialogId

List online participants

To list online users in a video chat:

videoConfClient.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:

videoConfClient.on("participantjoined", function(userId, userDisplayName){

});

videoConfClient.on("participantleft", function(userId, userDisplayName){

});

videoConfClient.on("localstream", function(stream){
    ConnectyCube.videochatconference.Client.attachMediaStream($('#myvideo').get(0), stream);
});

videoConfClient.on("remotestream", function(stream, userId){
    // do not add stream if it's already here
    if(feedViewIsAlreadyAdded(userId)){
        return;
    }

    addFeedView(userId, false);

    ConnectyCube.videochatconference.Client.attachMediaStream($('#remotevideo'+userId).get(0), stream);
});

To remove all listeners the following code can be applied:

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

Mute audio

You can mute/unmute your own audio:

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

Mute remote user's audio

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

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

Mute video

You can mute/unmute your own video:

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

Mute remote user's video

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

var muted = videoConfClient.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 = ...;
videoConfClient.showBitrate(userId, $('#curbitrate'+userId));

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

List video input devices (cameras)

ConnectyCube.videochatconference.Client.listVideoinputDevices(function(videoinputDevices){
    for (var i=0; i!==videoinputDevices.length; ++i) {
        var deviceInfo = videoinputDevices[i];

        var deviceLabel = deviceInfo.label;
        var deviceId = 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 ConnectyCube.videochatconference.Client.listVideoinputDevices method.

var deviceId = "...";

videoConfClient.switchVideoinput(mediaDeviceId, {
    error: function(error) {

    },
    success: function() {

    }
});

Leave video room

To leave current joined video room:

videoConfClient.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:

videoConfClient.detachVideoConferencingPlugin({
    success: function() {

    },
    error: function(error) {

    }
});

Destroy session

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

videoConfClient.destroySession({
    success: function(){

    },
    error: function(error){

    }
});