undefined

Video Calling

ConnectyCube Video Calling API is built on top of WebRTC protocol.

It allows adding video calling features into your Web app and enabling a video calling function similar to Skype using the API easily.

ConnectyCube Chat API is used as a signaling transport for Video Calling API, so in order to start using Video Calling API you need to connect to Chat.

Code samples

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

  • VideoChat code sample for browser src code
  • VideoChat code sample for Cordova/PhoneGap - How To guide

Create video session

In order to use Video Calling API you need to create a session object - choose your opponents with whom you will have a call and a type of session (VIDEO or AUDIO):

var calleesIds = [56, 76, 34]; // User's ids
var sessionType = ConnectyCube.videochat.CallType.VIDEO; // AUDIO is also possible
var additionalOptions = {};

var session = ConnectyCube.videochat.createNewSession(calleesIds, sessionType, additionalOptions);

Access local media stream

In order to have a video chat session you need to get an access to the user's devices (webcam / microphone):

var mediaParams = {
  audio: true,
  video: true,
  elementId: 'myVideoElementId' // ID of audio/video DOM element to attach a video stream to
};

session.getUserMedia(mediaParams, function(error, stream) {

});

This method lets the browser ask the user for permission to use devices. You should allow this dialog to access the stream. Otherwise, the browser can't obtain access and will throw an error for getUserMedia callback function.

For more information about possible audio/video constraints, here is a good code sample from WebRTC team how to work with getUserMedia constraints: https://webrtc.github.io/samples/src/content/getusermedia/resolution/

Attach local media stream

You can also attach your local media stream to HTML video element, if you don't pass the elementId key in parameters to getUserMedia.

To do this use the following method:

session.attachMediaStream('myVideoElementId', stream);

Initiate a call

var extension = {};
session.call(extension, function(error) {

});

The extension is used to pass any extra parameters in the request to your opponents.

After this, your opponents will receive a callback call:

ConnectyCube.videochat.onCallListener = function(session, extension) {

};

Or if your opponents are offline or did not answer the call request:

ConnectyCube.videochat.onUserNotAnswerListener = function(session, userId) {

};

Accept a call

To accept a call the following code snippet is used:

var extension = {};
session.accept(extension);

After this, your opponents will get a confirmation in the following callback:

ConnectyCube.videochat.onAcceptCallListener = function(session, userId, extension) {

};

Also, both the caller and opponents will get a special callback with the remote stream:

ConnectyCube.videochat.onRemoteStreamListener = function(session, userID, remoteStream) {
 // attach the remote stream to DOM element
 session.attachMediaStream('remoteOpponentVideoElementId', remoteStream);
};

From this point, you and your opponents should start seeing each other.

Reject a call

var extension = {};
session.reject(extension);

After this, the caller will get a confirmation in the following callback:

ConnectyCube.videochat.onRejectCallListener = function(session, userId, extension) {

};

End a call

var extension = {};
session.stop(extension);

After this, the opponents will get a confirmation in the following callback:

ConnectyCube.videochat.onStopCallListener = function(session, userId, extension) {

};

Monitor session connections state

There is a callback function to track the session state:

ConnectyCube.videochat.onSessionConnectionStateChangedListener = function(session, userID, connectionState) {

};

The possible values of connectionState are those of an enum of type ConnectyCube.videochat.SessionConnectionState:

  • ConnectyCube.videochat.SessionConnectionState.UNDEFINED
  • ConnectyCube.videochat.SessionConnectionState.CONNECTING
  • ConnectyCube.videochat.SessionConnectionState.CONNECTED
  • ConnectyCube.videochat.SessionConnectionState.FAILED
  • ConnectyCube.videochat.SessionConnectionState.DISCONNECTED
  • ConnectyCube.videochat.SessionConnectionState.CLOSED
  • ConnectyCube.videochat.SessionConnectionState.COMPLETED

Call changes

Sometimes you make changes during an active call (e.g. applying some css filter to video element) that need to be fed to the opponents and updated. For this, you can use the update function to send instructions to the opponents on how to update the UI.

var extension = {
  "userInfo": {
    "videoFilter": "sepica",
  }
}
session.update(extension);

Your opponents will receive the following callback:

ConnectyCube.videochat.onUpdateCallListener = function(session, userId, extension) {

};

Mute audio

session.mute('audio');

session.unmute('audio');

Mute video

session.mute('video');

session.unmute('video');

Switch video cameras

First of all you need to obtain all your device's available cameras:

ConnectyCube.videochat.getMediaDevices('videoinput').then(function(devices) {
  if (devices.length) {
    // here is a list of all available cameras
    for (var i = 0; i !== devices.length; ++i) {
        var deviceInfo = devices[i];
        var deviceId = deviceInfo.deviceId;
        var deviceLabel = deviceInfo.label;
    }
  }
});

Then you can choose some deviceId and switch the video stream to exact this device:

var constraints = {
   video: {deviceId: deviceId}
};

session.switchMediaTracks(constraints, function(error, stream) {

});

Switch audio tracks

The same can be applied for audio tracks as well. Read above. Just replace a videoinput to audioinput in getMediaDevices and video to audio in constraints.

Group video calls

Because of Mesh architecture we use for multipoint where every participant sends and receives its media to all other participants, current solution supports group calls with up to 4 people.

Also ConnectyCube provides an alternative solution for up to 10 people. Please contact us via Contact form.

Call recording

Coming soon