undefined

Video Conferencing

ConnectyCube Multiparty Video Conferencing API is built on top of WebRTC protocol and based on top of WebRTC SFU architecture.

Max people per Conference call is 12.

Video Conferencing is available starting from Hobby plan (you still can play with it on a Free plan).

To get a difference between P2P calling and Conference calling please read our ConnectyCube Calling API comparison blog page.

Features supported

  • Video/Audio Conference with up to 12 people
  • Join-Rejoin video room functionality (like Skype)
  • Guest rooms
  • Mute/Unmute audio/video streams
  • Display bitrate
  • Switch video input device (camera)
  • Switch audio input device (microphone)

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

Set up config

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

const credentials = {
  appId: ...,
  authKey: "...",
  authSecret: "..."
}

const MULTIPARTY_SERVER_ENDPOINT = 'wss://...:8989';

const appConfig = {
  debug: { mode: 1 },
  conference: { server: MULTIPARTY_SERVER_ENDPOINT },
}

ConnectyCube.init(credentials, appConfig)

Default multiparty server endpoint is wss://janus.connectycube:8989.

Create session

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

const session = ConnectyCube.videochatconference.createNewSession()

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

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):

const mediaParams = {
    audio: true,
    video: true,
    options: {
        muted: true,
        mirror: true
    }
};

session
    .getUserMedia(mediaParams)
    .then(localStream => {})
    .catch(error => {});

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/

HD video quality

If HD video quality is required - the following audio/video constraints are required to pass:

{video: { width: 1280, height: 720 }, audio: true}

More info about all possible is are available here https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Attach local media stream

Then you should attach your local media stream to HTML video element.

For Web-like environments, including Cordova - use the following method:

session.attachMediaStream('myVideoElementId', localStream);

For ReactNative environment - use the following method:

import {RTCView} from 'react-native-connectycube';

// pass a local or remote stream to the RTCView component
...
<RTCView  objectFit="cover" style={styles.rtcView} key={userId} streamURL={localStream.toURL()} />
...

Join video room

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

session.join(roomId, userId, userDisplayName)
    .then(() => {})
    .catch(error => {})

To check current joined video room use the following property:

const roomId = session.currentRoomId

List online participants

To list online users in a room:

session.listOfOnlineParticipants()
    .then(participants => {})
    .catch(error => {})

Events

There are 6 events you can listen for:

ConnectyCube.videochatconference.onParticipantJoinedListener = (session, userId, userDisplayName) => {}
ConnectyCube.videochatconference.onParticipantLeftListener = (session, userId) => {}
ConnectyCube.videochatconference.onRemoteStreamListener = (session, userId, stream) => {}
ConnectyCube.videochatconference.onSlowLinkListener = (session, userId, uplink, nacks) => {}
ConnectyCube.videochatconference.onRemoteConnectionStateChangedListener = (session, userId, iceState) => {}
ConnectyCube.videochatconference.onSessionConnectionStateChangedListener = (session, iceState) => {}

Mute/Unmute audio

You can mute/unmute your own audio:

// mute
session.muteAudio()

// unmute
session.unmuteAudio()

//check mute state
session.isAudioMuted() // true/false

Mute/Unmute video

You can mute/unmute your own video:

// mute
session.muteVideo()

// unmute
session.unmuteVideo()

//check mute state
session.isVideoMuted() // true/false

List of devices

// get all devices
ConnectyCube.videochatconference.getMediaDevices()
    .then(allDevices => {})
    .catch(error => {})

// only video devices
ConnectyCube.videochatconference.getMediaDevices(ConnectyCube.videochatconference.DEVICE_INPUT_TYPES.VIDEO)
    .then(videoDevices => {})
    .catch(error => {})

// only audio devices
ConnectyCube.videochatconference.getMediaDevices(ConnectyCube.videochatconference.DEVICE_INPUT_TYPES.AUDIO)
    .then(audioDevices => {})
    .catch(error => {})

Switch video(camera)/audio(microphone) input device

const deviceId = '...';

// switch video
session.switchMediaTracks({ video: deviceId })
    .then(updatedLocaStream => {}) // you can reattach local stream
    .catch(error => {})
// switch audio
session.switchMediaTracks({ audio: deviceId })
    .then(updatedLocaStream => {}) // you can reattach local stream
    .catch(error => {})

Leave room and destroy conf session

To leave current joined video room:

session.leave()
    .then(() => {})
    .catch(error => {})

(Deprecated) API for SDK pre 3.0

Initialization

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

const MULTIPARTY_SERVER_ENDPOINT = 'wss://...:8989';
const config = {
    server: MULTIPARTY_SERVER_ENDPOINT,
    debug: false
    // video: {quality: 'stdres'} // Possible values: 'lowres' (320x240), 'stdres' (640x480), 'hdres' (1280x720), 'fhdres' (1920x1080). Default is 'stdres'.
};
const 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:

const callbacks = {
    success: () => {},
    error: error => {},
    destroyed: () => {}
};

videoConfClient.createSession(callbacks);

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.

const isRemote = true; // or false
const userId = 12345;
const callbacks = {
    success: () => {},
    error: error => {},
    consentDialog: on => {},
    webrtcState: on => {},
    mediaState: (medium, on) => {},
    iceState: iceConnectionState => {},
    slowLink: (uplink, nacks) => {},
    oncleanup: () => {}
};

videoConfClient.attachVideoConferencingPlugin(isRemote, userId, callbacks);

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:

const chatDialogId = '...';
const currentUserId = 12345;
const isAudioCallOnly = false; // or true
const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.join(chatDialogId, currentUserId, isAudioCallOnly, callbacks);

To check current joined video room use the following property:

videoConfClient.currentDialogId;

List online participants

To list online users in a video chat:

const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.listOnlineParticipants(chatDialogId, callbacks);

Callbacks

There are 4 callbacks you can listen for. You can use method on to add them:

videoConfClient.on('participantjoined', (userId, userDisplayName) => {});

videoConfClient.on('participantleft', (userId, userDisplayName) => {});

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

videoConfClient.on('remotestream', (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:

const muted = videoConfClient.toggleAudioMute();
console.info('Now audio is muted = ' + muted);

Mute remote user's audio

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

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

Mute video

You can mute/unmute your own video:

const muted = videoConfClient.toggleVideoMute();
console.info('Now video is muted = ' + muted);

Mute remote user's video

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

const 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.

const userId = 12345;

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

List video input devices (cameras)

let deviceInfo, deviceId, deviceLabel;

ConnectyCube.videochatconference.Client.listVideoinputDevices(videoinputDevices => {
    for (let i = 0; i !== videoinputDevices.length; ++i) {
        deviceInfo = videoinputDevices[i];
        deviceId = deviceInfo.deviceId;
        deviceLabel = deviceInfo.label;
    }
});

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.

const deviceId = '...';
const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.switchVideoinput(mediaDeviceId, callbacks);

Leave video room

To leave current joined video room:

const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.leave(callbacks);

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:

const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.detachVideoConferencingPlugin(callbacks);

Destroy session

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

const callbacks = {
    success: () => {},
    error: error => {}
};

videoConfClient.destroySession(callbacks);